Labels and Radio Buttons

[DoubleDee]

Do you have to wrap the Text associated with *each Radio Button* in a <label> tag?

For example, here I did not do that...

	<!-- Gender -->
	<label for="gender">Gender:</label>
	<input type="radio" name="gender" value="F" <?php echo (isset($gender) && $gender == "F") ? 'checked="checked"' : ''; ?>/> Female
	<input type="radio" name="gender" value="M" <?php echo (isset($gender) && $gender == "M") ? 'checked="checked"' : ''; ?>/> Male

(As you can see, I just used the <label> tag for the Radio Button Group...)

Also, what happens if you don't have an id= for each Radio Button?

Thanks,


Debbie

[ralph.m]

Something like this might be better:

<fieldset>
      	<legend>Gender:</legend>
	<input type="radio" name="gender" id="bloke" value="M">
	<label for="bloke">Male</label>
        <input type="radio" name="gender" id="sheila" value="F">
	<label for="sheila">Female</label>
</fieldset>

You really should have a label with each input, and the for/id pair is needed for accessibility. (It's nice for anyone, as it means you can click on the label to activate the radio.)

[DoubleDee]

Something like this might be better:

<fieldset>
      	<legend>Gender:</legend>
	<input type="radio" name="gender" id="bloke" value="M">
	<label for="bloke">Male</label>
        <input type="radio" name="gender" id="sheila" value="F">
	<label for="sheila">Female</label>
</fieldset>

You really should have a label with each input, and the for/id pair is needed for accessibility. (It's nice for anyone, as it means you can click on the label to activate the radio.)

Good thing I asked.

Thanks Ralph!!


Debbie

[DoubleDee]

Something like this might be better:

<fieldset>
      	<legend>Gender:</legend>
	<input type="radio" name="gender" id="bloke" value="M">
	<label for="bloke">Male</label>
        <input type="radio" name="gender" id="sheila" value="F">
	<label for="sheila">Female</label>
</fieldset>

You really should have a label with each input, and the for/id pair is needed for accessibility. (It's nice for anyone, as it means you can click on the label to activate the radio.)

Just for reference, on a regular Text Box Input, what do you match the for= in the <label> against in the <input>??

Is it the name= or the id= also?


Debbie

P.S. SitePoint should their HTML Reference section to clearly state this...

[ralph.m]

Just for reference, on a regular Text Box Input, what do you match the for= in the <label> against in the <input>??

Is it the name= or the id= also?

for="" always matches with id="". The name="" is for the data passed to the processing script.

[DoubleDee]

for="" always matches with id="". The name="" is for the data passed to the processing script.

Okay, thanks for straightening that out for me, Ralph!


Debbie

[DoubleDee]

Okay, Ralph, now that we have the basics out of the way, here is something a little trickier...

The script I am working on is supposed to display all "Friend Requests" for the logged in User to Approve/Decline/Decide Later...

The structure I chose is an Unordered List, and my code will loop through all Requests in the database and attempt to display them like this...

    <!-- Request 1 -->
    <li>
        <a href="">
            User1<br />
            <img src="/uploads/NoImage2_100x77.png" width="100" alt="Thumbnail of User1" />
        </a>

        <!-- Choices-->
        <fieldset id="requestResponse">
            <input id="rad1" name="requestResponse1" type="radio" value="0" 
            <?php echo (isset($requestResponse1) && $requestResponse1 == "0") ? 'checked="checked"' : ''; ?> />
            <label for="rad1">Decide Later</label>

            <input id="rad2" name="requestResponse1" type="radio" value="1" 
            <?php echo (isset($requestResponse1) && $requestResponse1 == "1") ? 'checked="checked"' : ''; ?> />
            <label for="rad2">Accept</label>

            <input id="rad3" name="requestResponse1" type="radio" value="2" 
            <?php echo (isset($requestResponse1) && $requestResponse1 == "2") ? 'checked="checked"' : ''; ?> />
            <label for="rad3">Decline</label>
        </fieldset>
    </li>

Questions:

1.) Does the code I have above look correct if there was just one User Friend-Request? (I believe it follows the style you mentioned earlier...)


2.) What are you supposed to call your ID's??

I have seen lots of examples that just do what I have, but I prefer giving things *meaningful* names when possible...


3.) What should "name" be across several groups of 3-Radio Buttons?

Should it be "requestResponse1", "requestResponse2", "requestResponse3" ?


4.) What should my "id" be across several groups of 3-Radio Buttons?

I assume each one must be unique on my page, right?


5.) Is it okay to have a <fieldset> around my entire Form and also around each Radio-Button-Set?

Thanks,


Debbie

[ralph.m]

1.) Does the code I have above look correct if there was just one User Friend-Request? (I believe it follows the style you mentioned earlier...)

Seems OK to me, but perhaps await other replies. (Same applies to the following ...)

2.) What are you supposed to call your ID's??

wotevah you like.

3.) What should "name" be across several groups of 3-Radio Buttons?

Should it be "requestResponse1", "requestResponse2", "requestResponse3" ?

