SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Sydney, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Form design - small descriptive text under label?

    Am surprisingly stumped by this one.

    On my forms below the actual label for text boxes, I want to add smaller descriptive text of what each field is. So something like Name < br /> Enter your username to access the site, and then to the right have the text box for the username.

    Hope that makes sense
    www.scaryminds.com ScaryMinds - horror's last colonial outpost.

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put "Enter your username to access the site" between spans and then style those spans accordingly. So like this:
    Code:
    <label>Name<span>Enter your username to access the site</span></label> <input name="username" type="text">

  3. #3
    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)
    Pamela's method is good, because it means those using a screen reader will hear the message before they fill in the field.

    However, my question would be, how does this:

    Enter your username to access the site
    help your users? Isn't that obvious anyway, as that's commonly understood to be the point of a username.

    Another option worth considering if you are using an HTML5 doctype and don't mind this not working in older browsers is to use placeholder text:

    Code:
    <label>Name</label> 
    <input name="username" type="text" placeholder="Username for site access">
    but again, that seems a bit obvious anyway. For wider support, you can use JavaScript for this.
    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."

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Another method, which is somewhat less accessible because it relies on a newer technology, is to have hint text under or above the input, linked to the input via aria-describedby.

    Code:
    <label for="username">Username: </label>
    <input name="username" id="username" aria-describedby="username_hint">
    <p id="username_hint">Usernames are limited to letters, numbers and underscores. No spaces please.</p>
    The p could be a span if your hint is really more of a fragment or you want your label-input pairs to sit next to an inline element.

    Don't confuse aria-describedby with aria-labelledby (and note the spelling for that... that's TWO l's). Aria-labelledby will override your real label, which you generally don't want. You merely want your hint to be associated with the input.

    Anyway, this method is not preferred over the text-in-the-label method above, which works with older browsers and Accessibility Technology (though I would have a space character between the label text and span text there, or you'll get "NameEnter your username..." read out), but having the hint text separate does allow you a bit more freedom in positioning, if you wanted the hint text right above or below the input, which is something I see commonly (also error messages).

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Usually sites put the message under the input rather than the label which although removes it from the label does make it easier to see but of course is not quite so good for accessibility as having it in the label itself.

    As Ralph said you really only want message when the input is not clear. I've added messages to the following example which was constructed for a previous thread as an example of something

    http://www.pmob.co.uk/temp/form-inli...ck-errors2.htm
    (View source as the code is all in the head)

    To save real estate you could hide the message initially and show it on hover like so:
    http://www.pmob.co.uk/temp/form-inli...ck-errors3.htm

    With the last example you could actually place the text back into the label in a span and hide and show it just the same- I'm not sure why I didn't do that originally

    The placeholder attribute Ralph mentioned is good for hints also but note that it should never be used as an alternative to the label.

  6. #6
    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)
    Nice links, Paul I've just been looking at form design, with a list off error messages and links to the offending fields. One thing I notice is that clicking those error links doesn't lead to the label or input that needs to be changed gaining focus. I'm sure Ive read how to do that ... must look it up again. @Stomme poes ; Are you going to resurrect your form pages on your site?
    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."

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nice links, Paul I've just been looking at form design, with a list off error messages and links to the offending fields. One thing I notice is that clicking those error links doesn't lead to the label or input that needs to be changed gaining focus. I'm sure Ive read how to do that ... must look it up again. @Stomme poes ; Are you going to resurrect your form pages on your site?
    You can use target to highlight the input but you will need js to put the focus in there.

    Code:
    input[type=text]:target { background:#e4f0f8 }

    I've added some jquery to provide the focus and a scroll to the element to the demos.
    http://www.pmob.co.uk/temp/form-inli...ck-errors2.htm
    http://www.pmob.co.uk/temp/form-inli...ck-errors3.htm

  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)
    Nice work, Paul. It would be nice if it could work without JS. I was hoping you could go to the form element, fill it in, and press the back button to go to the next error. Seems this can't be done with HTML alone.

    I've been reading up, and it seems a viable alternative is to use PHP to refresh the page with only the form elements that need to be corrected, the correct answers already stored. Seems a good alternative. Presumably the user can press the Back button to see the whole form instead. (I'm about to test out this theory.)
    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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Presumably the user can press the Back button to see the whole form instead. (I'm about to test out this theory.)
    Good luck

    The back button seems to break most forms or you end up paying for something twice.

  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 Paul O'B View Post
    The back button seems to break most forms or you end up paying for something twice.
    Yeah, I'm just thinking of a simple contact form. You can usually click the Back button to see the form again and correct any errors.
    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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph
    Are you going to resurrect your form pages on your site?
    Yeah. Still working on it; one of my last pages to redo partially because of all the new ARIA stuff coming out :) In the meantime, Marco Zehe has some "ARIA-tips" on his English blog that are really great. Also some good ARIA stuff on Paciello Group's blog, mostly written by Steve Faulkner.

    Quote Originally Posted by Ralph
    One thing I notice is that clicking those error links doesn't lead to the label or input that needs to be changed gaining focus. I'm sure Ive read how to do that ...
    I have had the generated error page add in anchors as destinations right above the label. You can't know if a screen reader will read out the label when there is focus brought to the input; some do, some don't. So I try to use something before the input when building a skip list. I think Paul's idea could be an option, but mostly because we'd be assuming the user was on a list link which described the error and field in the first place.

    Quote Originally Posted by Paul
    The back button seems to break most forms or you end up paying for something twice.
    Because they were evil and silly and didn't use POST-Redirect-GET :)

  12. #12
    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 Stomme poes View Post
    I have had the generated error page add in anchors as destinations right above the label.
    Unless I'm missing something, when I click links like that and then start tabbing, the tabbing starts from the original link, rather than the spot where I've jumped to on the page. Can the focus move to the element that's jumped to?
    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."

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ralph: what you're experiencing is a webkit bug from at least since 2008. All other browsers will move the keyboard focus to the skip area like they should :) Of course, Hixie claims exactly the opposite (that most browsers don't move the keyboard focus), which completely contradicts reality as usual. Also, I know Joanmarie Diggs had filed a similar bug when investigating moving Orca functionality from Gecko-based programs (Firefox, Thunderbird) to webkit-based programs (increasingly more on Gnome, such as Epiphany browser) which might have been flagged as duplicate by the webkit bot but not sure.

    This does mean VoiceOver users need to use something else to get their focus directly to the inputs. The only good thing I can say is that VoiceOver users (who are pretty much stuck with Safari unless very recent versions have started working with Firefox/Mac) have always dealt with this in whatever way they do, and having the skip list above the form won't add any additional confusion for them. Also, VO users on iThings have some kind of web page rotor something-something... you probably know what it is, it lets iThing users jump around pages... which is accessible to everyone and VO works with it as well. VO users such as Marco Zehe have commented on the usefulness of it, and likely would be used by experienced iThing users to jump to the form itself, if not the particular input in question.

  14. #14
    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 Stomme poes View Post
    what you're experiencing is a webkit bug from at least since 2008.
    Ah, thanks for pointing that out. I have recently switched to Chrome. Amazing they still haven't addressed this.

    you probably know what it is, it lets iThing users jump around pages...
    Hm, no, I'll have to check it out. I haven't played much with it so far. Too much else to do.
    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."

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Apparently you have to turn it on: http://www.tcgeeks.com/ipad-ios-4-2-new-features/ search for web rotor. I thought it was something iThing people used in general since mobiles don't have Home and End buttons.


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
  •