misbehaving radio buttons

[luciano991]

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

[AutisticCuckoo]

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.

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

[Paul O'B]

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.

<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

[luciano991]

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

[luciano991]

PS, Thanks for the code as well. Above and beyond the call...

All the best,

luciano

[luciano991]

Do all the items in a checkbox group also have to have the same name attribute?

luciano

[Paul O'B]

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"

[luciano991]

Thanks,

Luciano

[AutisticCuckoo]

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.

[luciano991]

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

[Paul O'B]

Try Clearing the fieldset as some of the elemnts within are floated.

e.g.

fieldset{clear:both}

Also shorten your text in the legend or it will push things wide as legends are almost impossible to control.

[Paul O'B]

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.

[luciano991]

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

[cooper.semantics]

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>