Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Form Input Labels

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268