# Indicating required form controls using `label` or `legend`

ID: H90

Technology: html

Type: Technique

## When to Use

HTML controls that use external labels.

## Description

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the `label` element, or the `legend` for groups of controls associated via `fieldset`. If a symbol is used, the user is advised of its meaning before the first use.

## Examples

### Using text to indicate required state

The text field in the example below has the explicit label of "First name (required):". The `label` element's `for` attribute matches the `id` attribute of the `input` element and the `label` text indicates that the control is required.

    <label for="firstname">First name (required):</label>
    <input id="firstname" name="firstname" type="text">

Some authors abbreviate "required" to "req.". There is anecdotal evidence that suggests this abbreviation is confusing.

### Using an asterisk to indicate required state

The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a `abbr` element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

#### The CSS

    .req {font-size: 150%}

#### The HTML

    <p>Required fields are marked with an asterisk
       (<abbr class="req" title="required">*</abbr>).</p>
    <form action="https://example.com" method="post">
      <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
      <input id="firstname" name="firstname" type="text">
      ...
    </form>

### Using an image to indicate required state

The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

    <p><img alt="required" src="req_img.gif"> indicates that the information is required</p>
    <form action="https://www.example.com" method="post">
      <label for="firstname">First name <img alt="required" src="req_img.gif">:</label>
      <input id="firstname" name="firstname" type="text">
      ...
    </form>

### Indicating required state for groups of radio buttons or check box controls

Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the `legend` element instead of the `label` element.

    <fieldset>
      <legend>I am interested in the following (Required):</legend>
      <div>
        <input id="photo" name="interests" type="checkbox" value="ph">
        <label for="photo">Photography</label>
      </div>
      <div>
        <input checked id="watercol" name="interests" type="checkbox" value="wa">
        <label for="watercol">Watercolor</label>
      </div>
      <div>
        <input checked id="acrylic" name="interests" type="checkbox" value="ac">
        <label for="acrylic">Acrylic</label>
      </div>
      ...
    </fieldset>

## Tests

### Procedure

1. For each required form control, check that the required status is indicated in the form control's `label` or `legend`.
2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.

### Expected Results

- All checks above are true.

## Related Techniques

- H44
- H65
- H71

## Resources

- HTML - `label` element
- HTML - `legend` element