Question

I have on this check in form:

<label>Check in date </label>
<select id="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="year">
  <option value="1">2012</option>
  <option value="2">2013</option>
</select> 

As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.

What would be the proper way to do this with HTML ?

Update:
I’m concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form…

Answer 1

You cannot associate a label element with more than one control. This is described in the definition of label.

You could give each select element its own label.

A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.