16

I saw 2 different method on same form example:

on http://www.alistapart.com/articles/prettyaccessibleforms/ why they are using 2 method in first fieldset they are keeping input after labeland in 2nd fieldset they are keeping input after label. Why?

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
    <li>
      <label for="postcode">Postcode<em>*</em></label>
      <input id="postcode" />
    </li>
    <li>
      <fieldset>
        <legend>Is this address also your invoice »
address?<em>*</em></legend>
        <label><input type="radio" »
name="invoice-address" /> Yes</label>
        <label><input type="radio" »
name="invoice-address" /> No</label>
      </fieldset>
    </li>
  </ol>
</fieldset>

why they are sometime keeping input after label and sometime inside?

Update:

here http://www.usability.com.au/resources/forms.cfm they are also keeping input after label not inside

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    The link you added tells you the reason for not using implicit labels: "Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels ensure that the label is properly positioned." Web Content Accessibility Guideline Checkpoint 10.2" Some impaired people still hold on to their old screen readers, so you're better off using explicit labels. – Gert Grenander May 24 '10 at 18:28
  • @Jørn Schou-Rode - oh yes same question – Jitendra Vyas May 30 '10 at 02:40

4 Answers4

15

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.

Matchu
  • 83,922
  • 18
  • 153
  • 160
Kobi
  • 135,331
  • 41
  • 252
  • 292
6

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
  • 2,523
  • 4
  • 22
  • 27
6

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.

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
1

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:#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
  • 1,576
  • 1
  • 10
  • 14
  • 1
    @arunas_t - your given code is not W3C valid. – Jitendra Vyas May 24 '10 at 08:13
  • 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 May 24 '10 at 08:32
  • The code is updated. How is it now? At least Firefox shows me three greens? :) – arunas_t May 24 '10 at 08:44
  • @arunas_t - behavior of all 3 input is same in FF http://jsbin.com/ebaqo – Jitendra Vyas May 24 '10 at 15:26
  • 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 May 24 '10 at 17:07
  • Probably the last update :) to the code has been done. – arunas_t May 24 '10 at 17:16