SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantic Markup for Checkboxes and Radios

    Hi all,

    Quick question - what is the semantically correct way to mark up radio buttons and check boxes? Effectively I'm wondering where the label tag fits?

    Cheers,

    DM

    PS - I obviously searched for this but the SERPS are terrible on the topic.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!--Checkbox-->
    <input type="checkbox" value="yes" name="choice" id="choice">
    <label for="choice">I choose</label>
     
    <!--Radio buttons-->
    <input type="radio" value="first" checked name="choices" id="choice-first">
    <label for="choice-first">First choice</label>
     
    <input type="radio" value="second" name="choices" id="choice-second">
    <label for="choice-second">Second choice</label>

    Convention dictates that the labels appear to the right of the checkbox/radio button in a left-to-right reading environment.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tommy - appreciated.

    DM

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Code HTML4Strict:
    <!--Checkbox-->
    <input type="checkbox" value="yes" name="choice" id="choice">
    <label for="choice">I choose</label>
     
    <!--Radio buttons-->
    <input type="radio" value="first" checked name="choices" id="choice-first">
    <label for="choice-first">First choice</label>
     
    <input type="radio" value="second" name="choices" id="choice-second">
    <label for="choice-second">Second choice</label>

    Convention dictates that the labels appear to the right of the checkbox/radio button in a left-to-right reading environment.
    HTML God!
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fo further expand on this...To label a group of radio buttons, or check boxes, I always use a paragraph.

    Code HTML4Strict:
    <p>Is oxygen essential to human life on earth?</p>
    <input type="radio" value="yes" name="choices" id="oxygen-yes">
    <label for="oxygen-yes">Yes</label>
     
    <input type="radio" value="no" name="choices" id="oxygen-no">
    <label for="oxygen-no">No</label>
    Last edited by Iceman90; Feb 25, 2009 at 02:05. Reason: Fixed the duplicated checked attributes

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that's semantically appropriate. To group form fields, use a fieldset:
    Code HTML4Strict:
    <fieldset>
      <legend>Is oxygen essential to human life on earth?</legend>
     
      <input type="radio" value="yes" checked name="oxygen" id="oxygen-yes">
      <label for="oxygen-yes">Yes</label>
     
      <input type="radio" value="no" name="oxygen" id="oxygen-no">
      <label for="oxygen-no">No</label>
    </fieldset>
    (BTW, both radio buttons were marked as checked in your example. )
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You can't use a non-form element anyway if you want screen readers in Forms Mode to list them.

    What you would hear in JAWS is just the individual check/radios and their respective labels.

    I've struggled with this for a long time. Currently, I'm doing this:

    (sometimes a legend if it's short)
    otherwise
    <label>Is oxygen essential to human life on earth?</label>
    <label for="oxyyes"><input type="radio" name="oxygen" id="oxyyes" value="ja"></label>
    <label for="oxyno"><input tpye="radio" name="oxygen" id="oxyno" value="nee"></label>

    An unnamed unaffiliated label will at least get read out. The problem with legends is sometimes the question needs to visually match up with all the others (who are likely labels) and legends simply can't be positioned correctly (nor styled well) cross-browser. Esp Firefox : ( I hate that browser when it comes to forms and tables.

    Another option is, again only if it's short, use a legend who's set off-screen (so still read out) and then a <p> for the sighted visitors.

    <fieldset>
    <legend>Is oxygen essential to human life on Earth?</legend>
    <p>Is oxygen essential to human life on earth?</p>
    radio/labels...

    Usually the question is too long for legend though : ( JAWS for instance will read out the whole dang thing for each and every question inside an inner/nested fieldset.

    In which case you may still have an inner fieldset for those questions, but you'll still have something like an unnamed label for the full question.
    <label for="machtiging">Indien dit wordt gedaan met een ART-Slot, wat is het type?</label>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    (tpye changed to type)
    Quote Originally Posted by Stomme poes View Post
    Currently, I'm doing this:

    (sometimes a legend if it's short)
    otherwise
    <label>Is oxygen essential to human life on earth?</label>
    <label for="oxyyes"><input type="radio" name="oxygen" id="oxyyes" value="ja"></label>
    <label for="oxyno"><input type="radio" name="oxygen" id="oxyno" value="nee"></label>
    Question: I presume that the radio labels that aren't there, should be there?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah, after the input and before the closing </label> tag, lawlz. Thanks for catching that. I also add a space between the end of the input and beginning of the label text-- every browser so far has done well with that, so I've been using that instead of the nonbreaking space. CSS right margin on the input itself takes care of any other needed spacing.

    Code:
    <label for="oxyyes"><input type="radio" name="oxygen" id="oxyyes" value="ja"> Yes</label>
    <label for="oxyno"><input type="radio" name="oxygen" id="oxyno" value="nee"> No</label>


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
  •