Help Needed with Radio Buttons!

[moniquedbabin79]

Hello,

I can't figure out why my radio buttons aren't working properly. For some reason, the way I have them coded allows that they can all be selected at once. As I understand it, when I select one, any button that's already selected should deselect. Does anyone have any idea why my code allows them to all be selected at once?

I'm working on this for an assignment, and I have to include all of the attributes that are included here ("label for," "id," "name," etc. . . . . I realize that some of this may seem superfluous). Here's the code for my buttons:

<label for="proofType">Proofreading</label>
<input type="radio" id="proofType" name="proofType"
value="proofreading" />
</label>


<label for="editType">Editing</label>
<input type="radio" id="editType" name="editType"
value="editing" />
</label>

<label for="writeType">Writing</label>
<input type="radio" id="writeType" name="writeType"
value="writing" />
</label>

<label for="webType">Web Design</label>
<input type="radio" id="webType" name="webType"
value="web" />
</label>

<label for="instructionType">Instruction/Instructional Design
</label>
<input type="radio" id="instructionType" name="instructionType"
value="instructional" />
</label>

Here's a link to the page with the form that contains the radio buttons:

http://mdbabin.x10hosting.com/week7/jobs.htmhttp://mdbabin.x10hosting.com/week7/jobs.htm

This is definitely a work in progress. It's my first site ever, and I'm learning as I go!

Any help that anyone has to offer is much appreciated!

Thanks so much!

M.B.

 

[misson]

Please use

, [php] or [code] tags (as appropriate) to separate and format code.

