tags:

views:

1612

answers:

8

Checkboxes in html forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

A: 
Ronnie
+22  A: 

If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

The for attribute on the label element links to the id attribute on the input element and the browser does the rest.

This has been testing to work in:

  • IE6
  • IE7
  • Firefox
GateKiller
A: 

The <label> answer is definatley the right way to do that - but how can I make clicking anywhere in my box around the label AND checkbox work?

Ronnie
A: 

You can wrap your checkbox in the label:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Michiel de Mare
+2  A: 

Ronnie,

If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:

<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
GateKiller
A: 

Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text! This does the job for me:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

but unfortunately has lots of javascript that is effectively toggling twice.

Ronnie
+6  A: 

Set the CSS "display" property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.

For example

 <label for="test" style="width: 100px; height: 100px; display: block; background-color: #e0e0ff;">
A ticky box! <input type="checkbox" id="test" />
</label>
Mat
It's better to put the checkbox outside the label.
MrFox
+1  A: 

As indicated by @Gatekiller and others, the correct solution is the <label> tag.

Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.

It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".

Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.

Euro Micelli