Forms: Best Practice

Introduction

The HTML form element is used to markup forms, i.e. places on your site where the user is able to submit data and invoke some kind of behavior, whether it might be a contact form, a search form or some other that lets the user even change data on the backend (e.g. when working with a CMS). When marking up a form, there are several things a state-of-the-art web developer needs to consider to make sure the form is not only valid markup but also accessible.

Real Life Example

Lets consider a more or less real life example that makes use of most of the elements made available by the W3C for forms – an extended contact form. We would like to have the following fields:

First name and last name of the user (input fields), mandatory fields
Do you recommend this web site to others? (radio buttons)
Which of these web sites do you visit regularly? A List Apart, SitePoint, TechCrunch (checkboxes)
Select your areas of interest: HTML, CSS, JavaScript, ASP, PHP, Java (select box)
Your message (textarea), mandatory field
Submit and Reset button

The following sections provide copy & paste examples of the HTML for each type of form field.

Input Fields – first name, last name

<label for="firstname">First name: <em class="required">required</em></label>
<input type="text" name="firstname" class="text" id="firstname" />

<label for="lastname">Last name: <em class="required">required</em></label>
<input type="text" name="lastname" class="text" id="lastname" />

Radio Buttons – Do you recommend this web site?

<label>
    <input type="radio" name="recommend" value="yes" class="radio" />Yes
</label>
<label>
    <input type="radio" name="recommend" value="no" class="radio" />No
</label>

Checkboxes – Which of the following web sites do you visit regularly?

<label for="ala">
    <input type="checkbox" name="other-sites[]" value="ala" id="ala" />A List Apart
</label>
<label for="sp">
    <input type="checkbox" name="other-sites[]" value="sp" id="sp" />SitePoint
</label>
<label for="tc">
    <input type="checkbox" name="other-sites[]" value="tc" id="tc" />TechCrunch
</label>

Select Box – Select your areas of interest

<select name="interests[]" multiple="multiple" size="3">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="asp">ASP</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
</select>

Textarea – Your message

<label for="message">Your message: <em class="required">required</em></label>
<textarea rows="10" cols="20" name="message" id="message"></textarea>

Submit and Reset Buttons

<input type="submit" value="Send" class="submit" name="submit"/>
<input type="reset" value="Reset" class="reset" />

JavaScript bits

Radiobuttons

Setting radio buttons in JavaScript can be done like this:

radioButtonEl.checked = true;

Checkboxes

Checking check boxes using JavaScript works the same way as with radio buttons:

checkBoxEl.checked = true;

Demo

Putting these things together leads us to a bare bones demo, consisting only of the basic HTML structure. To put in more semantic meaning, fieldset has been used to group fields together and each fieldset was given a proper legend. To be able to apply proper line breaks in the visual representation and to subsequently “prettyfy” the form, some more elements will be needed. To wrap certain fields you could use divs or mark the fields up as an ordered list as Mark Rigby did in his article for A List Apart. With CSS, we then have the power to make something nice out of our pure markup example [tbd].

Resources

W3C Specification form Forms
Creating Accessible Forms (WebAIM)
Usable and Accessible Form Validation and Error Recovery (WebAIM)
Accessible forms: Guidelines, examples and accessible JavaScript tricks
Build Accessible Online Forms (SitePoint)
Fancy Form Design Using CSS (SitePoint)
Sensible Forms: A Form Usability Checklist (A List Apart)
Making Compact Forms More Accessible (A List Apart)
Prettier Accessible Forms (A List Apart)