A Smarter Way To Learn HTML & CSS(2015)

56
Forms: label

It’s a good idea to give each control a label tag. The form tag itself doesn’t take one, but it’s a good idea to add one to each text field, text area, radio button, checkbox, and selection option. But it isn’t required.

Labels allow screen readers to call out the text that goes with each control.

For example, if the user is working with a screen reader and you’re got a one-line text box for the user’s last name, the label tag makes the screen reader say, “Last name” when the user tabs to the field.

In addition to making the text readable by a screen reader, a label makes the text clickable like the control itself, giving the user a bigger target. This is especially helpful for radio buttons and boxes, which can be hard to hit with the cursor. For example, if you write…

<label><input type="radio" name="found-thru" value="Google">Google</label>

…the user doesn’t have to hit the button. He can click “Google” and the button will be checked.

Notice how the label tag encloses both the text and the control. This is the easy way to add a label tag. The hard way, preferred by experts for esoteric reasons, requires that you give the control an id. In this method, the opening and closing label tags enclose only the text.

<input type="radio" name="found-thru" id="goo" value="Google"><label for="goo">Google</label>

In your HTML file use the easy way to add labels to the radio buttons. Use the hard way to add labels to the checkbox buttons. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-56-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/56.html

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.

© 2016-2026 All site design rights belong to S.Y.A.