use HTML fieldset in forms to make label match multi-part date

by Derek Sivers

Related link: http://www.google.com/search?q=html+fieldset



Are you being good and using <label> tags to match your <input> and <select> fields in forms?

Now what if you break up the date into separate year, month, and day selects? You can't put THREE <label> tags - you really just want one - but its ID will not match the ID of any of the three selects? Broken HTML! Oh no! What to do? Use <fieldset> around all three selects and assign the fieldset the ID you need.

EXAMPLE:
<form action="something" method="post">
<label for="name">name</label>
<input type="text" id="name" name="custname" />
<label for="birthday">birthday</label>
<fieldset id="birthday">
<select name="bdyear"><option>...</option></select>
<select name="bdmonth"><option>...</option></select>
<select name="bdday"><option>...</option></select>
</fieldset>
<label for="sendit">then click...</label>
<input type="submit" id="sendit" name="submit" value="submit" />
</form>

1 Comments

aristotle
2005-10-20 17:56:07
Re:
You do know that when the form element and its label are immediate siblings, you don’t have to use the for="element-id" attribute but can simply use nesting, right?


<label>name <input type="text" id="name" name="custname" /></label>