Label - the secret element
Most web sites I look at seem to have no idea how to create structured and valid layout when it comes to form elements. One of the things I get most annoyed at, both as a coder and a normal user, is when they’ve missed out on the wonderful and easy label element.
The label element is used together with form elements and it makes it accessible to screen readers, while also making the text clickable to set focus to the element in question. Point in question:
You have a radio button, but since they’re pretty small, it might be difficult to click it. You then add a label around the text next to it and make it reference the desired radio button: VoÃla! You can now click the text as well to make a selection.
A simple example:
<input type="radio" id="gender-male" name="gender">
<label for="gender-male">Male</label>
However, the example above demands that you know the id of the radio button. If you have dynamically generated forms meaning a moving number of elements, you need to do some trickery to generate dynamic ids and then have the same value for their respective label element.
There is one way around this, but unfortunately it doesn’t work in Internet Explorer. I do showcase it below, though, just so you’re aware of it.
<label>
<input type="radio" name="gender"> Male
</label>
You thought this was all funky and want to know more about improving your form coding, but you have no idea where to go? Fear not, take a look at
10 Tips To A Better Form
