SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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,165
    Mentioned
    453 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.)

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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,764
    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,165
    Mentioned
    453 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.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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,764
    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
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 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.

  10. #10
    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...

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 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.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,800
    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="^$">

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    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.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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

  15. #15
    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
  •