Form Labels

posted in ..

When authoring HTML, if you find yourself writing an <input> element, chances are that you are going to need to label it. The proper way to label an <input> element is by using a <label> element. I don’t know how many times I’ve seen web developers omit this tag. Start using it. It aids in the accessibility of your site.

The main component of the <label> element is its for attribute. The value of the for attribute is the id of a form element. Form elements can be one of <input>, <select>, <textarea>, or <button>. The for attribute can be omitted if the <label> element surrounds the form element.

The only issue that I have with omitting the for attribute is in Internet Explorer 6 in which clicking the label will not activate the form element. I don’t have too many customers that still use IE6, so I omit the attribute depending on my customer. The W3 at one time did consider the omission of a <label> element’s for attribute a failure criterion in accessibility, due to a lack of its interface control being determined programatically, but I do not believe that this is still the case.

See below for an example of labels in use. Hint: click on the label, and not the checkbox.

  1. New Horns.by Domain
  2. Mutt E-Mail Client and Gmail Over IMAP
  3. WebPutty and Respond.js
  4. SSH Keys
  5. ChromeOS Split Windows
  6. Google+ Hangout Hackathon
  7. Array Cheat Sheet
  8. Computer Languages I Like
  9. Languages I Speak
  10. Another Categories Test