Form Input Labels
By Stephen Bucaro
Many of your form input elements will need an identifying label. Some input
elements like a button, should have the label inside the graphic element,
but a text box, checkbox, or radio button needs a label. A label can be just
text next to the input element, but for the visually impaired, that would not
be very helpful.
When a visually impaired person clicks on regular text, their text reader
application will read the text, but they still may not be able to see exactly
where the input element is. An html label element has a for
attribute with the same value as the id attribute of the form element that
it identifies. When a visually impaired person clicks on a label element,
their text reader application reads the text, and the related input
element receives the focus.
Shown below is an example of a label element used with a text input.
<label for="firstname">First name:</label><input type="text" id="firstname" />
Note that the label element's for attribute ("firstname") is the same
as the value of the id attribute of the text input element.
Shown below is an example of a label element used with a checkbox input element.
<input type="checkbox" id="accept" /><label for="accept">I Accept</label>
Note that the code for the label element is positioned after the code for the checkbox input element.
Shown below is an example of a label element used with radio button inputs on a form
used to select a type of pizza.
Radio buttons in a group are mutually exclusive, that is, when you set one radio button
in a group, all other radio buttons in the group are cleared. In the code shown below, the
value of the name group identifies all the buttons in the group. However each radio
button has a unique id. The value of each label element's for attribute
is the same as the value of the id attribute of the radio buton input element.
<form action="javascript:return false;">
<input type="radio" name="pizza" id="regular" value="regular" /><label for="regular">Regular</label><br/>
<input type="radio" name="pizza" id="vegetarian" value="vegetarian" /><label for="vegetarian">Vegetarian</label><br/>
<input type="radio" name="pizza" id="meatlover" value="meatlover" /><label for="meatlover">Meat Lovers</label><br/>
<input type="submit" value="Order Pizza" />
</form>
Note, the value of the value attribute is whats returned to the handler defined
by the form's action attribute. In this case I don't want the form submitted to the
server, hence action="javascript:return false;".
Using the label element with your form input elements rather than just placing
text next to them is a good idea that makes your web site more accessible.
More HTML Code:
• Set Form Controls Tab Order With tabindex Attribute
• HTML Special Characters - Character Entities
• HTML5 Input Type - Email
• Changing the Size of an Image on Your Webpage
• Aligning an Image on Your Web Page
• Line Break Basics
• HTML Horizontal Rule
• HTML Image Basics
• HTML Textarea Basics
• Most Usefull ASCII Character Code Entities
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
