Generally it's done for the purpose of extension of the input control surface. When there is a radio button or a checkbox, everything that is inside <label for="given_control"></label> engages control.
Ok, one more time: Now control surfaces are seen in grey (If Your CSS is not disabled).If You want control to be sensitive to the clicks on the both sides of control, enclose <input> between label tags <label...>, if its enough for one side of the control to be sensitive to the click, put <label> tags either before or after <input>. On the following example: First 2 controls are sensitive to the clicks on the both sides (including whitespace on the left) of the control, the third one - just for the left side.
Check this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Visual Label example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
.control
{
background-color:#ffffd
}
</style>
</head>
<body>
<form action="" method="post" name="f1">
<label class="control" for="id_1">1.
<input checked="checked" name="check" id="id_1" value="1" type="checkbox">One
</label>
<br />
<label class="control" for="id_2">2.
<input name="check" id="id_2" value="2" type="checkbox">Two
</label>
<br />
<label class="control" for="id_3">3. </label>
<input name="check" id="id_3" value="3" type="checkbox">Three
</form>
</body>
</html>
