SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    misbehaving radio buttons

    Hello,

    I am following the tutorial for using CSS for making forms. Awesome tutorial by the way. However, when I preview the form in a browser, all the radio buttons can be clicked. In other words I can fill in all the radio buttons instead of being restricted to just one. Here is a sample of the code:

    <legend>II. Approximate Volume of Scans</legend>
    <fieldset>
    <p>Number of Pages to be scanned</p>
    <ol>
    <li><label for="Less_than_500">Less than 500</label>
    <input type="radio" id="less500" name="less_than_500_pages" /></li>
    <li><label for="500-5000">500-5000</label>
    <input type="radio" id="500-5000" name="500-5000" /></li>
    <li><label for="5000-15000">5000-15,000</label>
    <input type="radio" id="5000-15000" name="5000-15000"/></li>
    <li><label for="15-30000">15-30,000</label>
    <input type="radio" input id="15-30000" name="15-30000" /></li>
    <li><label for="30000">30,000+</label>
    <input type="radio" id="30000+" name="30000+" /></li>
    </ol>
    </fieldset>

    I tried some sample Dreamweaver created code:

    <p>
    <label>
    <input type="radio" name="Number of Volumes to be scanned" id="Number of Volumes to be scanned_0" />
    Less than 500</label>
    <br />
    <label>
    <input type="radio" name="Number of Volumes to be scanned" id="Number of Volumes to be scanned_1" />
    500-5000</label>
    <br />

    That code works OK. I'm an old man so have pity on me. I just can't see what's wrong.

    All the best,

    Luciano

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All radio buttons in a group must have the same name attribute. That's what tells the browser they belong together.

    They must have unique id attributes, of course. And the for attributes of the label elements must match those id attributes. Note that id values must not start with a digit.

    Also, legend must be inside the fieldset, not before it.
    And I'd say it's very unlikely that this constitutes a list, unless you find it acceptable to have the bullet points visible. If you must hide the bullets to make it usable, then it's not a list.

    Code HTML4Strict:
    <h2>II. Approximate Volume of Scans</h2>
    <fieldset>
      <legend>Number of Pages to be scanned</legend>
      <label for="less500">Less than 500</label>
      <input type="radio" id="less500" name="pagesToScan">
      <br><label for="s500-5000">500-5,000</label>
      <input type="radio" id="s500-5000" name="pagesToScan">
      <br><label for="s5000-15000">5,000-15,000</label>
      <input type="radio" id="s5000-15000" name="pagesToScan">
      <br><label for="s15-30000">15,000-30,000</label>
      <input type="radio" input id="s15-30000" name="pagesToScan">
      <br><label for="s30000">30,000+</label>
      <input type="radio" id="s30000" name="pagesToScan">
    </fieldset>
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    When you create a radio group you just need to ensure that the "name" attribute is the same for all the buttons you want in the group otherwise the browsers won't know which ones are in the group.

    Code:
    <li><label for="radio1">Less than 500</label>
    <input type="radio" id="radio1" name="pages" /></li>
    <li><label for="radio2">500-5000</label>
    <input type="radio" id="radio2" name="pages" /></li>
    Note that IDs cannot start with a digit. They must start with a letter
    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

    Edit:


    I was too slow

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for straightening me out on a few basic but important points. It was most generous of you. I have been following a tutorial on SitePoint which you can google called "Fancy Form Design Using CSS, which is excellent and I see now that I misread the markup example and should have included the legend inside the fieldset tags. If you follow the tutorial you will see that I will be removing the list styles. Using a list gives me a few more hooks to hang some CSS rules on. Again, thanks for everything and I hope I can return the favor.

    All the best,

    luciano

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS, Thanks for the code as well. Above and beyond the call...

    All the best,

    luciano

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do all the items in a checkbox group also have to have the same name attribute?

    luciano

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do all the items in a checkbox group also have to have the same name attribute?
    From the W3c : "Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property"

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Luciano

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by luciano991 View Post
    Do all the items in a checkbox group also have to have the same name attribute?
    No, checkboxes are different because they are independent from one another.

    As Paul said, you may use the same name, but it depends on how your server-side application that receives the form data is written. If you have a bunch of checkboxes that all have name="choices[]", a PHP script may receive those as an array value.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone,

    Well, here is the form I'm working on in its present state. I have an obvious problem which is that the first list is determined to position outside the content area. I have been over the code until my eyes want to fall out. If you are so inclined I could use a fresh pair of eyes.

    Here is the URL. I'm sorry I couldn't post it as a link as I'm still a rookie. :-)
    (aia.academicimaging.com/bookscanner-needs-assessment.html)

    All the best,

    Luciano

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Try Clearing the fieldset as some of the elemnts within are floated.

    e.g.
    Code:
    fieldset{clear:both}
    Also shorten your text in the legend or it will push things wide as legends are almost impossible to control.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I forgot to mention you have a load of validation errors creeping in to your code so run along to the validator and tidy them up. As mentioned before you cannot use an ID more than once uniquely per page.

  13. #13
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The clear float worked perfectly. I'll try to tame those legends a bit. That was the next problem I was going to address.

    All the best,

    Luciano

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by luciano991 View Post
    Thanks! The clear float worked perfectly. I'll try to tame those legends a bit. That was the next problem I was going to address.

    All the best,

    Luciano
    You can add a span inside your legend like so for styling.
    <legend><span>..........</span></legend>


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
  •