HTML: Activate checkbox when clicked on the text aside

Unfortunately, your browser can not know, which text is belonging to your checkbox. Therefore, the browser can not activate the checkbox, whenver you click on some text. With this, you can tell the browser which text belongs to your checkbox:

<label>
  <input name="cb" type="checkbox" value="1"> Text 
</label>

So, the area, located in the tag "label" will be sensitive, to be able to check the checkbox.

In addition, we should also define a appropriate cursor with CSS, because otherwise, the user might be confused when the mouse is over a clickable area does not change. Use the following statement (alternatively you can also set up a general CSS rule for your entire page), to get the right mouse pointer as it appears also with links:

<label style="cursor: pointer">
  <input name="cb" type="checkbox" value="1"> Text
</label>

Next to this method, you can also establish a relationship with a "label" in this way:

<input id="cbid" name="cb" type="checkbox" value="1">
<label for="cbid">Text</label>

With this method, you will not have to frame your whole box to make a reference. This method is particularly useful, when the elements are arranged in a table, for example, and there are other HTML tags between the individual elements.

Incidentally, you can also use the label-tag for textareas or input fields. Thus, with a click on the label area and the text, you can set the focus to the related input area and also blind people can see, which field is belonging to which text (keyword accessible Internet).
2011-12-24 at 18:14