Journey

Text input fields are the primary work horse for most interactive forms on the web. They collect open text data from users. Different types of inputs allow for different formats of data by default.

Anatomy #

Label #

Always provide labels for form fields. In some rare circumstances (like a search field perhaps), you can then visually hide the label so that it's read by accessibility tools but not shown in the interface. Labels give a concise description of what data is expected within the text input field.

Guidance #

Guidance can provide optional, additional instructions for what to put in a text input. For instance, a password field may have guidance about the password rules. Many basic fields may not need additional guidance if the label is clear.

Field #

The field is the actual portion of the element where the user can enter data. Try to match the length of the field to the length of the expected data. For instance, don’t provide a very wide field for data (like a ZIP code) that’s only a few characters long.

Icon #

Some text inputs may have optional icons appear inside to the left of the placeholder or value. Most often, these icons are used to convey the type of data expected in the field, for example an email or phone icon.

Status #

Some fields, after certain actions have been taken, may show a status message beneath the field. For instance, when submitting a form with required fields that are empty, there may be an error message that appears. A user name field, when creating a new account, may show a success message beneath when the user leaves the field if the user name is available. Or an email field might show an error when the user leaves the field if the email is not in a correct format.

Attributes #

ID #

The id attribute relates a field to a corresponding label to make it more accessible, providing context for what data is expected in the field. The corresponding label should have a for attribute with the same value as the ID.

<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">

The id can also be used to provide an anchored link to the item or tie behaviors to it with Javascript. The ID must be unique within the document.

Name #

Consider the name attribute to be the name of a variable that will inherit whatever value the user inputs to a field. The name is sent alongside the value when a form is submitted. If no name is provided, then the value for that form field is also not sent.

Type #

The input field type is set in the code and is not immediately visible in the interface. However on some devices, the type can determine what kind of keyboard is shown as well as providing additional text input restrictions. The input types that can capture text include:

• date: A year, month, and day for a specific date
• datetime-local: Date and time, without a time zone specified
• email: For email addresses. On some devices, this will bring up a keyboard that contains the @ symbol and other common email characters.
• month: A month and year, no day. Not commonly used.
• number: A numeric value. Provides some default validation. On some devices, this will bring up the numerical keyboard or keypad by default.
• password: A single line of text that is hidden by default.
• search: A single line of text intended to start a search query.
• tel: A phone number. On some devices, this will display a telephone keypad when active.
• text: A single line of text. The default type for an <input> if none is specified.
• time: A time value with no associated time zone.
• url: A URL value. On some devices, this will display a text keyboard that includes / . and .com instead of the space bar.
• week: A week and year, no day. Not commonly used.

Value #

The value of a form field is the actual content the user may enter to submit through the form. When entered, actual values will replace any placeholder text that was shown.

Input fields may have prefilled, default values, but that’s only recommended when there are smart defaults to save the user time. For cases where you don’t want the user to be able to change or edit data, it’s better to use a field like a <select> element, radio button, or checkbox.

Autocapitalize #

With this attribute, you can control the default capitalization style for a field, whether that’s capitalizing the beginning of every sentence, every word, ever character, or nothing at all. This can be useful for turning off automatic capitalization for fields like email, search, or usernames. Or it can be useful for turning on capitalization for a field expecting a serial number with all capital letters.

The possible attributes are:

• off or none: No letters will be capitalized automatically.
• on or sentences: The first letter of any sentence will be capitalized.
• words: The first letter of every word will be capitalized. (Useful for names, addresses, cities, etc.)
• characters: Every character will be capitalized.

Autocomplete #

Autocomplete can save users time in filling out forms, but for some fields can also become more of a hindrance than a help. Consider setting it to off for fields like search or other fields that expect new or different information every time they are used. You can also specify from a list of space-separated tokens like shipping street-address to inform the browser what information to autocomplete from.

Autocorrect #

The autocorrect attribute can be set to on or off to enable or disable software-based autocorrection. It is enabled by default, but disabled in password, email, and url fields. It may be worth turning off for fields that can contain proper names (name, street address, city, etc.) or where you may expect data that is not in the dictionary.

Maxlength #

Minlength #

Pattern #

Placeholder #

Placeholder text appears inside the field and can be used to provide example data that won’t be submitted. Avoid using placeholders instead of labels or guidance as placeholders only appear until the user enters data.

Required #

Design consideration #

Accessibility #