[html5] Question on label as a part of interactive content

[Ian Hickson]

On Tue, 15 Jul 2014, Jukka K. Korpela wrote:
> 2014-07-10 22:57, Ian Hickson wrote:
> > On Wed, 2 Jul 2014, S Partha wrote:
> > > As per the spec
> > > http://dev.w3.org/html5/spec-preview/content-models.html#interactive-content,
> > > label element is marked as interactive without any exceptions. Label
> > > elements are still considered interactive, even if they don't have any
> > > labeled control. Is there a specific reason to treat labels this way?
> > Note that the link above is to a really old W3C copy of the spec. Here's
> > the latest:
> > 
> >     http://www.whatwg.org/html#the-label-element
> > 
> > To answer your question, though: it's actually just used as a way to 
> > make it non-conforming to put <label> elements (even labels without 
> > controls) inside <button> elements and <a> elements (and a few other 
> > minor cases). We don't want to allow those because if you ever do 
> > associate a control with such a label element, the result is very 
> > confusing to the user.
> 
> So <label> is not allowed inside <a>. I wonder why it is allowed to nest 
> them the other way, since the argument looks equally strong for it.

You gave the very use case in your e-mail:

> This came into my mind when reading the question 
> http://stackoverflow.com/questions/24755802/a-link-inside-a-label-also-triggers-the-checkbox-how-to-prevent 
> where the code is:
> 
> |<label><input type="checkbox"> I agree to the<a href="terms">terms</a> 
> and would like to continue</label>|

This is quite common and seems like a very valid thing to do.


> This creates obvious problems (the checkbox is toggled when following 
> the link, in most browsers). Disallowing <a> inside <label> (if 
> implemented in validators) would help to avoid such problems.

Such browsers are non-conforming. Also, I couldn't find any that act as 
you described.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'