Mike Flynn Mike Flynn - 1 month ago 7
HTML Question

One Html Label with Two Form Inputs

If I want to associated one label with two forms inputs, say "Expiration Date" for the label for two inputs "ExpirationMonth" and "ExpirationYear", what is the best semantic approach to do this?

Answer

There isn’t a way to associate a label with more than one input field, because a label is, by definition, a label for a single field. The reasons for using a label element are based on such a simple correspondence, so there’s no point in using it for two fields simultaneously.

If you are required to have two input fields, on one hand, and to comply with WCAG 2.0 (which makes label markup mandatory for input boxes, H44) on the other, then you need to have separate labels for each of the boxes.

In practice, it is better to have a single field for month/year input, and then you won’t have this problem. (I’m sure most users will find it more natural to type “10/12” than to type “10”, click on a next input box – or hit TAB, but most users don’t – and then type “12”. And any attempt at auto-tabbing from one field to another will cause confusion.)

Comments