<div> <label for=".."> </label><label> ...</label></div> allowed?

Discussion in 'HTML' started by Knut Krueger, Aug 19, 2013.

  1. Knut Krueger

    Knut Krueger Guest

    Hi to all

    is there any restriction to put more than one label inside a DIV
    like:
    <div>
    <label for=".."> </label><label> ...</label>
    </div>

    and if Yes where can I read about?
     
    Knut Krueger, Aug 19, 2013
    #1
    1. Advertising

  2. Knut Krueger

    richard Guest

    On Mon, 19 Aug 2013 18:00:02 +0200, Knut Krueger wrote:

    > Hi to all
    >
    > is there any restriction to put more than one label inside a DIV
    > like:
    > <div>
    > <label for=".."> </label><label> ...</label>
    > </div>
    >
    > and if Yes where can I read about?


    http://www.w3schools.com/tags/tag_label.asp
    As you will see in their example they do indeed use two label tags.
     
    richard, Aug 19, 2013
    #2
    1. Advertising

  3. Knut Krueger

    JJ Guest

    On Mon, 19 Aug 2013 18:00:02 +0200, Knut Krueger wrote:
    > Hi to all
    >
    > is there any restriction to put more than one label inside a DIV
    > like:
    > <div>
    > <label for=".."> </label><label> ...</label>
    > </div>
    >
    > and if Yes where can I read about?


    No restriction. You can have multiple LABEL tags in another tag such as DIV,
    SPAN, LI, etc. You can have multiple LABEL tags that points to a single
    cotrol like INPUT, SELECT or TEXTAREA.

    See the example here:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Examples

    Note: the example result only have one "Click me" label instead of two.

    See the HTML LABEL tag's specifications here:

    http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
     
    JJ, Aug 19, 2013
    #3
  4. 2013-08-19 19:21, JJ wrote:

    > On Mon, 19 Aug 2013 18:00:02 +0200, Knut Krueger wrote:
    >> Hi to all
    >>
    >> is there any restriction to put more than one label inside a DIV
    >> like:
    >> <div>
    >> <label for=".."> </label><label> ...</label>
    >> </div>
    >>
    >> and if Yes where can I read about?

    >
    > No restriction.


    That is correct. The interesting question is why the question was asked.
    If we could see the actual problem that OP is having, it would probably
    look different from the one asked, and solving it would be more useful.

    > You can have multiple LABEL tags that points to a single
    > cotrol like INPUT, SELECT or TEXTAREA.


    That's a completely different issue, and somewhat misleading here, I'm
    afraid. Technically, you can have exactly two label elements that are
    associated with the same control, namely by wrapping the control inside
    one label element and using another label element for it, with the
    for=... and id=... attributes. But while formally correct, this would be
    pointless. It could also be bad for accessibility, when using software
    that can announce which label is associated with a given control.

    > See the example here:
    >
    > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Examples
    >
    > Note: the example result only have one "Click me" label instead of two.


    You have misunderstood the example. The code

    <!-- Simple label example with for attribute -->
    <label for="Name">Click me</label>
    <input type="text" id="Name" name="Name" />

    <!-- or more simply -->
    <label>Click me <input type="text" id="Name" name="Name" /></label>

    is meant to demonstrate two alternative methods. They are not meant to
    be both used for a control. Those tags, when used together, make a
    document invalid in a serious way (confusing browsers), since it
    violates the requirement on uniqueness of id attribute values.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 19, 2013
    #4
  5. Knut Krueger

    Knut Krueger Guest

    Am 19.08.2013 22:11, schrieb Jukka K. Korpela:

    > That is correct. The interesting question is why the question was asked.
    > If we could see the actual problem that OP is having, it would probably
    > look different from the one asked, and solving it would be more useful.
    >


    I was using the
    <div class= "..."> <label for=".."> </label><label> ...</label></div>
    construct.
    I was told that two labels inside a <DIV class= "..."></DIV> are not
    allowed by html standard. They are working because the browser will fix
    it but its wrong.

    That's all what I can say about....
     
    Knut Krueger, Aug 20, 2013
    #5
  6. 2013-08-20 11:19, Knut Krueger wrote:

    > I was using the
    > <div class= "..."> <label for=".."> </label><label> ...</label></div>
    > construct.
    > I was told that two labels inside a <DIV class= "..."></DIV> are not
    > allowed by html standard.


    Either it was told by someone who does not know "html standard", or
    there was some misunderstanding in the communication. It's easy to check
    from HTML specifications and to double-check with an HTML validator that
    there the construct is permitted. Whether it makes sense is a different
    question, and really depends.

    The first <label> element would make sense it its for=... attribute
    associates it with a control element like <input> and if its content is
    non-blank (as opposite to the " " in your example. The second <label>
    element, if it really lacks a for=... attribute, would make sense only
    if it contains a control element.

    In any case, two <label> elements with nothing between them (as in the
    example) would be very bad usability and accessibility, since their
    contents would run together visually. E.g.,
    <label for=...>foo</label><label for=...>bar</label>
    would result in "foobar", where clicking on "foo" would activate one
    control, and clicking on "bar" would activate another control. I guess
    it could sometimes make sense in a weird game...

    > They are working because the browser will fix
    > it but its wrong.


    I wonder what browsers would be expected to fix here.

    Wrapping <label> elements inside a <div> element does not change their
    functionality the least.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 20, 2013
    #6
  7. Knut Krueger

    Knut Krueger Guest

    Am 20.08.2013 10:46, schrieb Jukka K. Korpela:
    > 2013-08-20 11:19, Knut Krueger wrote:
    >
    >> I was using the
    >> <div class= "..."> <label for=".."> </label><label> ...</label></div>
    >> construct.
    >> I was told that two labels inside a <DIV class= "..."></DIV> are not
    >> allowed by html standard.

    >
    > Either it was told by someone who does not know "html standard", or
    > there was some misunderstanding in the communication. It's easy to check
    > from HTML specifications and to double-check with an HTML validator that
    > there the construct is permitted. Whether it makes sense is a different
    > question, and really depends.


    There was a editable user field an I changed it by text label containing
    either a hint that the system will create the username or the username
    coming from the database/template system.

    In my opinion it was better than a readonly input filed where the user
    will try to edit it. To set it disabled (grey) was not possible because
    the template system would not get the name from the database.
     
    Knut Krueger, Aug 20, 2013
    #7
  8. 2013-08-20 11:58, Knut Krueger wrote:

    > There was a editable user field an I changed it by text label containing
    > either a hint that the system will create the username or the username
    > coming from the database/template system.


    I don't quite see what that means in practice (real markup with real
    content might help) or how it relates to the use of *two* <label>
    elements. If there is an editable inline element that is not a control
    like <input>, then it should normally be <span contenteditable
    role=textbox ...>...</span> (see http://www.w3.org/TR/aria-in-html/).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 20, 2013
    #8
  9. Knut Krueger

    Knut Krueger Guest

    Am 20.08.2013 11:25, schrieb Jukka K. Korpela:
    > 2013-08-20 11:58, Knut Krueger wrote:
    >
    >> There was a editable user field an I changed it by text label containing
    >> either a hint that the system will create the username or the username
    >> coming from the database/template system.

    >
    > I don't quite see what that means in practice (real markup with real
    > content might help) or how it relates to the use of *two* <label>
    > elements.

    It is a workaround
    There is a working system which we must patch in a "minimal invasive"
    way. Means only templates and own functions. The original (hidden)
    -username must be untouched für use in other functions and the contend
    of the second label should be shown at screen ...
     
    Knut Krueger, Aug 20, 2013
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    3,440
    Michael Mayer [C# MVP]
    Feb 16, 2004
  2. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,671
    Josef K.
    May 22, 2005
  3. Wiseguy
    Replies:
    2
    Views:
    339
  4. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    788
  5. Iñaki Baz Castillo
    Replies:
    13
    Views:
    540
    Iñaki Baz Castillo
    May 1, 2011
Loading...

Share This Page