A A A A A

Using LABEL Element for Labeling Form Controls

Input Element: Text Box

Input Element: Text Box Example

HTML Code for Input Element: Text Box

<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

Input Element: Password Example

HTML Code for Input Element: Password

<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

Input Element: Checkbox Example

Pizza Topping Options

HTML Code for Input Element: Checkbox

<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

Input Element: Radio Button Example

Pizza Crust Options

HTML Code for Input Element: Radio Button

<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

Input Element: Button Example

HTML Code for Input Element: Button

<form action="">

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

</form>

Input Element: Image

Input Element: Image Example

HTML Code for Input Element: Image

<form action="">

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

</form>

Input Element: File

Input Element: File Example

HTML Code for Input Element: File

<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

Select Element Example

HTML Code for Select Element

<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

Textarea Element Example

HTML Code for Textarea Element

<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>

Navigation

Other HTML Best Practices

Working Group