How to markup a "Select"-group

[Ize]

Hi,

every time I have to markup date input-fields in a form, I'm faced with the same question: "What's the best way to bind a label to a group of select-elements?"

'Cause basically you have this:

<label>Your date of birth:</label>
<label for="month">Month:</label>
<select id="month"><!-- 12 Option-elements here please --></select>
<label for="day">Day:</label>
<select id="day"><!-- lots of Option-element go here --></select>
<label for="year">Year:</label>
<select id="year"><!-- lots of Option-elements go here --></select>

Most of the time I hide the month-day-year labels using CSS, and only show the first label, but what should go in the "for"-attribute of that label?
What's semantic and accessible?

[zcorpan]

Fieldset/legend?

Or just:

<label>Your date of birth (<kbd><var>YYYY</var>-<var>MM</var>-<var>DD</var></kbd>): <input name="dob"></label>

[Ize]

Fieldset/legend?

Or just:

<label>Your date of birth (<kbd><var>YYYY</var>-<var>MM</var>-<var>DD</var></kbd>): <input name="dob"></label>

Maybe, but I think <select>'s are pretty accepted on the Web and therefore the first choice. Right now I'm working with Fieldset/Legend indeed. That's fairly semantic

[zcorpan]

A set of selects aren't very usable if you happen to use a screen reader though, or so I heard.

[Ize]

A set of selects aren't very usable if you happen to use a screen reader though, or so I heard.

Also true.
(for more info, see: http://www.brucelawson.co.uk/index.p...country-names/
)

[Ize]

I've used your solution. I've started to like it more and more. Thanks!

[Dan Schulz]

Actually, the proper markup for a label is

<label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10">

If you're using XHTML, be sure to self-close the input tag by adding a forward slash (and possibly a space, to inprove readability of the source code) before the closing bracket.

(Ize, glad to see you're using the label element properly! The above was for a reference that others can use.)

As for marking up a select element, with its corresponding options, I'd use a fieldset and legend.

<form name="exampleForm" action="none">
    <fieldset id="basicInfo">
        <legend>Your Contact Information</legend>
        <label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10"><br>
        <!-- other labels and input fields would go here, like the sender's email address and phone number for instance -->
    </fieldset>
    <fieldset id="recipient">
        <legend>Select Element Fieldset Example</legend>
        <select name="sendTo" id="sendTo">
            <option>Tom</option>
            <option>Richard</option>
            <option>Harry</option>
            <option>My dog Larry</option>
        </select>
    </fieldset>
    <div>
        <input id="submit" type="submit" value="Send Message">&nbsp; <input id="reset" type="reset" value="Clear Form">
    </div>
</form>

Multiple select elements can be marked up this way, and you can also give the fieldset a unique ID (like I did in my example, since ID is a shared attribute common to almost all (X)HTML elements).

Also, if you're using XHTML, be sure to self-close the BR and INPUT elements (as well as other self-closing elements) by preceding the closing bracket with a forward slash (and possibly a space to inprove the readability of the source code)

For accessibility purposes, I think you have to declare a tab order for each of your fieldsets so that people who aren't using (or capable of using) a computer mouse can still navigate through your form (you can probably tell I didn't get a lot of sleep last night, which is why my memory is failing me )

[zcorpan]

Actually, the proper markup for a label is

<label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10">

No, it's not "The" proper markup; it's an alternative equally proper way to mark it up. HTML specifies two ways to associate a label with a form control; implicitly (nesting the form control in the label) or explicitly (using for=""). One is not more proper than the other (although IE6 only supports explicit labels for clicking).

For accessibility purposes, I think you have to declare a tab order for each of your fieldsets so that people who aren't using (or capable of using) a computer mouse can still navigate through your form (you can probably tell I didn't get a lot of sleep last night, which is why my memory is failing me )

There already is a tab order. When the tabindex="" attribute is used you mostly make the tab order different than the default, which confuses the user. (In particular, elements with tabindex are focused before all other focusable elements, regardless of where they are put in the source.) Therefore I'd advice against using tabindex="" and instead make sure the source order is logical.

In any case tabindex="" is not a valid attribute for FIELDSET in HTML4.