Best practices for forms
Webforms are so varied that any specification will be inadequate and constraining in some cases. Therefore we'll just provide some hints to ensure some uniformity.
Layout with a table?
Tables should be used for tabular data and not for layout. However, forms can be seen as a kind of tabular data. Most forms are two columns; a label and an input field. The webdesigner community disagrees on the approach. At Eionet we're agnostic. Use a table to set up your form if you prefer.
Labels
There are two ways to use the <label> element. For the question leading up to the input field, and for answers to radio buttons and check boxes. In the first case, add the class="question" to the <label> and it will show in bold.
Flagging required fields
Add the class "required" to the label, and a little star
(
)
will show to the right of the label to indicate it is mandatory.
If there is only one field to fill in, then you should not
mark it "required". It is already obvious from the context.
Title attribute
The last few versions of the major screen readers all support the title attribute on form controls. So when on-screen prompting information is not available or is dispersed, i.e., when the label element won't work, use the title attribute in the input element (or select menu, etc.) to indicate the purpose of the control. See Using the title attribute to identify form controls when the label element cannot be used.
- User agents will display a tool tip when the mouse hovers above an input element containing a title attribute.
- If no label is available, JAWS and Window-Eyes speak the title attribute when the form control receives focus
In-form errors
If you assign the class "error" to a data entry field, the CSS will show it marked in red.
Example
- Form for joining a community - Shows the error messages above the form.
- Form for joining a community - Shows the error messages under the fields.
- Create or edit obligation - Uses JavaScript validation
See System messages to the user on how to tell the user there are errors in the form.
