Input
Inputs are used to collect user data. There are several other input types which have specific use cases.
Key Points
- Input fields should always have a supporting label and should be short, direct and written in sentence case.
- Input fields are the same height as buttons and icon buttons so they can be used inline
- It is best practice to you use the correct input type for the data you are trying to collect
- Help users understand what they should enter by making text inputs the right size for the content they’re intended for
- Use this input type along with other form guidelines
Usage
Users need reassurance if they’re giving us sensitive data. A clear, well-structured form can make it much easier for them to give us the information.
<h1>Contact details</h1>
<label for="email-address">Your email address</label>
<p id="helper-text">We'll only use this to reply to your message</p>
<input aria-describedby="helper-text" id="email-address" name="email-address" type="text">
A code example of an input field.
Don't use Placeholder Text
Do not use placeholder text in place of a label or for hints or examples, as:
- It vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
- Not all screen readers read it out
Don’t use Tooltips
Tooltips should not be used within forms as:
- They hide important information from the user
- They may be easily overlooked on the page
- They may obscure parts of the form or the page
They raise accessibility issues:
- Adds to cognitive load when completing a form
- Tooltip and its content can be lost on 200%-300% magnification
- Tooltip contents could add complexity and comprehension overload for screen readers
- There will be substantial interactive travel, causing fatigue to users with visual and motor impairments
Instead, surface the content from a tooltip within the helper text.
Sizing
The width of text input fields should match the amount of data we expect.
Layout & Grouping
Forms should be a single column in most cases. Where there are related columns like Start date and End date, you should put them inline.
Group related fields together in a fieldset with a legend or heading, depending on the content hierarchy.
It’s best to start with easier fields and build up to the more difficult ones.
Behaviour
Users can enter an input field by clicking or tabbing into the input. Depending on the input type, the user will be presented with the appropriate keyboard on devices with dynamic keyboards.
Number inputs only accept numerical data.
Other HTML Input Types
- Email - Looks like a normal text input but has validation parameters. Devices with dynamic keyboards will display the relevant keyboard.
- Number - Although it looks like a text field this input only allows floating point numbers, and usually provides buttons in the form of native controls to increase and decrease the value. Touch devices with dynamic keyboards usually launch the numeric keyboard.
- Url - Looks like a normal text input but has validation parameters. Devices with dynamic keyboards will display the relevant keyboard.
- Password - A single-line text field whose value is obscured. This input type will alert the user if the site is not secure.
- Telephone - Most touch devices will display a numeric keypad when type="tel" is used, meaning this type is useful whenever a numeric keypad is useful. This input type doesn't just have to be used for telephone numbers.
There are a number of other input types that are not covered here but can be applied. If you have a field that captures specific data it is always best to check that you are using the correct input type.