Support : Guides

Form Design Considerations

Elements:

Text Fields
Text Areas
Buttons
Radio Buttons
Check Boxes
Selection Lists
Drop-down Menus

Aspects:

Prompting and Validating
Traversal/Navigation
Formatting

HTML Forms are an essential component of any website providing its primary user interface accepting data for client-side and server-side processing.

Elements

The HTML standard defines the Form elements and their attributes. The approved HTML specification should be considered as the web browser manufacturer's design requirements. This does not mean that the standard has been achieved, but rather the design direction to be ultimately achieved. For this reason it is crucial that website design be supportive to the technologies being used by its target audience. Web browser manufacturer make an attempt, as specified in the HTML standard, to enhance their product to be backward compatible; meaning that older standards are supported in new releases. However, emphasis is on "attempt". It is recommended that all websites be tested using the popular web browsers as well as on the popular computer platforms.

Fortunately with respect to HTML Forms, the earliest HTML standard addressed the primary Form elements and enhancements in this area occur mostly in underlying and supportive technologies; such as the internal browser objects and how they are referenced within scripting and plug-in subsystems.

The most substantial changes, 1998-2001, to the HTML standards address Cascading Style Sheets (CSS) and the Document Object Model (DOM). DOM significantly impacts usage of scripting and plug-in interfaces as to the method used to reference browser internal objects. Use of Javascript for validation and prompting, as discuss throughout this document, should also include use of server-side validation to handle browser that do not have Javascript enabled.

Now, let's discuss the primary HTML Form elements.

Text Fields

Text Fields display and receive text (alpha and numeric). Its size is fixed and the length of the data entered can be constrained; allowing it to either contain more or less data than is visible.

Here is an example of a Text Field with a visible size of "20"; however, it can receive up to "25" characters specified using the "maxlength" parameter:

HTML Source:
<form ...>
...
<input name="text2" type=text size=20 
maxlength=25 onFocus="window.status='Enter up to 25 characters';return true;">
...
</form>
NOTE: When you point and click your mouse in the field, the message "Enter up to 25 characters" is displayed in the lower left corner of your browser window. This method is used to provide prompts to the user for enhanced ease of use."

Javascript Events:

onFocus - when the field is clicked or tabbed into causing the insertion point to enter the field; referred to as the field obtaining focus.

onBlur - when another element obtains focus from this element; referred to as the field loosing focus or blur.

onchange - when the existing value is changed with a new value.

A form may contain multiple text fields and typically does. Each may be referenced within a Javascript function or code phrase by referring to the field by its name or id; i.e., window.document.formname.name.value.

Text Areas

A Text Area can display and receive text (alpha and numeric). It differs in format from a text field as it supports autoscrolling and accepts entry of multiple lines of text. Its width and height is specified in number of columns and rows. The text wraps physically and logically, meaning that when the user enters data the text has carriage returns inserted at the end of each line.

Here is an example of a Text Area:

Here is an example.

HTML Source:
<form ...>
...
<textarea rows="4" cols="20" name="textarea"
Here is an example.
</textarea>
...
</form>
The size of this text area is "20 columns" and "4 rows". Again, size is based on "em" characters.

Javascript Events:

onfocus - [see onfocus above]
onblur - [see onblur above]
onchange - [see onchange above]

A form may contain multiple text areas.

Buttons

Buttons are clicked by the user. A button results in an action being performed. Two such actions are predefined within browsers supporting Forms; "Reset" and "Submit." Other buttons may be defined and associated with other actions; such as, calling a Javascript function to update other information on the page, in which case an "onclick" event would be included in the definition.

HTML Source:
<form ...>
...
<input type="submit" value="Submit Form" name="submit">
<br>
<input type="reset" value="Reset Form" name="reset">
<br>
<input type="button" value="Button" name="button">
...
</form>
Type=Reset - restores the initial values defined for the form, and discarding any subsequently entered values

Type=Submit - invokes the submission action defined in the Form's "action" parameter. Two typical actions would be:

E-mail submission of the form's content

Submission of form's contents to a CGI program/script

Generic buttons can be defined with programmatic responses. This means when a button is clicked a preprogrammed action can be invoked. These actions can invoke a Javascript function or a CGI function. An example would be a calculation process using values entered in fields within the form and automated insertion of the result in another field within the form.

Javascript Events:

onclick - occurs when the button is clicked; allows for trapping submission by returning false, to allow pass-thru invocation return true.

A form may contain multiple buttons.

Radio Buttons

Radio Button are clicked as a selection item. Radio buttons are typically grouped logically so that when one button is clicked the other(s) unclick; referred to as mutually exclusive. Here is an example of a group of Radio Buttons. One is "ON", the other is "OFF". Click "OFF" and note "ON" becoming deselected. Then, click "ON"...

ON
OFF

Note: When you select one the other becomes deselected. Radio buttons are intended to be used in groups where only one option is to be selected (mutually exclusive). When multiple options are intended to be permitted for selection, use a series of "checkboxes"; see "Check Boxes" below.

HTML Source:
<form ...>
...
ON <input type="radio" name="on off" value="ON" checked><br>
OFF <input type="radio" name="on off" value="OFF">
...
</form>
Javascript Events:

onchange - [see onchange above]

A form may contain multiple Radio Buttons, and multiple groups of Radio Buttons.

Check Boxes

Check Boxes are clicked as a selection item. Here is an example of two Check Boxes. One is initially checked, the other is not:

Checked
Unchecked

Note that when you click one checkbox the other does not become unchecked as does occurs with Radio Buttons.

