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

[Knut Krueger]

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?

 

[richard]

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.

 

[JJ]

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

 

[Jukka K. Korpela]

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.

 

[Knut Krueger]

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....

 

[Jukka K. Korpela]

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.

 

[Knut Krueger]

Am 20.08.2013 10:46, schrieb Jukka K. Korpela:

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.

 

[Jukka K. Korpela]

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/).

 

[Knut Krueger]

Am 20.08.2013 11:25, schrieb Jukka K. Korpela:

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 ...