learn advanced html : Accessible Forms

Labels

Each form field should have its own explicitlabel. The label tag sorts this out, with a forattribute that associates it to a form element:

<form>
    <label for="yourName">Your Name</label>
    <input name="yourName" id="yourName">
    <!-- etc. -->

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Both name and id attributs are typically required; the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a caption with the legend tag.

<form action="somescript.php" >
    <fieldset>
        <legend>Name</legend>
        <p>First name <input name="firstName"></p>
        <p>Last name <input name="lastName"></p>
    </fieldset>
    <fieldset>
        <legend>Address</legend>
        <p>Address <textarea name="address"></textarea></p>
        <p>Postal code <input name="postcode"></p>
    </fieldset>
    <!-- etc. -->

Most browsers tend to represent field sets with a border surrounding them and the legend caption breaking the left of the top border by default. You can, of course, change this with CSS if you wish.

Option groups

The optgroup element groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

<select name="country">
    <optgroup label="Africa">
        <option value="gam">Gambia</option>
        <option value="mad">Madagascar</option>
        <option value="nam">Namibia</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="fra">France</option>
        <option value="rus">Russia</option>
        <option value="uk">UK</option>
    </optgroup>
    <optgroup label="North America">
        <option value="can">Canada</option>
        <option value="mex">Mexico</option>
        <option value="usa">USA</option>
    </optgroup>
</select>

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements - tab stops and access keys.

The accesskey and tabindex attributes can be added to the individual form tags such as inputand also to legend tags.

<input name="firstName" accesskey="f" tabindex="1">

For more about this, see the Accessible Linkspage.