In the W3C-Specs for the label element it says:
When a LABEL element receives focus, it passes the focus on to its associated control. (from: W3C Specifications for the label)
...which means the form element will be selected if the label is clicked.
This association is handled by the label's for attribute and has to be identical to the id of the input field. Unfortunately, Safari and Internet Explorer don't spend much attention to this association - so users of these browsers have a hard time when it comes to aiming at 10x10 pixel sized checkboxes to toggle them.
The following script adds click functionality to all form labels on a website for Safari and Internet Explorer. It works for radio buttons, checkboxes, text fields, Textareas and select elements.
The script works like this:
- Check if browser is Safari or IE — the following is only processed for these two browsers.
- Grab all label elements
- Add an onclick event for every label:
- Get the element with the
idof the labelsforattribute. - Set focus on textfields and textareas, toggle checkboxes and radio buttons
- Get the element with the
JavaScript for IE and Safari
-
function fixFormLabels(){
-
var labels;
-
-
// enable for IE and Safari
-
if( document.all || navigator.userAgent.indexOf("Safari")> 0){
-
labels = document.getElementsByTagName("label");
-
for(i=0; i<labels.length; i++){
-
labels[i].onclick = function(){
-
var target = document.getElementById(this.getAttribute('for'));
-
// Checkboxes or radio button labels
-
if(target.type == 'checkbox' || target.type == 'radio'){
-
target.checked = target.checked == false ? true : false;
-
}
-
else{ // Textareas and input fields, Select elements
-
target.focus();
-
}
-
};
-
}
-
}
-
}
-
-
// execute the script when the page has loaded
-
window.onload = fixFormLabels;
A Version based on prototype.js
-
function fixFormLabels(){
-
var labels;
-
-
// enable for IE and Safari
-
if( document.all || navigator.userAgent.indexOf("Safari")> 0){
-
labels = document.getElementsByTagName("label");
-
$A(labels).each ( function(label){
-
Event.observe(label, "click", function(){
-
var target = $(this.getAttribute('for'));
-
// Checkboxes or radio button labels
-
if(target.type == 'checkbox' || target.type == 'radio'){
-
target.checked = target.checked == false ? true : false;
-
}
-
else{ // Textareas and input fields, Select elements
-
target.focus();
-
}
-
});
-
});
-
}
-
}
-
-
// execute the script when the page has loaded
-
Event.observe(window,"load", fixFormLabels);
Indicating Interactivity with CSS
Now make sure that you include a rule that turns the mouse pointer to the hand (usually) which indicates a clickable link.
-
label{ cursor: pointer; }
Alternatives
There's also a solution that uses JavaScript behaviour in CSS. That method implies that you simply need to add class="clickable" to the label element.
The downside of this is the use of the attribute selector label[class="clickable"]{ behaviour: none;} to reset the behaviour for Firefox. Unfortunately, Safari also understands this rule - so form labels aren't clickable anymore.
Therefore my solution is suited better for 'cross-browser' use, as it also makes Safari users happier than they already are.
Example
As written above the association between the label and the input field is done by the for attribute of the label. It's content has to be identical to the id of the input field.
A correct implementation would look like this:
As the JavaScript above is already implemented in this blog, the following example has the fix applied. Just test it by clicking on the label.
Or scroll down and try it on the commentform. And while you're there you are welcome to leave me a message wheter you agree with my solution or not.
RT @dertimbo Clickable Form Labels for Safari and IEPosted in Developing, Tags:internet_explorer, javascript, programming, safari
Possibly Related Entries
One Response to “Clickable Form Labels for Safari and IE”
Who is this?
freshlabs journal is the bi-lingual weblog and digital playground of Tim Isenheim, designer and webdeveloper from Hamburg, Germany. More →
Thanks for the script. I understand this is great for users of Safari versions prior to version 3, but the script also targets Internet Explorer. Why is this so? I’ve tested forms in Internet Explorer 6, 7 and 8 on Windows and even in IE5 on Mac and all of them seem to focus on associated fields when their labels are clicked. Is this perhaps targeted at IE 4, 3, 2 or 1? I’d be interested in knowing what the reason for including IE in this was.