SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    label and id tags on radio buttons

    I have the following code:

    Code:
    <td><label for="sex">Gender: </label></td>
    <td><input type="radio" name="sex" value="Male" /> Male 
          <input type="radio" name="sex" value="Female" /> Female
    </td>
    When I validate it, I get the warning that I have a reference to non-existent ID "sex". If I give both of the radio buttons an id of "sex", I get the warning that I already have a reference to the "sex" id. What's the best way to solve this?

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're doing it wrong.
    HTML Code:
    <fieldset>
     <legend>Gender</legend>
     <label><input type="radio" name="sex" value="Male"> Male</label>
     <label><input type="radio" name="sex" value="Female"> Female</label>
    </fieldset>
    Simon Pieters

  3. #3
    SitePoint Addict dAEk's Avatar
    Join Date
    Oct 2003
    Location
    Stockholm, Sweden
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you don't want to wrap your input elements inside the labels (for some reason) you probably want to know that the for attribute of the label element use the id, not name. Add id's to the radiobuttons and you should be fine.

    Look at zcorpans code, it's as clean as it can get.
    Last edited by dAEk^; Nov 2, 2006 at 00:46.
    David Shamloo-Ekblad

    Go Habs! | For music addicts: Last.fm, SongMeanings

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. I just finished snooping around to learn more about fieldset. I had never used it. I guess when I first learned HTML, they weren't talking about it and I obviously haven't done the reading on my own until now.

    From what I'm seeing, it looks like you can use it for some parts of a form and not others? Is that right? And what's the current thinking about nested fieldsets? I'm looking over the forms I'm trying to create and they're fairly complex and some nested fieldsets might be helpful. For example, the gender thing is within a larger category where you're asking for info about the person's children. So children could be one fieldset but then additional fieldsets such as name, age and gender would be separate ones? And then I guess each child would have its own fieldset, too. That's a whole bunch of nested fieldsets. Will that work?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use nested fieldsets, as long as the fieldsets are related to the form entries. You can also use sibling fieldsets as well.

    Each fieldset is required to have a LEGEND tag to properly identify it.

    I guess the best way to think of fieldsets is to compare them to DIV containers - just don't go overboard with their use, and you should be fine.

    And yes, they can be styled with CSS .

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha! How did you guess that my first question had been about styling! LOL

    You mentioned siblings. Can someone point me toward a good article on that? Cross-browser compatability is high on my list of things I need to take into account. A fair amount of my target audience will have older machines and older browsers. So what I'd like is something to help me with the current thinking on what you should and shouldn't try to do with CSS, given that kind of audience.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Elements being siblings just means that they have the same parent. E.g., the following two Ps are siblings:
    HTML Code:
    <body>
     <p>Foo.</p>
     <p>Bar.</p>
    </body>
    Styling of fieldset/legend is somewhat restricted in current browsers. If the legend doesn't do what you want then try placing a span inside it and style that instead. Similarly place a div outside the fieldset if that doesn't play ball. If you want to move the legend around then you can use absolute positioning:
    HTML Code:
    <div class="fieldset-div">
     <fieldset>
      <legend><span>Gender</span></legend>
      <label><input type="radio" name="sex" value="Male"> Male</label>
      <label><input type="radio" name="sex" value="Female"> Female</label>
     </fieldset>
    </div>
    Code:
    .fieldset-div { position:relative; /* establish a containing block for absolutely positioned descendants */ }
    fieldset { border-style:none; margin:0; padding:0 0 0 3.5em; }
    legend span { position:absolute; left:0; }
    Simon Pieters

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, ok, thanks. This is helpful.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •