Notice the very subtle highlight of the grey and the text on the “read the blog” link when you mouseover? That’s attention to detail.

The thing with the label tag is perhaps not so creative, but more of a necessity. You should take the time to make labels for your inputs/textareas/selects etc because it adds to the usability of the page and validates.

Not only should you take the time to make your label tags, but you should take the time to style them.

That’s right, style them. The default styling, in the majority of browsers, on a label tag is simply the same as the text. This would be fine, except a label isn’t just text. It’s interactive. Have you ever noticed when clicking on the text next to a checkbox it checks or unchecks the box? Assuming all elements have labels assigned to them, you can click on any label in any form and have it move the focus to that element. This is exceptionally useful for things such as checkboxes and radio buttons which can be quite small. You’re increasing the clickable area around the element and therefore increasing usability.

I would wager a lot of people don’t know about this trick, I’d say some figure it out by chance like I did, and the reason? By default the cursor style does not change over a label.

I very quickly learnt to add the following to the CSS reset I use on all my sites:

label{
cursor:pointer;
}

You can find out more about CSS resets here.

Voila! Your cursor should turn into a hand when hovering over the label, and when clicked it will place the focus in the associated element.

I usually go a bit further and give the label some colour, or weight, make it fit with the rest of the design.

It’s a good idea to put the cursor:pointer style on the button tag too, just to provide the added visual reinforcement that it is a button and to keep behaviours on the web and computers consistent.

So, add that snippet to your CSS reset, and consider how you can creatively enhance your form with more styles now that you have the label tag to play with!

I thought I’d check out Microsoft’s actual website… (you can view the full screenshot here)

Visit the website to see for yourself.

This boggles my mind! Standards for everyone eh?