HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML form labels

Accessibility is a big thing in the world wide web. Fortunately, HTML is designed a certain way (and continues to be as it changes over time) that provides for a high level of accessibility.

This tutorial focuses on:

The <label> tag

The <label> tag is used to set the text of form elements.

The <label> tag should sorround the text that will appear for a form element. The form element for which the text is specified should be set using the for attribute which takes the same value as the value set for the id attribute of that particular form element.

Example:
<form> <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" /> </form>
Output:

In the above example, we set the for attribute of the <label> tag with the value "fname". This is the id of the form element for which the text in the <label> tag is specified. The textbox with the id "fname" will be labeled with the text "First Name:"

Another way to achieve the same effect:
Choose a browser: <form> <label for="ff"> <input type="radio" name="browser" id="ff" /> Firefox </label> <label for="ie"> <input type="radio" name="browser" id="ie" /> Internet Explorer </label> </form>
Output:
Choose a browser:

The difference in this example from the first one is that in this example we actually include the <input> tag inside the <label> tag.

What is the purpose of the <label> tag?

So then what is the purpose of the <label> tag? Can't we just include some text for a form element next to it?

Technically, we can. But using the <label> tag puts things into a clearer context and is a good usability practice which has some benefits to it.

Benefits of using the <label> tag:

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information