label tag on radio buttons

[Shailesh Humbad]

I can use a label tag on radio buttons like this:

<input type="radio" name="animal" id="animal1">
<label for="animal1">Giraffe</label>
<input type="radio" name="animal" id="animal2">
<label for="animal2">Antelope</label>

My question is, are there any browser compatibility issues with using
a different name and id in the same form element? Will all the
browsers that support this feature submit the form correctly using the
"name" attribute as the real name of the submitted radio field.

 

[Toby A Inkster]

I can use a label tag on radio buttons like this:

<input type="radio" name="animal" id="animal1">
<label for="animal1">Giraffe</label>
<input type="radio" name="animal" id="animal2">
<label for="animal2">Antelope</label>

My question is, are there any browser compatibility issues with using
a different name and id in the same form element?

No browser compatibility problems. Indeed in this situation, you *MUST*
use a different name and ID.

 

[Foofy (formerly known as Spaghetti)]

No browser compatibility problems. Indeed in this situation, you *MUST*
use a different name and ID.

Something I've always wondered is why it uses the ID attribute, especially
since that must be unique throughout the document? What about a page with
multiple forms that are similar? What's the reason behind this? I'm just
curious...

 

[Toby A Inkster]

Something I've always wondered is why it uses the ID attribute, especially
since that must be unique throughout the document? What about a page with
multiple forms that are similar? What's the reason behind this? I'm just
curious...

I'm not sure what you don't get.

In the case of radio buttons, each one needs the same name -- it's how
they're grouped.

IDs are always unique and they need to be for the purpose of linking to
fragment identifiers, document.getElementById, etc.

So, if one is assigning IDs to a group of radio buttons then they must all
be different.

A technique I often use is to give radio buttons an ID of name_value. That
is:

<input type="radio" name="food" value="beef" id="food_beef">
<label for="food_beef">I want the beef meal</label>
<input type="radio" name="food" value="fish" id="food_fish">
<label for="food_fish">I want the fish meal</label>
<input type="radio" name="food" value="veg" id="food_veg">
<label for="food_veg">I want the vegitarian meal</label>

 

[Andy Dingley]

Something I've always wondered is why it uses the ID attribute, especially
since that must be unique throughout the document?

Fundamentally I think this is a legacy question. The "id" attribute
has type of "ID" (NB - there's nothing magic about the name, it only
gains this behaviour because the type is set in the DTD). "ID" type is
already well-established from SGML as having document-wide scope for
its uniqueness. Although HTML _could_ have been formulated to permit
id attributes that were unique in just the form, that would have been
a variation from existing practice for no real benefit.

There's also the issue that id is there as much to support the DOM
(obviously a document-wide scope) as it is to support form elements.


I'm an old desktop app coder, from the days before the web. My
practice is to give form elements atributes like this:
<input name="Username" id="txtUsername" ... >

If I'm doing multi-form work on the same page, then I concatenate the
form id:
<form id="frmLogon" ... >
<input name="Username" id="txtLogon_Username" ... >

 

[Mitja]

I can use a label tag on radio buttons like this:

<input type="radio" name="animal" id="animal1">
<label for="animal1">Giraffe</label>
<input type="radio" name="animal" id="animal2">
<label for="animal2">Antelope</label>

My question is, are there any browser compatibility issues with using
a different name and id in the same form element? Will all the
browsers that support this feature submit the form correctly using the
"name" attribute as the real name of the submitted radio field.

No need to worry. Still, you can alternatively use
<label><input type="radio" name="foo">bar</input></label>
to avoid the IDs altogether

 

[Neal]

Something I've always wondered is why it uses the ID attribute,
especially since that must be unique throughout the document? What
about a page with multiple forms that are similar? What's the reason
behind this? I'm just curious...

ID's are indeed one-to-a-page. And that's why it works with label. Each
label matches one and only one form element. Of what use would a label
affecting two or more checkboxes be?

If you have two similar forms, all the more reason to ensure your labels
are unique in each.