Form Elements

A look-up field is a widget that allows the user to select from a table list as opposed to a drop-down or list box.

• Composed of a field, with a [magnifying glass] icon to the right.
• The [magnifying glass] icon, when clicked, opens a dialog that shows a data table for selection.
• Once selection has been made and submitted, it populates the text field on the form.

• Bullets  - Use bulleted list to present items of equal status or value
• Numbered – Use numbered list if the particular order is important

Group related information together in a <fieldset> for easier page scanning and digestion of information.  This is useful when there is more then one defined grouping on a page.

• Fieldsets should be the basic building block of the form.
• 'Chunk' fields into groups of X to Y and assign them to a fieldset.
• Use meaningful fieldset legends.
• Buttons should be outside the fieldset.

Labels

A field label is a descriptive label of a field in a form.

• Weight - Bold
• Color - Black
• Capitalization - Use sentence case (i.e. 'This is a long label'), as opposed to title case (i.e. 'This Is A Long Label')
• Wrapping - Keep in mind that long labels may wrap.  Make sure that the first line is aligned top, inline with the input field

• Use <label> tags (for accessibility and larger ‘clicking’ area)
• Colons - If colons are already being used, continue to use them for the consistency.  But if it’s a new application, it’s preferred that colons are not used.


Label Additional Information

• Not required.  Only use if needed
• Alignment: Left aligned to input field.
• Color: Grey
• Weight: Normal
• Size: Smaller than the label.

Required Markers

See Validation below to learn more about required markers

Check boxes

• Default - None of the checkboxes should be selected as a default.
• When appropriate, provide a selection for “All/ None”.
• Stand-alone – used for a single option that the user can turn on or off (e.g. Terms and Conditions, or Statement Agreements).

NOTE: Radio button and checkboxes should be horizontally aligned if they are short (i.e. one or two options).  If they have many options, each option will be broken out onto a new line and vertically aligned (delineated by a break).

Drop-Down Lists (or List Boxes) and Combo Boxes

• Default selection should show first choice in the list, or blank.
• Width – If not automatic, adjust to reveal the longest selection.
• If applicable, place the most important, or commonly selected, items at the top of the list.  If there are many, differentiate this group from the rest of the list.
• Only capitalize the first letter of the word unless the option contains another word that has to be capitalized.
• If there are few selections (3 or less), consider using radio buttons because they make all options permanently visible so that users can easily consider them.
NOTE: This pertains to drop-down lists that are located in a form, and not the ones that dynamically update a data table (e.g. filter), due to lack of real estate.

List Box - Multiple Select

• Width – If not automatic, adjust to reveal the longest selection.
• Height - The height of the box should display a sufficient number of selections.  It should provide the user with enough of a visual clue to help identify what the question pertains to, and how it should be answered.

Radio Buttons

Used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice.

• Default - One button should always be selected as default.  Most commonly the first in the list is selected, unless logic doesn’t
• Sub-Labeling – The sub-labels associated with each button are placed to its right, separated by a space.
• If applicable, offer a neutral option to click is better than requiring the implicit at of not selecting from the list, such as a “None” selection.
• Alignment – Align the buttons vertically instead of horizontally, which is harder to read and localize.
• List – List the choices in logical order
• Combine Text Field - If there is a text field associated with a radio button (such as “Other), make sure that the text field is aligned left with the specific radio button label. IMAGE
• Never use a single radio button
• Advantage – User can see list of choices.

Text Fields

• Length – Field lengths should provide meaning affordance that helps users answer questions effectively.  If there are fields in a group that are very close in character size (max allotted), it is appropriate to set them up to be the same width.  Worse case scenarios can be excluded.  Hence, there isn’t a need to adjust to the largest field size in order to make them similar.
• Visibility – Make sure that an adequate amount of the data inputted is visible.  Adjust field length if necessary.

Text Areas

• Set at adequate size for proper readibility

Validation Message Placeholder

• The error messages will appear inline with field it is associated with.  Make sure there is enough room for proper readibility.

Provide validation as early as possible.

Reasons to display

• The user has entered something the system can’t accept. Tell the user what happened, how to fix it, and how to move on.
• Something bad has happened to the system, that inhibits progress.  This type of message should be very apologetic and should give the user some alternative way, which can include contacting.
• Provide actionable solutions that enable users to resolve errors quickly
• Top-level messages should indicate an error has occurred, and that it needs to be resolved before continuing.
• Visual Indication - Input fields responsible for an error are clearly marked (with a double visual emphasis) by:
• Updating the input field border to red
• Updating the label to red (along with the required asterisk, if it applies)
• Display icon to the right of the input field
• Display that there’s an error message below the input fields in red
• Display inline error messages below the input fields in red
• Communicate clearly that the errors need to be resolved in order to continue.
• Tone – Don’t use phrasing that blames the user or implies user error.

Required Markers

• Required fields will be denoted by an asterisk.
• Each asterisk will appear after the field label, separated by a space.
• All asterisks will align with each other vertically to help create good visual lines that will help the user see what is required with a quick glance.

Three Types of Validation

1. Field Level Validation

   • Only validate (or format) the input once the answer has been provided
   • Display error message at the field level
   • The field label and the border of the input field changes to red.
   • The 'triangle/warning' icon appears to the right of the input field, which will aid those that suffer from color blindness.

2. Form Level Validation

   Form validation messages, as opposed to field validation, are built by the server after a submission of the form. When an error occurs, a section labeled "Attention!" appears above the form. This is to create a visual change - "take up space" - which will compensate for those suffering from color blindness (color changes just aren't enough).  The error messages are listed in the order the fields are displayed.  The actual field labels have to be used as visual identification.

   • Display a top-level message right above the form
   • Display error message at the field level
   • If an error occurs, the submit button on the page becomes disabled, until the error has been remedied

3. Server Side Validation

   • Display a top-level message right above the form
   • Indicate reason in top-level message

• Button color should pop off the page
• Button color should mirror the page heading so that there is a clear start and close of each page. (For example: when the header is orange, the button color palette will be orange).
• The primary action associated with a form (most commonly “submit” or “save”) needs to carry a stronger visual weight (in the example above bright color, bold font, background color, etc.) than the other form elements and should vertically align with the input fields. This illuminates a path for users and guides them to completion of the form.
• When a form has multiple actions such as “Continue” and “Go Back” it may be wise to reduce the visual weight of the secondary action. This minimizes the risk for potential errors and further directs users to completion.
• Application: buttons are right aligned, with the primary action on the right
• Application: option to implement primary action class that causes the button to stand out even more
• Buttons should be placed outside of fieldsets

• Primary Button – The primary action for the form. This usually involves updating the database in some manner.  It is visually highlighted by color (currently selected to match the heading of the page – yellow). 
NOTE: Wizard buttons are treated as equal actions, so both “considered” primary buttons.
• Secondary Button – An accent complimentary to the primary button. Visual prominence is reduced (grey in color).
• Value – Contextual wording is preferred and clearer.  Indicate its action.
• Cursor – Set to pointer.