ansaurus

Question

Answer 1

+4 A:

This is according to the specs, and works in all modern browsers (but not in IE6 - clicking the label will not set focus to the input control, unless you include an id and for):

  <label>
      Name: <input type="textbox" name="firstName" />
  </label>

As for "why" - In the <fieldset>, the radio buttons were put in the labels so there won't be an unclickable gap between the label and its radio button.

Kobi 2010-05-24 07:14:42

"(no, not in IE6):" whatdo you mean?

metal-gear-solid 2010-05-24 07:15:54

Answer 2

+3 A:

Putting the input inside the label associates the two. This is important for accessibility (e.g. screen readers for people who can't see the relationship between the label and the input by looking at the page). An alternative is to use the for attribute in the label tag.

Greg 2010-05-24 07:22:56

Answer 3

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<title>Visual Label example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
 .control
 { 
   background-color:#ddd
 }
</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. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="check" id="id_2" value="2" type="checkbox">Two
</label>
<br />
<label class="control" for="id_3">3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input name="check" id="id_3" value="3" type="checkbox">Three
</form>
</body>
</html>

arunas_t 2010-05-24 08:07:32

@arunas_t - your given code is not W3C valid.

metal-gear-solid 2010-05-24 08:13:51

Believe me or not I stripped everything for the puprose of simplicity, still it works in IE, Firefox and Opera and it is for the visual example. Just try it if You want to see the answer for Your question, cheers. P.S. If You need the whole compatible code, I can provide it.

arunas_t 2010-05-24 08:32:37

The code is updated. How is it now? At least Firefox shows me three greens? :)

arunas_t 2010-05-24 08:44:53

@arunas_t - behavior of all 3 input is same in FF http://jsbin.com/ebaqo

metal-gear-solid 2010-05-24 15:26:15

Ok, maybe I am overvalued my teaching abilities. I just checked the the code in FF 3.6 in the link You provided and it definitely behaves differently. I have got an idea - I'll change the code with css so that You could see control surfaces, and change control type to checkbox - it alternates when clicked on the same control surface, maybe it will make more sense. Control surfaces will be gray. If not, sorry, maybe someone else will be able to explain You. Anyway thanks for teaching me patience.

arunas_t 2010-05-24 17:07:50

Probably the last update :) to the code has been done.

arunas_t 2010-05-24 17:16:28

Answer 4

A:

Today I found answer here. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name ). For example <label>First name <input type="text" name="firstname"></label>).

So explicit is the way to go and it's also give us more style option.

metal-gear-solid 2010-05-30 02:39:41

ansaurus

tags:

views:

answers:

Should we put <input> inside <label>?

related questions