HTML Source:
<form ...>
...
Checked 
<input type="checkbox" name="check box checked" value="ON" checked>   <br>
Unchecked 
<input type="checkbox" name="check box unchecked" value="ON">
...
</form>
Javascript Events:

onchange - [see onchange above]

A form may contain multiple Check Boxes.

Selection Lists

Selection Lists are output only, meaning data is not entered, but rather one or more selection are performed. The size may be specified so that either all items are displayed or only some items with scrolling. Here is an example of a selection list:

HTML Source:
<form ...>
...
<select size="4" name="myselect">
<option>Black</option>
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Cyan</option>
<option>Magenta</option>
<option>Yellow</option>
<option>Orange</option>
<option>Purple</option>
</select>
...
</form>
Javascript Events:

onfocus - [see onfocus above]
onblur - [see onblur above]
onselect - when a selection is made the event is triggered.
onchange - [see onchange above]

A form may contain multiple selection lists.

Drop-down Menus

Drop-down Menus are output only. They contain a list of text. Only one item may be selected from a Pop-up Menu. Here is an example of a Pop-up Menu:

HTML Source Code:
<form ...>
...
<select name="menu">
<option>Alabama
<option>Alaska
<option>California
<option>Delaware
<option>Florida
<option>Georgia
<option>Hawaii
</select>
...
</form>
Javascript Events:

onfocus - [see onfocus above]
onblur - [see onblur above]
onselect - when a selection is made the event is triggered.

A form may contain multiple Drop-down Menus.

Javascript provides significant enhancement to Forms. Use of programmatic functions or methods can maximize "ease of use"; an important design aspect.

Prompting and Validating

Prompting

Each Form element should provide easy to understand instructional text describing the user action to be taken or the information to be entered as it relates to the Form element. Most Form elements support prompting. All Form elements support validation.

Prompting includes text adjacent to the element (label) as well as text displayed in the browser's status bar. The browser status bar is typically located in the bottom left corner of browser windows. Most browsers supporting Javascript also support setting the text to display in the status bar; however, this should not be relied upon as the sole prompting method.

Prompts in the status bar can be used when the mouse is over as element or when the insertion point is in the object (focus). Elements supporting insertion point focus typically support prompting; such as with text fields, text areas and others. Elements that are clicked or checked, generally support prompting when the cursor is passed over the element; such as radio buttons and check boxes.

Validating

Primary Types of Validation:

Required Values - Each element may be either optional or required

Valid Values - Each element may have a specific range and/or type

Dependent Values - Each element may be dependent on another field's, or group of fields' value(s)

When to Validate?

The preferred time to perform validation is while the user is interacting with the particular form element, as opposed to at the time of submission; however, that too should be performed. This is especially true for complex Forms requesting a significant amount of data. Ideally, the moment a user data entry error occurs it should be trapped, the user prompted with informational text pertaining to the error containing instructions for the corrective action. And, when possible, the insertion point should be positioned at the location where the user is to take the corrective action.

Validation Guidelines:

Forms should be designed for "ease of use" with validations performed at the earliest opportunity. It is recommended that validation occur at three points during the processing of a Form:

During Data Entry -
Each form element that can be validated prior to submission of the form should be. Validation may be triggered using either "onchange" or "onBlur" event handling that occurs when the user moves (TABs or clicks) to the next form element

At Submission -
When it is not possible, validation should be performed when the user submits the form, prior to the actual submission of the Form; be it E-mail submission, or submission to a CGI program for post-processing.

During Server-side Processing (CGI only) -
User input must be validated by the server-side process invoked by the form assuring predictable results where client-side scripting may be disabled or not supported. Ideally, when errors are detected, the Form should be redisplayed with a prominent informational error message that includes corrective action instructions, as well as, colorized highlighting, and/or anchored links, directing the user to the errors.

"Ease of Use" design considerations should include that the requirements of the user are reasonable, simple and straight forward. If a user is "stuck" completing a form, continually attempting to enter a valid value in a field with repeated failures, then the Form design is clearly not intuitive and should be redesigned.

For more information about Javascript event handlers see Javascript Event Handlers page. For more information about Javascript functions see Javascripts Methods page.

Traversal/Navigation

The TAB key should always move the user's insertion point to the next form text field element. Most browsers comply with this requirement; however, some text elements are not processed as would be expected. Form elements should be organized in logical groups, and ordered left to right, top to bottom. Check TAB key traversal to assure the tabbing order is not confusing.

Traversal within a form should also include positioning the cursor within a particular field based on user actions. This means that if a text element is part of a dependent group, and the fields immediately following the current field does not apply based on the value that has been entered, the TAB key should be intercepted and the next logical text element, based on the entered value, should direct the insertion point to the appropriate field; as opposed to the next field in normal TAB sequence. In other words, logical sequences should be recognized within the Form's text elements, as well as the physical sequence. This process can be performed using Javascript.

For information about dialogs, see the Javascript Dialog page.

Formatting

Forms should be formatted to present requests for information from the user in a cohesive display. The amount of time it requires for the user to enter the data should be evaluated against the amount of data to be entered. In other words if you are requesting a small amount of data, the format should not require the user to spend a lot of time completing the form.

Completion of the form should result in a completion page confirming successful completion of the form being submitted, or a results page that implies clearly that the submission resulted in the desired action. The user should not be left wondering whether or not the submission was processed successfully. This is especially important for ecommerce pages.

Use of highlighting using color, weight and size can be very useful in emphasizing important information and diminishing less important information. Be cautious about not using too many different colors. Keep in mind that not everyone reacts to various colors and color combinations the same. Too many colors can easily detract from the page's objective.