June 6, 2012
Using the label tag can be really helpful and should be used when creating any sort of form in HTML. If you don't, I will hunt you down and shiv you in your knee caps. This is so that your users have the option of clicking the label in order to: select a radio button, mark a checkbox or if you're still from the 90s; focus on a text input field. Honestly you really should be using placeholders by now.
This is for people like me who get frustrated trying to click your tiny check boxes. With labels I can click the text and it selects the option I'm going for, without the headache of trying to pin point the options on your form. As much as I love taking my time getting long distance head shots on a FPS, I don't want to spend 2 minutes trying to snipe out your check boxes, your form just isn't that entertaining or worth that much effort. I much rather not fill out your form at all if it's going to be a mega pain in the ass.
Come here child, let me show you;
Notice that clicking these are a lot harder
..than clicking these. [pro-tip try hovering over the words]
Ou, isn't that hover action nice? hm, yes, it's almost enjoyable.
Now let me show you how to do this, start by creating your form:
<form> <!-- make sure your for and id tags are unique and match --> <input id="male" type="radio" name="gender" /> <label for="male" >Male</label> <br /> <input id="female" type="radio" name="gender" /> <label for="female">female</label> </form>
And if you didn't fuck that up, you should get:
The reason the second set is easier to deal with is because you have option of hovering over or clicking on either the radio button itself or the name for the radio button. Regardless of the position of the label it will still activate the checkbox/radio button/input field, this is because we map the label to the id of our form object with the for attribute of the label tag. This means that we can put the label virtually anywhere on the page, however doing this might be troublesome depending on what you're trying achieve.