HSE banner

Forms

HTML Forms are an integral part of the HSE Web standard.

A number of styles are made available to facilitate clean presentation of forms to the browswer. There are also a number of guidelines to creating accessible forms.

Pages built using the HSE Web standard have certain built-in functions that are described on the Advanced Features page.

[back to top]

Presenting forms

The HSE Web standard supports 2 formats for HTML based fo -the default form style, and an hse specific "pretty" style.

The default form style

The default form style is defined with no class information in the form definition:

<form action="forms.htm" method="post" id="example1">

Subsequent form elements are defined below. Notice the use of label tags for each form element - these are necessary to make your form properly accessible, but also confer usability benefits throughout.

Element
Description
Text fields

<label for="idtext1">Text field:</label><input type="text" name="text1" value="Text field 1" id="idtext1" />

By default, the contents of text boxes and textareas will be cleared on entering the field. If you wish to override this function then add "class='noclear'" to the input box definition.

Text areas


<label for="idtextarea1">Text area</label><br />
<textarea name="textarea1" id="idtextarea1" cols="40" rows="5">Text areas require rows and columns attributes in order to be valid.</textarea>
Checkboxes

<input type="checkbox" name="checkbox1" value="1" id="idcheckbox1" checked="checked" /><label for="idcheckbox1">Check!</label>
Radio buttons



<input type="radio" name="radio1" value="1" id="idradio1Value1"/><label for="idradio1Value1">Value 1</label><br />
<input type="radio" name="radio1" value="2" id="idradio1Value2"/><label for="idradio1Value2">Value 2</label><br />
<input type="radio" name="radio1" value="3" id="idradio1Value3" checked="checked"/><label for="idradio1Value3">Value 3</label>
Dropdown menus

<label for="idselect1">Dropdown menu:</label>
<select name="select1" id="idselect1">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
<option>Select 4</option>
</select>
Buttons

<input type="button" name="button1" value="Press!" />
Submit/Reset

<input type="submit" name="submit1" value="Submit" />
<input type="reset" name="reset1" value="Reset" />

The "pretty" form style

The "pretty" form style is defined with class="formpretty" in the form definition:

<form action="forms.htm" class="formpretty" method="post" id="example2">

Subsequent form elements are defined below. Notice the use of label tags for each form element - these are necessary to make your form properly accessible, but also confer usability benefits throughout. In Javascript enabled browsers the form elements are automatically scanned for "minor" elements (checkboxes, radio buttons etc.) and appropriate classes are applied. The effect of this in the HSE web standard is to remove unsightly borders etc. For more information see the advanced features page.

Element
Description
Text fields

<label for="idtext1">Text field:</label><input type="text" name="text1" value="Text field 1" id="idtext1" />
Text areas


<label for="idtextarea1">Text area</label><br />
<textarea name="textarea1" id="idtextarea1" cols="40" rows="5">Text areas require rows and columns attributes in order to be valid.</textarea>
Checkboxes

<input type="checkbox" name="checkbox1" value="1" id="idcheckbox1" checked="checked" /><label for="idcheckbox1">Check!</label>
Radio buttons



<input type="radio" name="radio1" value="1" id="idradio1Value1"/><label for="idradio1Value1">Value 1</label><br />
<input type="radio" name="radio1" value="2" id="idradio1Value2"/><label for="idradio1Value2">Value 2</label><br />
<input type="radio" name="radio1" value="3" id="idradio1Value3" checked="checked"/><label for="idradio1Value3">Value 3</label>
Dropdown menus

<label for="idselect1">Dropdown menu:</label>
<select name="select1" id="idselect1">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
<option>Select 4</option>
</select>
Buttons

<input type="button" name="button1" value="Press!" />
Submit/Reset

<input type="submit" name="submit1" value="Submit" />
<input type="reset" name="reset1" value="Reset" />

[back to top]

Accessibility

There are a number of things that need to be done in order to gain AAA Accessibility.

General guidelines are:

Where possible (and it is not always possible), avoid using a table to layout your forms.

Form elements that contain text should always contain a default value, preferably describing the content required in the field.


  • Where text labels are used that relate to a form field, the html tag <label for="fieldname"> should be used. Labels are especially important for checkboxes, where no text association is otherwise possible.
    e.g.




    <h3><label for="text5">Email Address</label></h3><br />
    <input type="text" name="text5" value="Enter your email address" />
    <input type="checkbox" checked="checked" name="checkbox5" value="yes"/>
    <label for="checkbox5">Send me more emails</label><br />
  • Default values are important for accessibility. For non-manual fields such as dropdown lists and radio buttons, default values should always be provided. In a selection list, this may be a short description of the choices available.
    e.g.


    <h3><label for="select2">Choose your fruit:</label></h3><select name="select2">
    <option selected="selected">Choose your fruit:</option>
    <option>Apples</option>
    <option>Oranges</option>
    <option>Pears</option>
    </select>




    <h3><label for="radio4">Choose your veg:</label></h3>
    <input type="radio" name="radio4" value="parsnip" />
    Parsnip<br />
    <input type="radio" name="radio4" value="potato" />
    Potato<br />
    <input type="radio" name="radio4" value="pumpkin" checked="checked"/>
    Pumpkin<br />
  • If your form is large, and contains fields for qualitatively different information, then the <fieldset> and <legend> tags should be used. These enable like fields to be grouped and described collectively.
    Personal Information


    5-a-day preferences






    <fieldset>
    <legend>Personal Information</legend>
    <h3><label for="text5">Email Address</label></h3>
    <input type="text" name="text5" value="Enter email address" /><br />
    <label for="checkbox5">Send me more emails</label>
    <input type="checkbox" checked="checked" name="checkbox5" value="yes"/>
    </fieldset>
    <fieldset>
    <legend>5-a-day preferences</legend>
    <h3><label for="radio4">Choose your veg:</label></h3>
    <input type="radio" name="radio4" value="parsnip" />Parsnip<br />
    <input type="radio" name="radio4" value="potato" />Potato<br />
    <input type="radio" name="radio4" value="pumpkin" checked="checked"/>Pumpkin<br />
    <h3><label for="select2">Choose your fruit:</label></h3>
    <select name="select2">
    <option selected="selected">Choose your fruit:</option>
    <option>Apples</option>
    <option>Oranges</option>
    <option>Pears</option>
    </select>
    </fieldset>
  • XHTML and validation Under XHTML Strict a form field cannot be a direct child of form. Form fields must be nested under any of the following: fieldset; h1; h2; h3; p.


Using form elements in the left column

<form class="formpretty" action="forms.htm" method="post">
<input type="text" name="formsmall" value="search?" />
<input type="submit" value="Go" name="go2" />
</form>