| SitePoint Sponsor |
I have the following code:
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?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>
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
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.
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?
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
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
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.
Elements being siblings just means that they have the same parent. E.g., the following two Ps are siblings: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:<body> <p>Foo.</p> <p>Bar.</p> </body>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
Oh, ok, thanks. This is helpful.
Posting Permissions
Bookmarks