Text inputs
- Use helpful labels above the input. Supply additional explanations if necessary. Placeholders are rarely needed.
- The width of text and related inputs should, within reason, be indicative of the size of the expected content. For instance, a postal code input shouldn’t be as wide as an email input but also not exactly four or five characters wide. It’s a balance between communicating input type and having a tidy layout.
- A parent element is often the place to control width with max-width, instead of on each element.
- Don’t format input like output, set a pattern if you have to.
- Don’t represent output in input elements or style output like disabled inputs. Feel free to use the output element.
- Use proper input type so the users get more relevant virtual keyboards for the different inputs. This is especially useful for mobile devices and tablets, but it also improves accessibility for everyone.
<label class="form__label" for="input-text">Text input label</label>
<input class="form__control" id="input-text" type="text" />
<label class="form__label" for="input-disabled">Disabled</label>
<input class="form__control" id="input-disabled" type="text" disabled />Textarea
<label class="form__label" for="input-textarea">Text areas also need labels</label>
<textarea class="form__control" id="input-textarea"></textarea>Input types
Properly defined input type and mode attributes give users more relevant virtual keyboards for the different inputs. This is especially useful for mobile devices and tablets, but it also improves accessibility for everyone.
Read more about all the different input types.
<label class="form__label">
Text input
<input class="form__control" type="text" />
</label>
<label class="form__label">
Email input
<input class="form__control" type="email" />
</label>
<label class="form__label">
Phone input
<input class="form__control" type="tel" />
</label>
<label class="form__label">
Numeric input
<input class="form__control" type="text" inputmode="numeric" />
</label>