Section 3 Form Components
3.1 Component Types
Engles states the top 3 components to use on a form are:
- radio buttons
- checkboxes
- text boxes
for the following reasons:
- users are familiar with them
- they work on all screen sizes, including mobile
- they’re built into the HTML specification
- they’re accessible
- they’re simple to use
3.1.1 Input text field
3.1.1.1 Best Practices:
3.1.1.1.1 Use field length as an affordance
Match the size of the text input box to the length of the response the user should provide.
3.1.1.1.2 User should be able to judge the state of the field.
Field focus should be a visual cue – such as changing the color of the border or background of the selected input field, or showing the cursor in the input field. Think of it as a hint you leave users regarding where they are.
3.1.1.1.3 Say something here like Use appropriate ddd and ssss
Specifying an appropriate type attribute (e.g. type=“tel” for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
3.1.1.2 Anatomy of a text box
An input text field consists of the following parts:
- Container/Border
- Label
- Placeholder/Input text
- Trailing icon (Optional element)
- Helper text/Error text (Optional element)
- Leading icon (Optional element)
3.1.1.2.1 Container
Say something about the container
3.1.1.2.2 Label
Top line label improves speed of completion (easy to scan), label to the left improves accuracy. Use sentence case.
3.1.1.2.3 Input text or Placeholder text
Use placeholder text for instructions only e.g. Please select… or DD/MM/YYYY. There should be a very clear distinction between the placeholder itself and the value typed by the respondent. If there is not, the respondent might think that the fields with placeholders are already filled fields.
3.1.1.2.4 Icons
Icons can be effective labels when they are easy to decipher, either because their meaning is clear or because they are familiar, such as the text formatting icons used on most text editor toolbars. When the meaning is not clear, icons are best paired with descriptive text. The icons are easy to visually scan and recognize, and the text provides additional clarity about the purpose of the control. https://www.webstyleguide.com/7-interface-design.html
3.1.1.2.5 Help text
Position the help text between the label and the input field. Don’t use headings, labels or placeholder text for help. text.4 Don’t repeat the label or explain the obvious (eg fill in your first name).
3.1.3 Check Boxes
3.1.4 Dropdowns
The better solution is to use a text box with autosuggest.
3.1.5 Links
Links should open on a new window to preserve cursor position, and flow of form input Should reflect state (visited, active, focus)