SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How bad is this mistake?

    On couple of sites I've used
    Code:
    <fieldset>
       <form... >
       ...
       </form>
    </fieldset>
    instead of
    Code:
    <form...>
       <fieldset>
       ...
       </fieldset>
    </form>
    Should I change the code and appropriate css? Is this a huge mistake or a minor one?

  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)
    I think you should change the markup, because it's clearly wrong. If nothing else, what if a newbie looks at your markup and believes this is the right way to do it? You may be cause irreparable harm to some innocent beginner out there.
    Birnam wood is come to Dunsinane

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's also invalid, because a fieldset has to start with a legend.
    Simon Pieters

  4. #4
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    what if a newbie looks at your markup and believes this is the right way to do it? You may be cause irreparable harm to some innocent beginner out there.
    haha just imagine that!!! his friends will tell him what's that? that's weird!! and he would say: ''you don't know Jack.... I saw that on SitePoint !!''


  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually saw this on some other site. I liked the efect with 1px border and 1px padding on fieldset and then pale blue background color and 10px padding on form tag. Anyway, the code (XHTML 1.0 Transitional) validates quite well with w3c and cynthia. I know it looks stupid, though

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can achieve the exact same effect with the fieldset inside the form.
    Simon Pieters

  7. #7
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    You can achieve the exact same effect with the fieldset inside the form.
    Of course, I know that. I guess my question could be: why is more semantically correct to put form in some redundant div like this
    Code:
    <div class="formcontainer"><form...>...</form></div>
    then what I did. Now, I will change it, but I'd like to know the theoretical reason why is so wrong. I mean, all the form controls are inside fieldset, and that's the purpose of the fieldset tag.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you need the div?

    As for theoretical reasons: the fieldset is intended to group related form controls, thus it makes sense to have the form control grouping element inside the form controls' form. What if you want another group of related form controls in the same form?
    Simon Pieters

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Why do you need the div?
    As Simon says, just add your class or ID to the form itself and style that to look how you want.

  10. #10
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. I still can't understand how I managed to make such a huge mistake. Just another silly question, because I'm lacking confidence right now: Is this semantically correct?
    Code:
    <form...>
       <fieldset>
       <legend class="hide">Contact</legend>
       ....
       </fieldset>
    </form>
    where
    Code:
    .hide {display: none;}

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, although the class name is presentational, and display:none isn't the best hiding method if you want screen readers to read the legend. It's better to position it off-screen somehow.
    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
  •