Using LABEL Element for Labeling Form Controls

Input Element: Text Box

Example Start

HTML Source Code


<form action="">
  <!--
      Text box input controls with LABEL markup using the FOR and ID attributes
  -->
  
  <p class="text" >
    <label for="first">First Name</label>
    <input type="text" name="first" id="first" size="20" value=""/>
  </p>

  <p class="text" >
    <label for="last">Last Name</label>
    <input type="text" name="last" id="last" size="30" value=""/>
  </p>
  
</form>

Input Element: Password

Example Start

HTML Source Code


<form action="">
  <!--
      Password controls with LABEL markup using the FOR and ID attributes
   -->
  
  <p class="text" >
    <label for="password1">
      Password
      <img
         src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png"
         alt="required"
      />
    </label>
    <input type="password" name="password1" id="password1" size="20" value=""/>
  </p>
  
  <p class="text" >
    <label for="password2">
      Confirm Password
      <img
        src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png"
        alt="required"
      />
    </label>
    <input type="password" name="password2" id="password2" size="20" value=""/>
  </p>
  
</form>

Input Element: Checkbox

Example Start

Pizza Topping Options

HTML Source Code


<form action="">
  <!--
      Checkbox input control with LABEL markup using the FOR and ID attributes.  Fieldset and Legend give the group of controls a label
   -->
  
  <fieldset class="checkbox">
  
    <legend>Pizza Topping Options</legend>
    
    <ul style="checkbox">
      <li>
        <input type="checkbox" name="topping0" id="topping0" value="Pepperoni"/>
        <label for="topping0">Pepperoni</label>
      </li>
      <li>
        <input type="checkbox" name="topping1" id="topping1" value="Mushrooms"/>
        <label for="topping1">Mushrooms</label>
      </li>
      <li>
        <input type="checkbox" name="topping2" id="topping2" value="Extra Cheese"/>
        <label for="topping2">Extra Cheese</label>
      </li>
    </ul>
    
  </fieldset>
</form>

Input Element: Radio Button

Example Start

Pizza Crust Options

HTML Source Code


<form action="">
  <!--
      Radio input control with LABEL markup using the FOR and ID attributes.  Fieldset and Legend give the group of controls a label
   -->
  
  <fieldset class="radio">
  
    <legend>Pizza Crust Options</legend>
    
    <ul>
      <li>
        <input type="radio" name="radio1" id="radio10" value="0"/>
        <label for="radio10">Thick</label>
      </li>
      <li>
        <input type="radio" name="radio1" id="radio11" value="1"/>
        <label for="radio11">Regular</label>
      </li>    
      <li>
        <input type="radio" name="radio1" id="radio12" value="2"/>
        <label for="radio12">Classic thin</label>
      </li>
    </ul>
    
  </fieldset>
  
</form>

Input Element: Button

Example Start

HTML Source Code


<form action="">

  <p class="button">
    <input name="button1" type="button" value="Order Pizza"/>
  </p>
  
</form>

Input Element: Image

Example Start

HTML Source Code


<form action="">

  <p class="image">
    <input name="image1" type="image" src="http://webaccessibility.cita.illinois.edu/media/examples/images/order-pizza.png" alt="Order Pizza"/>
  </p>
  
</form>

Input Element: File

Example Start

HTML Source Code


<form action="">
  <!--
      File input control with LABEL markup using the FOR and ID attributes
   -->
  <p class="file" >
    <label for="file_id">File to upload </label>
    <input type="file" name="file_id" id="file_id" />
  </p>
</form>

Select Element

Example Start

HTML Source Code


<form action="">
  <p class="select">
     <label for="select1">Pizza Crust Options</label>
     <select name="select1" id="select1">
      <option value="0">Thick</option>
      <option value="1">Regular</option>
      <option value="2">Classic thin</option>
    </select>
  </p>
</form>

Textarea Element

Example Start

HTML Source Code


<form action="">
  <!--
      TEXTAREA control with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" >
    <label for="textarea1">Pizza delivery instructions</label>
    <textarea name="textarea1" id="textarea1" rows="10" cols="80">none</textarea>
  </p>
</form>