Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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:
• HTML List Basics
• HTML5 role Attribute
• Meta Tag Basics
• Form Input Labels
• Set Form Controls Tab Order With tabindex Attribute
• Image Map Basics
• HTML Text Tags Basics
• Add an Image to a Web Page
• When to Use the nofollow Attribute value
• Line Breaks in HTML