Input field and form label
This content needs to be rewritten and expanded.
Related issue on GitHub #155 Topic Input fields and form labels.
The label
should tell the user what information is required; the placeholder
should describe how to fill it out.
For example:
<label for="search">Search for a product:</label>
<input type="text" id="search" placeholder="For example: apples, bread or milk">
<label for="search">Search for a product:</label>
<input type="text" id="search" placeholder="For example: apples, bread or milk" aria-describedby="search_description">
<span id="search_description">This store only carries fruit, grain products, and dairy.</span>
If you must hide a label or control from vision, use the CSS class .screen-reader-text and not display: none
or visibility: hidden
. Hiding labels is generally discouraged, but can be acceptable in some cases, such as single-field search forms.