Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Radio Buttons -> Confused 2

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
How do you correctly code a toggle radio button.

you can't give them the same id , you have to give them the same name, but the <label for=""> is talking to the ID.

and i want them to have a 'yes' & 'no' label.

I'm confused how you acheive this.

Thanks,

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
There are 2 supported syntaxes for addressing radio buttons from labels. The first you've spotted - with IDs:

Code: 
<label for="someRadioId1">Yes</label>
<input id="someRadioId1" name="myRadioGroup" value="y" />

<label for="someRadioId2">No</label>
<input id="someRadioId2" name="myRadioGroup" value="n" />

The second is where you don't need IDs, but you wrap the input in the label:

Code: 
<label><input name="myRadioGroup" value="y" /> Yes</label>

<label><input name="myRadioGroup" value="n" /> No</label>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
thanks dan, though is it not expected for you to supply the for="inputID" , to the label tag to meet X/HTML 1.1 ?

i've ended up giving them the same name and different id's , which I'm assuming is the correct way to do it.

It will then mean having to grab element by tagName (is that the correct syntax?) any way what I meant was instead of using ById , which I normally would use.

hmmm these toggle radio buttons are tricky to work with and stay 100% compliant.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
for the first example, i think that the "for" has to match the "id". otherwise it won't work i think

________________________________
Top 10 reasons to procrastinate:
1)
 
Upvote 0 Downvote
1dmf, pasting this into the w3c validator passes validation just fine [thumbsup2]
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>

<div>
   <label>
      Radio label test
      <input type="radio" name="blah" value="1" />
   </label>
</div>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
cool, so what purpose does for="InputID" serve , is this an accessability issue?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Possibly for accessibility, possibly for positioning. If you have your label seperate from the radio button you could click either using for:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>

<div>
   [!]<label for="blah">Radio test</label>[/!]
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
   <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
   <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
   [!]<input type="radio" id="blah" name="blah" value="1" />[/!]
</div>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
well what do you know, never realised you can click the label to activate the input element.

Now i get ya, many thanks Kaht!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
contact form buttons not right on iPhone 4 HTML/CSS 2
Replies
9
Views
209
pendle666
pendle666
1DMF
  • Locked
  • Question
HTML5 -&gt; 'input' tag -&gt; 'accept' attribute 1
Replies
5
Views
144
vacunita
vacunita
1DMF
  • Locked
  • Question
What HTML5 tag is &lt;note_h1&gt;? 2
Replies
6
Views
120
1DMF
1DMF
k4ghg
  • Locked
  • Question
&lt;ul&gt; and &lt;li&gt; Spacing 3
Replies
9
Views
169
k4ghg
k4ghg
greathope123
  • Locked
  • Question
&lt;!DOCTYPE html&gt; and extra space under a .gif
Replies
4
Views
125
greathope123
greathope123

Part and Inventory Search

Sponsor

Back
Top