A user input element that allows for the exchange of information between the user and a form owner.
A text input or text area should be used when:
The length of the text input provides a hint to users as to how much text to write. Don't require users to write paragraphs of text into a single-line input, and use a shorter input to reinforce the length of a postal code.
Only show error validation after a user has finished interacting with an input. For example, after the field loses focus, the user presses Enter on the keyboard, or clicks a Submit button.
Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for a phone number and not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields would be broken into segments that are not meaningful.
The correct placement for an input's label is above the input and left-aligned.
Display input labels that are clear and concise, although on smaller breakpoints labels can wrap.
Input labels should default to Title Case so long as the label is short, or when the input itself also uses Title Case. Use sentence case if the label reads like a complete sentence.
Inputs that are optional must be labeled as optional. The recommended method is to append " (Optional)" to the end of the input label.
Do not use an asterisk * to indicate required inputs because screen readers are inconsistent in the way that they read them.
An error prevention pattern that's used to offer clues about the data format expected within an input.
Avoid using placeholder text that serves as an input label or instruction. If placeholder text is no longer visible after users click into a field, users will no longer have that text available when they need to review their entries for accuracy. People who have cognitive or visual disabilities have additional problems with placeholder text.
Contextual help may appear immediately beneath an input as a line of text or a tooltip.
Provides instruction so that users can complete a form without error.
Try not to exceed 8-10 words.
Remove all non-required inputs in order to increase the completion rate of forms.
Alternatively, a form can reveal additional inputs when a prerequisite input is completed.
Use HTML 5 standards, so that mobile devices can benefit from improved features, for the following inputs:
A form validation checks user input against success criteria before passing the data to the server.
If there's at least one error, then a notification is displayed at top of page, below the page title, and it includes a list of anchor links to input-level errors. See Notifications for more details.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
The A11Y Style Guide has excellent examples of markup for inputs.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for forms from WAI-ARIA authoring practices 1.1.
You may refer to this example of a form landmark from WAI-ARIA practices 1.1.
You may also refer to these tutorials for forms from Web Accessibility Tutorials.
you may also refer to this article about creating accessible forms from WebAIM.