Example Navigation

Index
Previous
Next
Validate Page

Example 3: Labeling select using encapsulation

Best Practice Rating: Poor

Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
label element content increases the active area for changing the selection
What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the label by reference technique.

Example Start

Select pizza crust

Example End

HTML Source Code

<label> Select pizza crust
  <select name="crust" >
    <option>Deep dish</option>
    <option>Thick</option>
    <option>Hand thrown</option>
    <option>Thin</option>
  </select>
</label>

CSS Source Code