SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <input type="checkbox"> within <legend>

    What I want to do is include a checkbox within my legend tag that will trigger a javascript function to toggle the display of the contained content.

    Is this a massive semantic faux-pas that I should steer clear of?

    There's no reason why I can't place the checkbox within the fieldset instead if necessary.

  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)
    It's quite valid, and I've done it on a few occasions. Perhaps not a best practice from a usability point of view, but I don't think it's something you need to lose sleep over, either.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's quite valid, and I've done it on a few occasions. Perhaps not a best practice from a usability point of view, but I don't think it's something you need to lose sleep over, either.
    Thanks Tommy.

    Would you advise wrapping the legend text in <label> tags too?

    e.g.
    Code HTML4Strict:
    <legend><input id="chk" name="chk" type="checkbox"><label for="chk">Text</label></legend>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Using the label tag like that identifies clearly that the text is the label for the checkbox.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <legend><input id="chk" name="chk" type="checkbox"><label for="chk">Text</label></legend>
    Wont validate in an xhtml transitional doctype

  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)
    Quote Originally Posted by Alpha1980 View Post
    Would you advise wrapping the legend text in <label> tags too?
    I definitely think you should associate the checkbox with a label, yes. Not only is that of paramount importance for screen reader users; it also offers the significant benefit of increasing the clickable area. I find it really annoying when I have to click the tiny little checkbox square.

    Quote Originally Posted by BBoardX View Post
    Wont validate in an xhtml transitional doctype
    No, because XML requires all elements to have closing tags, so you have to use <input/> instead of <input>. But since XHTML is of very limited use for 99.999% of the designer/developer population it doesn't matter. And why in the world would anyone use XHTML Transitional anyway? Transitional DTDs are only meant to be used during a transitional (duh!) phase when you're modernising pre-HTML4 documents.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys - all very helpful.


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
  •