Again, it sup to you.

4.) What should my "id" be across several groups of 3-Radio Buttons?

I assume each one must be unique on my page, right?

Again, up to you, but yes, the rule that they must be unique still applies.

5.) Is it okay to have a <fieldset> around my entire Form and also around each Radio-Button-Set?

I'm not totally sure if nesting fieldsets is against the rules or not, but I suspect it is, and I'd definitely say don't do that. The fieldset is just to create logical groups of form fields. So I'd think that it would just confuse things badly to nest them.

[deathshadow60]

Don't feel bad about not getting the difference between NAME and ID right away -- a lot of people even after being told a dozen times still don't get it.... drives me nutters when working with certain people's code.

One thing a friend pointed out to me just a couple weeks ago I never noticed you may find interesting/useful -- if you have a proper for/id relationship between a label and it's input, clicking on the label has the same effect as clicking on the input. I never even noticed that behavior, and it works all the way back to IE 5.

[ralph.m]

if you have a proper for/id relationship between a label and it's input, clicking on the label has the same effect as clicking on the input. I never even noticed that behavior, and it works all the way back to IE 5.

Be darned. That's the first thing I noticed about it ... or was told about it. I almost always just click on the label when filling out forms—or just tab through them, which has the same effect.

[deathshadow60]

Be darned. That's the first thing I noticed about it ... or was told about it. I almost always just click on the label when filling out forms—or just tab through them, which has the same effect.

Not something I'd even think of -- when I want to select an element I click on the element, not the text next to it... clicking on the text next to it doesn't make any sense to me.

But it must to some people... I guess if the element is really small (checkbox/radio button) and you suck with a mouse... maybe...

[Paul O'B]

I'm not totally sure if nesting fieldsets is against the rules or not, but I suspect it is, and I'd definitely say don't do that. The fieldset is just to create logical groups of form fields. So I'd think that it would just confuse things badly to nest them.

Nested fieldsets are valid (with legends of course) and are sometimes useful for creating sub groups within a logical group.

Have a look at this very very old (and extreme) example (excuse the use of p elements as I don't use them any more to wrap form elements). It is perhaps even easier to see the usefulness of this form if you turn styles off (use the option at the top) and then the structure becomes very clear.

However, in most simple forms you probably would not need to nest very often.

[ralph.m]

Thanks for that, Paul. Very interesting.

I guess if the element is really small (checkbox/radio button) and you suck with a mouse... maybe...

Maybe I'm just lazy.

[DoubleDee]

Nested fieldsets are valid (with legends of course) and are sometimes useful for creating sub groups within a logical group.

Have a look at this very very old (and extreme) example (excuse the use of p elements as I don't use them any more to wrap form elements). It is perhaps even easier to see the usefulness of this form if you turn styles off (use the option at the top) and then the structure becomes very clear.

However, in most simple forms you probably would not need to nest very often.

Paul,

What did you think about my code above?

Does it look okay?

Thanks,


Debbie

[Paul O'B]

Hi,

The html looks ok to me as there's not really that much there.

I'm sure Jason @deathshadow60 could comment on the php.

[DoubleDee]

Hi,

The html looks ok to me as there's not really that much there.

Okay, thanks.

I'm sure Jason @deathshadow60 could comment on the php.

Well, I'll wait until things settle with my HTML/CSS before I ask for any help on the PHP.

Thanks,


Debbie

[felgall]

NBut it must to some people... I guess if the element is really small (checkbox/radio button) and you suck with a mouse... maybe...

Everywhere else other than web pages you have always been able to click on the text in order to select a checkbox or radio button. HTML forms were the ones missing that standard functionality prior to the introduction of the label tag. That was the first thing I noticed about HTML forms - that the radio button text was broken in early browsers because it didn't select the button for you when you clicked on it

[deathshadow60]

I'm sure Jason @deathshadow60 could comment on the php.

Markup looks fine -- apart from the bug triggering comments (in particular comments between LI is just /FAIL/) the multiple 'let's open and close php on every line' are rubbish, but again I'm the guy who would like to see <?php and ?> removed from PHP altogether so... It's just sloppy coding.

Also since those elements are all alike, I'd put the options in a list and iterate the list to output them.

Something like:

$response=array(
	'0' => 'Decide Later',
	'1' => 'Accept',
	'2' => 'Decline'
);

echo '
	<li> 
		<a href="#"> 
				User1<br /> 
				<img src="/uploads/NoImage2_100x77.png" width="100" alt="Thumbnail of User1" /> 
		</a> 

		<fieldset id="requestResponse">';
		
foreach ($response as $value => $label) {
	echo '
		<input type="radio" id="rad_',$value,'" name="requestResponse1"  value="',$value,'",(
			(isset($requestResponse1) && $requestResponse1==$value) ? ' checked="checked"' : ''
		),' />
		<label for="rad_',$value,'">',$label,'</label>';
}
echo '
		</fieldset> 
	</li>';

Which knocks 400 bytes off the code, is still plenty clear, and is easier to add/remove buttons to.