label tag on radio buttons

Discussion in 'HTML' started by Shailesh Humbad, May 13, 2004.

  1. 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.
    Shailesh Humbad, May 13, 2004
    #1
    1. Advertising

  2. Shailesh Humbad wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, May 13, 2004
    #2
    1. Advertising

  3. On Thu, 13 May 2004 19:19:36 +0100, Toby A Inkster <>
    wrote:

    > 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...


    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
    Foofy (formerly known as Spaghetti), May 14, 2004
    #3
  4. Foofy (formerly known as Spaghetti) wrote:

    > 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>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, May 14, 2004
    #4
  5. Shailesh Humbad

    Andy Dingley Guest

    "Foofy (formerly known as Spaghetti)" <> wrote in message news:<>...

    > 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" ... >
    Andy Dingley, May 14, 2004
    #5
  6. Shailesh Humbad

    Mitja Guest

    Shailesh Humbad <>
    (news:DEOoc.7808$) wrote:
    > 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
    Mitja, May 14, 2004
    #6
  7. Shailesh Humbad

    Neal Guest

    On Thu, 13 May 2004 20:54:03 -0400, Foofy (formerly known as Spaghetti)
    <> wrote:

    > On Thu, 13 May 2004 19:19:36 +0100, Toby A Inkster
    > <> wrote:
    >
    >> 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...
    >
    >



    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.
    Neal, May 14, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    779
    John C. Bollinger
    Jan 27, 2006
  2. Scott D Johnson
    Replies:
    1
    Views:
    1,062
    Scott D Johnson
    Sep 27, 2006
  3. Dr. Leff
    Replies:
    3
    Views:
    290
    David Mark
    Oct 15, 2007
  4. Dr. Leff
    Replies:
    3
    Views:
    224
    David Mark
    Oct 15, 2007
  5. Knut Krueger
    Replies:
    8
    Views:
    264
    Knut Krueger
    Aug 20, 2013
Loading...

Share This Page