SitePoint Sponsor

User Tag List

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

    Embedded Labels??

    When it comes to drop-down boxes, is it ever okay to remove the label, and just embed the label inside the drop-down?

    For example...
    HTML Code:
    	<select id='commentAgree' name='commentAgree'>
    		<option value=''>Do you agree?</option>
    		<option value='1'>Yes</option>
    		<option value='0'>No</option>
    	</select>

    My form is limited on space, and such an approach would save me lots of space!!


    I sorta like the way it looks, but can also see where it would be confusing... (And it might also be evil when it comes to accessibility?!)

    Sincerely,


    Debbie

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Guessing that this is related to your other question regarding the use of a drop-down, rather than radio buttons, have you considered this approach?

    Code html4strict:
    <label for="post_{post_number}_yes">
     <option type="radiobutton" name="post_{post_number}" value="yes" id="post_{post_number}_yes"> <img src="/images/yes.png" height="" width="" alt="I agree">
    </label>
    <label for="post_{post_number}_no">
     <option type="radiobutton" name="post_{post_number}" value="no" id="post_{post_number}_no"> <img src="/images/no.png" height="" width="" alt="I disagree">
    </label>

    If you use a 10x10 pixel image, this shouldn't take up any more space than the dropdown option.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Guessing that this is related to your other question regarding the use of a drop-down, rather than radio buttons,
    All part of my last module before I go live, yes.


    Quote Originally Posted by C. Ankerstjerne View Post
    have you considered this approach?

    Code html4strict:
    <label for="post_{post_number}_yes">
     <option type="radiobutton" name="post_{post_number}" value="yes" id="post_{post_number}_yes"> <img src="/images/yes.png" height="" width="" alt="I agree">
    </label>
    <label for="post_{post_number}_no">
     <option type="radiobutton" name="post_{post_number}" value="no" id="post_{post_number}_no"> <img src="/images/no.png" height="" width="" alt="I disagree">
    </label>

    If you use a 10x10 pixel image, this shouldn't take up any more space than the dropdown option.
    Sorry, but I'm not sure what that would do...

    It looks like you are toggling between an image of the label/question and the drop-down?

    If so, I don't see how that really is any different from my "Embedded Label" idea.

    BTW, I think I found a way to cram a Label and the Drop-down into the little space I have, but nonetheless, I would be curious if my "Embedded Label" has any merits?!

    Thanks,


    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You could include the label in the HTML but move it off screen for sighted users. Then screen readers see it. I sometimes make the first option the actual question, as well. I don't really see a problem with it, although you have to set it up carefully so that you understand the resut that comes through—such as what you see in the results if a choice isn't made.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could include the label in the HTML but move it off screen for sighted users. Then screen readers see it. I sometimes make the first option the actual question, as well. I don't really see a problem with it, although you have to set it up carefully so that you understand the resut that comes through—such as what you see in the results if a choice isn't made.
    So what do you think about my sample code in my OP?

    As long as my PHP looks for a 0 or 1, it should be fine.


    Although, like I said above, I think I prefer having normal labels when possible.

    Sincerely,


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So what do you think about my sample code in my OP?
    Not having a value on the first option looks like a problem to me.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not having a value on the first option looks like a problem to me.
    Why??

    PHP Code:
    if ($commentAgree ==1){
        
    // Handle Yes

    }elseif ($commentAgree ==2){
        
    // Handle No

    }else{
        
    // Display "Choose a value"



    Debbie

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Sorry, but I'm not sure what that would do...

    It looks like you are toggling between an image of the label/question and the drop-down?
    My apologies. I seem to have had a brain failure. This is what I meant:
    Code html4strict:
    <label for="post_{post_number}_yes">
     <input type="radiobutton" name="post_{post_number}" value="yes" id="post_{post_number}_yes"> <img src="/images/yes.png" height="" width="" alt="I agree">
    </label>
    <label for="post_{post_number}_no">
     <input type="radiobutton" name="post_{post_number}" value="no" id="post_{post_number}_no"> <img src="/images/no.png" height="" width="" alt="I disagree">
    </label>


    As long as my PHP looks for a 0 or 1, it should be fine.
    Technically, yes, but remember that '' and 0 are equal in PHP, i.e., false, when you do an equal (==) comparison. You would need to do an identical (===) comparison. Unless the number has a semantic meaning, e.g., being used directly to calculate a score for each post, I would recommend using an alternative scheme, such as 'yes' and 'no', or 'agree' and 'disagree'. This will also make code maintenance much easier.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


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
  •