Forms

Correct use

Compliance point(s):

Context for the form:

• Before including any entry fields for the form, provide a one line statement about what this form is used for in the following format:
  • Use this form to…
• This assures the user that the form they are filling out is the correct form

Buttons:

• When placing a Submit and Clear button at the end of the form, do not place them next to each other
• Their functions are the direct opposite of one another, and this could cause unwanted user error due to proximity of placement

Progress bar:

• When the form is spread over multiple screens/pages, provide a progress bar to let the user know at what stage in the completion process they are at

Correct use

Compliance point(s):

• Shorten label text to the essential minimum
• Use sentence case for example, "First name" not "First Name"
• Use labels at all times
  • Screen readers have trouble with forms if a label is not included for every input
  • To hide the label, use the .wb-inv class
• Use recognized standard abbreviations, and test abbreviations with non-expert users
• Make a statement rather than asking a question
  • For example, use "Child’s name" instead of "What is the name of the child?"
• Use unique label text on any given page to meet accessibility standards
• Place "(required)" at the end of the field label if information is required. Refer to: Form validation

Alignment option 1 design:

• Place the label above the input field. Further to Web form design: Filling in the blanks, this is the recommended layout
  • This layout allows users to capture both labels and input fields with a single eye movement. While this is the simplest of layouts, users can process the information ten times faster than if the information is left-aligned. This is shown in "Alignment option 3 − Left aligned". This solution uses more vertical space, but does not impact the user experience. If this does not suit your specific layout needs "Alignment option 2 − Right aligned" is also OK to use

Alignment option 2 design:

• Place the form objects side-by-side only if there is a need to reduce vertical space
  • Right align side-by-side labels to the form objects. This solution is preferred over left aligned labels. Eye tracking studies show that it creates a clear association between label and field. This reduces the number of fixations the user has (the eye jumping from spot to spot) by nearly half. As a result, the reduced eye moments and clear association reduce eye strain, and improve cognition. This translates to a 50% faster form completion rate

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use a colon at the end of an input field label
• Do not use abbreviations, unless absolutely necessary for space reasons
• Do not abbreviate a critical word. For example, use "Restricted Acct" not "Rstr Account"

Alignment option 3 design:

• Do not left-align a label from the input field, for the reasons cited above

Correct use

Compliance point(s):

• Use to create a simple text box that allows for the input of a single line of text
• Declare the type properly − to fully style the input field
• Wrap .input-group-btn around the buttons in input groups
  • This is required, as default browser styles cannot be overridden

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not mix form groups directly with input groups
  • Instead, nest the input group inside of the form group

Code

// Input field:
<input type="text" class="form-control" placeholder="(placeholder text)" />

// Input field with a Search button:
<label for="btngrp-search2" class="wb-inv">Search</label>
  <div class="input-group">
    <input type="text" class="form-control" id="btngrp-search2" placeholder="(placeholder text)" />
    <span class="input-group-btn">
     <button class="btn btn-default" type="button">Search</button>
    </span>
  </div>

Correct use

Compliance point(s):

• Use .form-control to create a free-form space that allows the user to type in content
• Change the rows="*" attribute to reflect the default number of rows to display
• Limit the number of rows to suit the amount of information that the recipient(s) desires

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use when users need to enter a specific, pre-defined answer

Code

<textarea class="form-control" rows="3"></textarea>

Correct use

Compliance point(s):

• Use .checkbox so users can choose one or more predefined set of options
• Use .checkbox-inline to make checkboxes appear on the same line

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use if there is a need for users to enter a detailed answer

Code

// Default checkboxes:
<div class="checkbox">
   < for="defaultCheck1" label><input id="defaultCheck1" type="checkbox" value="">Option 1</label>
</div>

// Inline checkboxes:
<div class="checkbox-inline">
   < for="inlineCheck1" label><input id="inlineCheck1" type="checkbox" value="">Option 1</label>
</div>

Correct use

Compliance point(s):

• Use .radio so users can only choose one predefined set of options
• Use .radio-inline to a make radio buttons appear on the same line

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use if there is a need for users to select more than one option

Code

// Radio buttons:
<div class="radio">
   < for="radio1"  label><input id="radio1" type="radio" name="optradio">Option 1</label>
</div>

// Inline radio buttons:
<div class="radio-inline">
   < for="inlineRadio1" label><input id="inlineRadio1" type="radio" name="optradio">Option 1</label>
</div>

Correct use

Compliance point(s):

• Use .form-control to create a selection list, from which the user can select a single option
• Add multiple to show multiple options at once
• Place the most likely select option as the default dropdown text

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use for non-related items

Code

// Dropdown list with single option view:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

// Dropdown list with multi-option view:
<select multiple="multiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>