Using LABEL Element for Labeling Form Controls

Input Element: Text Box

HTML Example

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

HTML Example

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="images/required-valid.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="images/required-valid.png" alt="required"/></label><input type="password" name="password2" id="password2" size="20" value=""/></p>
</form>

Input Element: Checkbox

HTML Example

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 class="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

HTML Example

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 class="radio">
      <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

HTML Example

HTML Source Code


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

Input Element: Image

HTML Example

HTML Source Code


<form action="">
  <p class="image"><input name="image1" type="image" src="images/pizza.png" alt="Order Pizza"/></p>
</form>

Input Element: File

HTML Example

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

HTML Example

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

HTML Example

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>