As per the HTML spec (specs are one of the first places you should check if something isn't working as you expect), [URL="http://www.w3.org/TR/html401/interact/forms.html#radio"]radio buttons[/URL] are grouped by [URL="http://www.w3.org/TR/html401/interact/forms.html#control-name"]control name[/URL]. Only radio buttons in the same group have mutually exclusive selection. Yours all have different names, hence are in different groups.

Nice issue write-up, by the way. You state what you expect to happen, what actually happened, and included a minimal (concise) test case. Just the sort of things we look for when solving a problem.

 

[moniquedbabin79]

Thank you so much for the speedy reply! Your instructions worked perfectly! As I'm still learning, I mixed up that the id tags could be different while the name tags *must* remain the same in any given group, for radio buttons . . . and I'm guessing, for checkboxes too.

My textbook and teacher are very particular about having id attributes on these items in addition to the name attribute. I'm guessing that I will understand why as I learn more about forms.

I also noticed later that I had included closing </label> tags where non were needed. Oops!

It's so nice to have a forum where I can get some advice when I need it--a real lifesaver! I hope that, as I learn more, I will be able to come here to *answer* some questions too!

Thanks again!!!!

M.B.

P.S. Here's a link to the improved form if anyone cares to see it: http://mdbabin.x10hosting.com/week7/jobs.htm

As for the

 tags vs. [php] and [code] tags, I can see that I'm going to have to go back and study some more.  I'm pretty sure that we haven't learned [php] just yet.  In fact, I'm not finding much about it in my text.  The instructor is asking us to use the "mailto" action with the form instead of sending form data to a url/server.  I wonder if that's why we haven't yet discussed php?  Hmmm . . . .

Well, thanks again for the help!

 

[AngusThermopyle]

id's are supposed to be unique to the page. If you have a checkbox with id="foo" , you should not have another checkbox with id="foo" or a div with id="foo" or an image with id="foo" .

That way you can find exactly what you want by using the id.

 

[misson]

Thank you so much for the speedy reply! Your instructions worked perfectly! As I'm still learning, I mixed up that the id tags could be different while the name tags *must* remain the same in any given group, for radio buttons . . . and I'm guessing, for checkboxes too.

To expand on c.solomon's post, the name attribute doesn't have to be unique, for any control. You could have multiple text inputs, all with the same name. As a point of interest, PHP's use of array syntax in names to create arrays relies on this. However, mutually exclusive selection within a named group is only a feature of radio buttons.

<form>
  <fieldset>
    <legend>Colors</legend>
    <input type="checkbox" name="colors[]" value="red" id="color_red" /> <label for="color_red">Red</label>
    <input type="checkbox" name="colors[]" value="blue" id="color_blue" /> <label for="color_blue">Blue</label>
    <input type="checkbox" name="colors[]" value="green" id="color_green" /> <label for="color_green">Green</label>
    <input type="checkbox" name="colors[]" value="yellow" id="color_yellow" /> <label for="color_yellow">Yellow</label>
  </fieldset>
</form>

IDs and names are in the same namespace (at least, they are for anchor elements and thus for fragment identifiers), so if you've given a particular name to one element, that name shouldn't be the ID of any other element. Note that an element's name and ID can differ (sometimes this is necessary, as when using array syntax for forms handled by PHP).

<!-- Bad. -->
<input name="foo" />
<input id="foo" />

<--! Fine. At times, necessary -->
<input id="bam" name="bug-AWWK!" />

My textbook and teacher are very particular about having id attributes on these items in addition to the name attribute. I'm guessing that I will understand why as I learn more about forms.

<label>'s for attribute targets the ID attribute of form elements, but not the name. Another reason is so you can refer to specific elements within Javascript or XPath.

I also noticed later that I had included closing </label> tags where non were needed. Oops!

Your first posting was right. While you could use self-closing <label> tags (e.g. "<label for='password' />"), they wouldn't work properly. The text content of a label is the value of the label; a self-closed label element essentially has no label text. Labels are particularly important for screen readers, so that people with impaired vision can still fill out the form.

As for the

 tags vs. [php] and [code] tags, I can see that I'm going to have to go back and study some more.  I'm pretty sure that we haven't learned [php] just yet.[/QUOTE]

Square-bracketed tags are [URL="http://en.wikipedia.org/wiki/BBCode"]BBCode[/URL], used by some forums (e.g. phpBB, vBulletin). They're not part of any standard, W3C or otherwise. In the "advanced" editing mode, you should see the [IMG]http://x10hosting.com/forums/images/custom/vuel/editor/html.png[/IMG] and [IMG]http://x10hosting.com/forums/images/custom/vuel/editor/php.png[/IMG] buttons, which will insert the tags for you.

 

[AngusThermopyle]

Your first posting was right.

<label for="proofType">Proofreading</label>
<input type="radio" id="proofType" name="proofType"
value="proofreading" />
</label>

No, he closed the tag twice each time.

 

[essellar]

Besides the screen-reader issue, labels increase the usability of radio buttons and checkboxes for people with fine motor control issues and those using touch screens, since the label text becomes an extension of the selectable area for the element. (As a sufferer of a Parkinson's-like condition, I can assure you that those little circles and squares are a real son-of-a-bee to click on. Labels: they're a a Good Thing.)

 

[moniquedbabin79]

@ c.soloman: Yes, thank you. I'm just figuring that out, which means that I have quite a bit of work to do on my pages--swapping some ids for classes. Fun, fun! And you're right, I closed the label tag twice on my first go at it (a bad copy/paste job).

@ mission: Thank you so much for the additional info. on names, ids, labels, and php. This is really going to help me a lot as I try to step up to the next level in HTML/XHTML. There's so much to learn! I'll be digesting your reply for a while. Wonderful info!

@ esselar: Thanks for confirming that I'm doing the right thing by spending a little extra time to make my pages more accessible. It's nice to be working from a textbook that reminds me of accessibility issues every step of the way.

Cheers to all!

 

[misson]

No, he closed the tag twice each time.

Indeed. Next time, I'll take a closer look at the code.

[...] since the label text becomes an extension of the selectable area for the element.

A quick test shows that this only works in most (all?) browsers when inputs have an ID, and the label targets it. In summation, moniquedbabin79, IDs on inputs are essential for accessibility. It falls in the overlap between human accessibility and machine accessibility, which also known as the semantic web.

 

[purple_banana_ftp87]

Mabey by switching the the classign view then click controls then the icon should be a little round thing, Press and drag it onto page. Congratulations, You have made you first radio button!

 

[misson]

Please don't revive dead threads.

OP's problem wasn't creating radio buttons, but getting them to group so only one would be checked at a given moment, so I don't see how your post helps.