SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Sydney, Australia
    Posts
    153
    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.skinbydragonfly.com Completing your IPS community with style.

    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
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 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.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 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
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 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?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 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
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 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.)

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 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.


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
  •