I’m impressed by how many developers still haven’t learnt to use labels in their pages. I mean, how hard can it be?

What are labels anyway, I hear you ask. Label is an HTML element, which describes an input field. Let me demonstrate:
<label for="uname">Username:</label> <input id="uname" type="text" />
Here I establish two elements. An input field, which doesn’t say much on its own and a label, which tells us what this input is for. The for attribute of the label matches the id of an input field. One can also put the input directly into the label…
<label>Username: <input type="text" /></label>
Which I prefer, due to the fact it’s shorter. Labels can be assigned to just about any form field. They are “text level” elements and can be styled with css.

So why should you use labels? There are various reasons, which you probably don’t really care about, like semantic coding, browsers being able to visually match the label and the element (although this is your job) and offering help to people using screen readers to help them see. But here’s one that should change your mind - Allowing users to click on the label to focus the input field. As an example, take all those “I agree to …” checkboxes. Isn’t it lovely how you can just click the text in order to check that checkbox? This works in all modern browsers that I know of. Mind you, that I don’t consider Internet Explorer 6 to be a modern browser, though.

To all those who still have no clue what I’m on about, try this demo.