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