Associating labels with form controls

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I read that it's good accessibility practice to link form labels and
controls like this:

<label>Your name: <input name="name" id="name" type="text"></label>

or this:

<p><label for="name">Your name:</label><br>
<input name="name" id="name" type="text"></p>

What I don't understand is how you do this for radio buttons, e.g.:

   <label for="car">Do you own a car?</label><br>
   <input name="car" id="car" type="radio" value="Yes" class="radio"> Yes
   <input name="car" id="car" type="radio" value="No" class="radio"> No
</p>                ~~~~~~~~


   Do you own a car?<br>
   <label><input name="car" type="radio" value="Yes" class="radio">
   <label><input name="car" type="radio" value="No" class="radio">

The first example is incorrect because you can't have the same ID on two
elements. And the second example does not link the question, "Do you
have a car?" with the Yes/No controls (although Yes and No labels are
linked to the controls).

What is the correct approach here?

Re: Associating labels with form controls


JWL wrote:

Quoted text here. Click to load it

Which is the correct and intended behaviour. Most browsers interpret a click
on the label as a click on the control - do you think that clicking on 'Do
you own a car?' should be understood as answering this question?

So 'Do you own a car?' is not a label for a control. It's more like a
heading for a group of control, so you could use

  <legend>Do you own a car?</legend>
  <label><input name="car" type="radio" value="Yes" class="radio">
  <label><input name="car" type="radio" value="No" class="radio">

If you want to label radio controls and you have to use <label for=..>, then
give every input a different ID:

<input name="car" id="carYes" type="radio" value="Yes" class="radio">
<label for="carYes">Yes</label>
<input name="car" id="carNo" type="radio" value="No" class="radio">
<label for="carYes">No</label>

Benjamin Niemann
Email: pink at odahoda dot de
WWW: /

Site Timeline