SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru puco's Avatar
    Join Date
    Feb 2005
    Location
    Slovakia
    Posts
    785
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    LABEL and INPUT usage theory

    Hi

    I would like to know what is the correct way of using LABELs. I use LABEL element only to enclose the text of the label, but on some pages I saw label containing also the INPUT element.

    HTML Code:
    <label for="i1">Label 1: <input type="text id="i1" /></label>
    vs.

    HTML Code:
    <label for="i1">Label 1:</label> <input type="text id="i1" />
    My questions are: are both valid? what is the advantage of using one or another (easier styling etc.)? Which of them is semantically more correct?

    I'm interested in all your comments.
    Martin Pernecky

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are both valid. I use the enclosing version for checkboxes and radio buttons:
    HTML Code:
    <label for="agree"><input id="agree" name="agree" type="checkbox" value="agree">Yes, I agree</label>
    IIRC, some browsers (IE/Win?) need this to make the label text clickable as a way to check or uncheck the checkbox.

    I use a separate LABEL for other types of fields:
    HTML Code:
    <label for="city">Name</label>
    <input id="city" name="city" type="text">
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Guru puco's Avatar
    Join Date
    Feb 2005
    Location
    Slovakia
    Posts
    785
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IIRC, some browsers (IE/Win?) need this to make the label text clickable as a way to check or uncheck the checkbox.
    Nope, every IE/Win works with both (quirks & standards mode too).
    Martin Pernecky

  4. #4
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Staffordshire, UK & Florida, USA
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a couple of examples taken from the w3c.org website:
    http://www.w3.org/TR/html4/interact/forms.html#h-17.9

    This example creates a table that is used to align two text input controls and their associated labels. Each label is associated explicitly with one text input:
    HTML Code:
    <FORM action="..." method="post">
    <TABLE>
      <TR>
        <TD><LABEL for="fname">First Name</LABEL>
        <TD><INPUT type="text" name="firstname" id="fname">
      <TR>
        <TD><LABEL for="lname">Last Name</LABEL>
        <TD><INPUT type="text" name="lastname" id="lname">
    </TABLE>
    </FORM>
    This example extends a previous example form to include LABEL elements.

    HTML Code:
    <FORM action="http://somesite.com/prog/adduser" method="post">
        <P>
        <LABEL for="firstname">First name: </LABEL>
                  <INPUT type="text" id="firstname"><BR>
        <LABEL for="lastname">Last name: </LABEL>
                  <INPUT type="text" id="lastname"><BR>
        <LABEL for="email">email: </LABEL>
                  <INPUT type="text" id="email"><BR>
        <INPUT type="radio" name="sex" value="Male"> Male<BR>
        <INPUT type="radio" name="sex" value="Female"> Female<BR>
        <INPUT type="submit" value="Send"> <INPUT type="reset">
        </P>
     </FORM>

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't use the FOR attribute, IE won't make the label clickable, although Mozilla will if you nest the INPUT inside the LABEL.
    Code:
    <label><input name="dummy"> Dummy</label>
    Simon Pieters

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks zcorpan. That was what I meant, although I wasn't very clear about it.
    Birnam wood is come to Dunsinane

  7. #7
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE won't make the label clickable
    take a look on this in IE: http://dean.edwards.name/IE7/compatibility/label.html

  8. #8
    SitePoint Guru puco's Avatar
    Join Date
    Feb 2005
    Location
    Slovakia
    Posts
    785
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    If you don't use the FOR attribute, IE won't make the label clickable, although Mozilla will if you nest the INPUT inside the LABEL.
    Code:
    <label><input name="dummy"> Dummy</label>
    Thanks, I hasn't aware of that functionality, but reading through W3C HTML reference it is clear. So I guess both approaches are valid and equally correct.
    Martin Pernecky

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oerdec
    I find this workaround a lot better than using JavaScript:
    Code:
    <label for="foo"><input id="foo" name="dummy"> Dummy</label>
    It will also make the label clickable in IE, and also work when JavaScript is disabled.
    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
  •