Account services

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.

In-form errors

If you assign the class "error" to a data entry field, the CSS will show it marked in red.

Example

See System messages to the user on how to tell the user there are errors in the form.