SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to markup a "Select"-group

    Hi,

    every time I have to markup date input-fields in a form, I'm faced with the same question: "What's the best way to bind a label to a group of select-elements?"

    'Cause basically you have this:

    HTML Code:
    <label>Your date of birth:</label>
    <label for="month">Month:</label>
    <select id="month"><!-- 12 Option-elements here please --></select>
    <label for="day">Day:</label>
    <select id="day"><!-- lots of Option-element go here --></select>
    <label for="year">Year:</label>
    <select id="year"><!-- lots of Option-elements go here --></select>
    Most of the time I hide the month-day-year labels using CSS, and only show the first label, but what should go in the "for"-attribute of that label?
    What's semantic and accessible?

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fieldset/legend?

    Or just:
    HTML Code:
    <label>Your date of birth (<kbd><var>YYYY</var>-<var>MM</var>-<var>DD</var></kbd>): <input name="dob"></label>
    Simon Pieters

  3. #3
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Fieldset/legend?

    Or just:
    HTML Code:
    <label>Your date of birth (<kbd><var>YYYY</var>-<var>MM</var>-<var>DD</var></kbd>): <input name="dob"></label>
    Maybe, but I think <select>'s are pretty accepted on the Web and therefore the first choice. Right now I'm working with Fieldset/Legend indeed. That's fairly semantic

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A set of selects aren't very usable if you happen to use a screen reader though, or so I heard.
    Simon Pieters

  5. #5
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    A set of selects aren't very usable if you happen to use a screen reader though, or so I heard.
    Also true.
    (for more info, see: http://www.brucelawson.co.uk/index.p...country-names/
    )

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used your solution. I've started to like it more and more. Thanks!

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the proper markup for a label is
    HTML Code:
    <label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10">
    If you're using XHTML, be sure to self-close the input tag by adding a forward slash (and possibly a space, to inprove readability of the source code) before the closing bracket.

    (Ize, glad to see you're using the label element properly! The above was for a reference that others can use.)

    As for marking up a select element, with its corresponding options, I'd use a fieldset and legend.
    HTML Code:
    <form name="exampleForm" action="none">
        <fieldset id="basicInfo">
            <legend>Your Contact Information</legend>
            <label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10"><br>
            <!-- other labels and input fields would go here, like the sender's email address and phone number for instance -->
        </fieldset>
        <fieldset id="recipient">
            <legend>Select Element Fieldset Example</legend>
            <select name="sendTo" id="sendTo">
                <option>Tom</option>
                <option>Richard</option>
                <option>Harry</option>
                <option>My dog Larry</option>
            </select>
        </fieldset>
        <div>
            <input id="submit" type="submit" value="Send Message">&nbsp; <input id="reset" type="reset" value="Clear Form">
        </div>
    </form>
    Multiple select elements can be marked up this way, and you can also give the fieldset a unique ID (like I did in my example, since ID is a shared attribute common to almost all (X)HTML elements).

    Also, if you're using XHTML, be sure to self-close the BR and INPUT elements (as well as other self-closing elements) by preceding the closing bracket with a forward slash (and possibly a space to inprove the readability of the source code)

    For accessibility purposes, I think you have to declare a tab order for each of your fieldsets so that people who aren't using (or capable of using) a computer mouse can still navigate through your form (you can probably tell I didn't get a lot of sleep last night, which is why my memory is failing me )

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Actually, the proper markup for a label is
    HTML Code:
    <label for="yourName">Your Name</label><input name="yourName" id="yourName" type="text" size="10">
    No, it's not "The" proper markup; it's an alternative equally proper way to mark it up. HTML specifies two ways to associate a label with a form control; implicitly (nesting the form control in the label) or explicitly (using for=""). One is not more proper than the other (although IE6 only supports explicit labels for clicking).
    Quote Originally Posted by Dan Schulz
    For accessibility purposes, I think you have to declare a tab order for each of your fieldsets so that people who aren't using (or capable of using) a computer mouse can still navigate through your form (you can probably tell I didn't get a lot of sleep last night, which is why my memory is failing me )
    There already is a tab order. When the tabindex="" attribute is used you mostly make the tab order different than the default, which confuses the user. (In particular, elements with tabindex are focused before all other focusable elements, regardless of where they are put in the source.) Therefore I'd advice against using tabindex="" and instead make sure the source order is logical.

    In any case tabindex="" is not a valid attribute for FIELDSET in HTML4.
    Simon Pieters


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
  •