Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Is it allowed/recommended to put form elements within the associated labels?

Bottom of Page

1 to 8 of 8

  1.  
  1.  permalink
    Hiya

    Just spoke to someone who says that having form elements within labels is ok. I've always learned that they should not be within each other, but this guy does seem to know what he is talking about so just want to check this out.

    So he says this scenario is ok:

    <label for="firstname">First name <input id="firstname" /></label>

    Whereas I have always used:

    <label for="firstname">First name</label>
    <input id="firstname" />

    I hope he is right as it does make sense and would make life easier when styling forms.

    Can anybody confirm this is ok? Or even recommended?

    Link to some official documentation would be great as well

    Thanks
    • CommentAuthordavist11
    • CommentTimeSep 2nd 2008
     permalink
    Yep, it is perfectly fine. Although for styling the forms, you may want to have them separate.
  3.  permalink
    Cool, do you have any sort of official link to back it up by any chance?
    • CommentAuthordavist11
    • CommentTimeSep 2nd 2008
     permalink
    Uhh, I mean neither are block level elements, so its perfectly valid. Here, try this:
    http://www.w3.org/TR/html401/interact/forms.html#idx-label-1
  5.  permalink
    wow cool. I guess you learn something new everyday :-)

    Thanks for that
  6.  permalink
    Both are perfectly valid. But the first one is recommended as when it comes to checkboxes or radiobuttons, you can select/deselect the checkbox/radiobutton by clicking on the label as well as that particular form element.

    <label for="option1"><checkbox id="option1" /> option1 </label>
    • CommentAuthordavist11
    • CommentTimeSep 5th 2008
     permalink
    Manaswinee-
    I would say that is not true at all. If you use the for attribute correctly, you do not need to have the label wrap around the input field.
    • CommentAuthorfransgaard
    • CommentTimeSep 10th 2008
     permalink
    Agree. I've never had any issues having input and label separated neither for fields or checkboxes/radiobuttons

1 to 8 of 8

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page