Add Labels for Easier Clicking

I feel bad for not posting for a few months. All of my content-creation energy was devoted to my grad program, and although I did get some A’s on my papers, I’m not so sure that they should be posted here. Anyway, here’s some more useful-ish stuff!

Maybe this is a little of my OCD tendencies shining through, but I really hate when a form’s radio or checkbox inputs don’t have a <label> tag around their descriptive text.

Especially considering the increasing proliferation of touch devices and high-resolution screens, providing users with only a tiny, ten-pixel-square area to interact with your form is …
POOR FORM!

<form id="form1">
  <div class="pollAnswer">
    <input value="answer1" name="keyword" type="radio"> Answer Number One
  </div>
  <div class="pollAnswer">
    <input value="answer2" name="keyword" type="radio"> Answer Number Two
  </div>
</form>

This is annoying:

The markup we really want:

<form id="form2">
  <div class="pollAnswer">
    <input value="answer1" name="keyword" type="radio" id="answer1"> 
    <label for="answer1">Answer Number One</label>
  </div>
  <div class="pollAnswer">
    <input value="answer2" name="keyword" type="radio" id="answer2"> 
    <label for="answer2">Answer Number Two</label>
  </div>
</form>

That is much easier to click!

OK … sometimes it’s a huge pain in the ass to add labels to the dozens of inputs you’ve got in your big registration form or complex poll, and you don’t have the time. Cry me a river.

The solution is jQuery! Here’s a tiny plugin which addresses this annoying problem:

$('#form1 .pollAnswer').each(function(){
	var thisInput = $(this).find('input'), 
	forVal = $(thisInput).val(); 
	$(thisInput).attr('id',forVal); 
	$(this).wrapInner('<label for="'+forVal+'"/>').prepend(thisInput);
});

Enjoy!