SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Labels and Radio Buttons

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

    For example, here I did not do that...
    HTML Code:
    	<!-- 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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Something like this might be better:

    Code:
    <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.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Something like this might be better:

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

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Something like this might be better:

    Code:
    <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...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...
    PHP Code:
        <!-- 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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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...

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks for that, Paul. Very interesting.

    Quote Originally Posted by deathshadow60 View Post
    I guess if the element is really small (checkbox/radio button) and you suck with a mouse... maybe...
    Maybe I'm just lazy.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    $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.


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
  •