CODEWITHSUNDEEP
htmlformstextboxsemanticslabel
Mike Flynn
Mike Flynn

Reputation: 24325

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?

Upvotes: 4

Views: 4434

Answers (2)

John Hascall
John Hascall

Reputation: 9416

There is a solution using the title and aria-labelledby attributes.

Here is an example:

<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
  ...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
  ...
<option 31>31
</select>

This "passes" the http://wave.webaim.org/ accessibility checker.

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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.)

Upvotes: 3

Related Questions