Exploring HTML form elements
.HTML form elements are richer than is generally understood. There are a variety of completely standard and semantically-useful elements that seem to languish in semi-obscurity, despite having been around since 1999.
As far as I can tell, most developers use form, input, select and option, textarea, and that’s about it. When I was writing more forms myself, for work, those are more or less all I used as well.
Since then, I’ve attached a lot more importance to writing strictly valid code, and this has helped me learn more about the ideal ways to deal with forms. The HTML 4.01 and XHTML 1.0 specifications have been invaluable references.
I find the following form elements rather useful:
buttonlabelfieldsetlegendoptgroup
button
Just what it says it is. It’s a button, and it can be used to submit or reset a form, or it can act as a hook for JavaScript actions. The main advantage it has over the input element with a type of “image” is that you can contain an image in it like this:
<button type="submit"><img src="whatever" alt="whatever" /></button>
It acts just like an input element with a “submit” type, so no JavaScript hooks to submit the form are required. Additionally, standard markup can be used (and styled) within it. For example:
<button style="background-color:#cccccc;border:1px solid red; -moz-border-radius:.5em;color:white;" type="button">This is a button</button>
Which produces this:
HTML 4.01 button specification.
label
Used like so: <label for="id_of_form_element">text for the label</label>. The label text is treated by most clients as part of the element referred to in the for attribute, so clicking on the label text will give focus to the element in question—a subtle but very nice usability plus. For example:
<input type="checkbox" name="labeldemo" id="labeldemo"><label for="labeldemo">Click this to toggle the checkbox</input>
Which produces this:
HTML 4.01 label specification.
fieldset and legend
fieldset groups form elements together; legend is used to describe those grouped elements similarly to how caption describes the contents of tables. Useful and accessible, but take note: styling legend elements is rather difficult, and the element will ignore a lot of CSS rules in Gecko-based browsers. I found that bug discussion rather interesting, and it appears that there isn’t a fix for Firefox coming anytime soon, partly because what the fix should do is still being debated.
An example:
<fieldset>
<legend>A group of checkboxes</legend>
<input type="checkbox" name="fldemo" id="fldemo" /><label for="fldemo">Click this to toggle the checkbox</label>
<input type="checkbox" name="fldemo2" id="fldemo2" /><label for="fldemo2">Click this to toggle the checkbox</label>
<input type="checkbox" name="fldemo3" id="fldemo3" /><label for="fldemo3">Click this to toggle the checkbox</label>
<input type="checkbox" name="fldemo4" id="fldemo4" /><label for="fldemo4">Click this to toggle the checkbox</label>
</fieldset>Which produces this:
HTML 4.01 fieldset and legend specification.
optgroup
This allows you to group items within select dropdowns, and give the groups headings—much nicer than empty-value option elements!
<select name="whatever" id="whatever">
<option value="0">Outside group</option>
<optgroup label="Group 1">
<option value="1-1">Inside Group 1: 1</option>
<option value="1-2">Inside Group 1: 2</option>
<option value="1-3">Inside Group 1: 3</option>
</optgroup>
<optgroup label="Group 1">
<option value="2-1">Inside Group 2: 1</option>
<option value="2-2">Inside Group 2: 2</option>
<option value="2-3">Inside Group 2: 3</option>
</optgroup>
</select>
Which produces this:
optgroup apparently doesn’t work too well on IE5(.5) PC, but that’s two versions ago now, so perhaps that doesn’t matter so much anymore…
HTML 4.01 optgroup specification.
I encourage anyone writing HTML forms to try out the above elements. They’re useful, usable, and accessible—what more do we want from forms?