# ✎ Technique: Input labels

**Source**: https://accessibility.huit.harvard.edu/technique-input-labels
**Parent**: https://accessibility.huit.harvard.edu/structure-developers

Descriptive labels help users understand the purpose of a form control. Labels should be associated with their controls so that when the input is focused, the label is announced by screen readers.

## Examples

### ✓ An explicit label

The HTML `label` element can be used to provide a label or "accessible name" for an interactive form element. However, it does not work on its own: You have to code a relationship between the `label` and the `input`. An "explicit" label is achieved by using the `for` attribute to associate the label with the input's `id`, like so:

`<label for="firstname">Your first name</label>`\
`<input id="firstname" type="text" />`

Now, when the screen-reader user focuses the input, it will announce the label's text content, "your first name" (as well as information about the input’s type and state). Note that the value of the label’s `for` attribute must match the `id` of the form field that it refers to.

### ✓ An implicit label

Another option, which might better suit your style of markup, is to use "implicit" labeling. The same result is achieved without an explicit `for`relationship explicitly but instead by placing the form field *inside* its `label` element:

`<label>Your first name`\
`<input id="firstname" type="text" />`\
`</label>`

Note that in both cases, clicking the label will result in the `input` element being focused, ready to receive input.

### ✗ Bad example

HTML5 provides the `placeholder` attribute for showing hints about what to enter into the field. In this case, a suitable placeholder might be "Example: John". It is *not* appropriate to use the placeholder as the input's sole label because:

- It is not as robust or as well supported in screen readers
- The placeholder disappears on focus, potentially confusing sighted keyboard users
- The default display color of the placeholder text may have insufficient contrast against the form field’s background color.

`<!-- Don't do this without also giving the field a label: -->`\
`<input id="firstname" type="text" placeholder="your first name" />`

See also:

- [Techniques](https://accessibility.huit.harvard.edu/page-categories/techniques)
- [Inputs](https://accessibility.huit.harvard.edu/accessibility-topics/inputs)
- [Screen reader](https://accessibility.huit.harvard.edu/access-technologies/screen-reader)
- [Custom widgets and controls ✎](https://accessibility.huit.harvard.edu/content/custom-widgets-and-controls)
- [Provide name, role, and value information ✎](https://accessibility.huit.harvard.edu/content/provide-name-role-and-value-information)
- [Structure - Developers ✎](https://accessibility.huit.harvard.edu/content/structure-developers)
- [Provide accessible labels and instructions ✎](https://accessibility.huit.harvard.edu/content/provide-accessible-labels-and-instructions)
- [Robust](https://accessibility.huit.harvard.edu/principles/robust)
- [Understandable](https://accessibility.huit.harvard.edu/principles/understandable)
- [Blind](https://accessibility.huit.harvard.edu/disabilities/blind)
- [Forms](https://accessibility.huit.harvard.edu/technologies/forms)
- [HTML](https://accessibility.huit.harvard.edu/web-technologies/html)