TrueJournals

When creating forms in HTML, one of the best practices is to always use <label> to associate the labels with their form fields.  However, this creates the complication of needing to give each label the “for” attribute, and perhaps wanting some extra magic to set the width of each label so that all the form fields are lined up.  Recently, I decided to play around with form fields like this a little to see if I could automate this process using jQuery.

Here’s what I came up with:

var w = 0;
$("label").each(function() {
    if($(this).width()>w) w=$(this).width();
    // Assume the input immediately follows the label
    var input = $(this).next();
    input.prop('id', input.prop('name'));
    $(this).prop('for', input.prop('name'));
});
$("label").width(w+10);
$("label").css('float', 'left');

And here’s what it does: first, it loops through each label on the page looking for the maximum width. When it finds that, it sets all labels to have a width of (maximum width)+10px. The extra 10px are just so the label and field aren’t directly on top of one another.

In the same loop, this code associates the label with the field next to it. For my sake, I made the assumption that I will always have <label>…</label><input />. If this is not the case, the code will associate the label with the wrong field. It simply sets the next element’s id to be the same as its name, and sets the label’s “for” property to be the element’s name, also.

Use this with caution. If you’re not careful, you could end up with duplicate IDs (a no-no). There are other reasons this code isn’t necessarily a good idea, but it’s good enough for me. For a page with a lazy HTML coder, this will work perfectly.

Bonus: Add input.prop(‘placeholder’, $(this).text()); inside the loop to also set the “placeholder” text to whatever the label is. You could also detect if the browser supports “placeholder”, and hide the label if it does:

var w = 0;
$("label").each(function() {
	if($(this).width()>w) w=$(this).width();
	// Assume the input immediately follows the label
	var input = $(this).next();
	input.prop('id', input.prop('name'));
	input.prop('placeholder', $(this).text());
        if('placeholder' in document.createElement('input')) $(this).hide();
	$(this).prop('for', input.prop('name'));
});
$("label").width(w+10);
$("label").css('float', 'left');