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" />

There is also the option of wrapping the input field with the label element. However, it is discouraged to do so as it causes issues with some screenreaders.

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>

Missing here: also every select box must have a label, as with every other form element (apart from submit buttons).

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" />

Unless you absolutely have to use the button element to create a submit button (which would allow you to put additional HTML within the opening and closing button tags, it is recommended to use the input element for creating submit buttons.

Fieldsets

User a fieldset to wrap form fields that belong together. Use legend to describe the content of the form fields inside the fieldset. Keep the legend short as it will get read out by a screenreader for every form field in the fieldset. Instead of having explanatory text in the legend, put it in an h2 or h3 outside of the form. This will then get read out by a screenreader as opposed to inside the form, where non-form elements will not get read out by a screenreader.

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

About the author

This website is the personal web appearance of Klaus Komenda, an Austrian web developer. The about section offers more info about me and this site.

Categories

Copyright © 2000-2014 Klaus Komenda