[whatwg] required attribute in label
This question is sort of CSS related, but I think it's worth bringing up
here, assuming it hasn't already been discussed.
The first thing I wanted to do with the required attribute when I started
playing with it is to use the CSS :after pseudo-element to add an asterisk
after every required input:
style
[required]:after {content:*;}
/style
label for=name1Name/label
input id=name1 type=text required
However, it seems that since input is an empty element, the content cannot
be added after. My next thought was to somehow get at that required state
via the label for it, but that seems a bit complicated. Then I realized the
asterisk really ought to be after the label, not the input--which is perfect
since the label is not an empty element. However, required is for input
only.
Why not make required an acceptable attribute for the label element? It
could be done so that the required attribute can be on either just the
input or both the input and the label. Ideally, it could be put in the label
element only, and that would be transfered down to the input to which it is
connected automatically, so putting the required attribute on the label
automatically makes all attributes to which the label is connected required
as well.
Brenton
Re: [whatwg] required attribute in label
Why not make required an acceptable attribute for the label element?
The class or title attribute can solve your problem:
label class=required
label.required:after {content:*}
label title=required
label[title~=required]:after {content:*}
Re: [whatwg] required attribute in label
This could be another way to solve the same problem:
style
label + input[required] + span:after { content: * ; }
/style
label for=name1Name/label
input id=name1 type=text requiredspannbsp;/span
However, the above does not work on IE6 (attribute selectors).
So the id/class suggested by Chris is actually the most cross-browser
solution.
Diego
On Sat, Aug 21, 2010 at 3:26 PM, Chris Cressman ch...@chriscressman.comwrote:
Why not make required an acceptable attribute for the label element?
The class or title attribute can solve your problem:
label class=required
label.required:after {content:*}
label title=required
label[title~=required]:after {content:*}
Re: [whatwg] required attribute in label
On Fri, Aug 20, 2010 at 11:33 PM, WhatWg wha...@gmail.com wrote: However, it seems that since input is an empty element, the content cannot be added after. Right; inputs don't have children. (In some actual implementations, they just automatically hide their children from the rest of the DOM.) ~TJ
Re: [whatwg] required attribute in label
label class=required and input id=name1 type=text requiredspannbsp;/span are effective, but then again this would be too: .../label* It just seems a shame that we have this neat attribute that indicates required controls, but we can't actually use it to change the presentation adding additional code. Brenton
Re: [whatwg] required attribute in label
On Sat, Aug 21, 2010 at 6:18 PM, Brenton Strine wha...@gmail.com wrote:
label class=required
and
input id=name1 type=text requiredspannbsp;/span
are effective, but then again this would be too:
.../label*
It just seems a shame that we have this neat attribute that indicates
required controls, but we can't actually use it to change the
presentation adding additional code.
Presentation issues should by addressed by CSS, not by HTML.
Actually, Diego's suggestion:
label + input[required] + span:after { content: * ; }
Seems to be the right approach here (with current CSS selectors).
I'm not considering IE's issue with attribute selectors because your
original proposal (label[required]) would encounter the same problems.
What sense would have to mark a *label* as required? @required on
label is semantically wrong. And HTML should not compromise
semantics only for presentation purposes.
On a side note, keep in mind that there have been several proposals on
the CSS lists for reversed selectors (ie: selecting elements based
on what they contain rather than what contains them). So hopefully we
might have something like label:has(+ input[required]):after {
content: *; } in the future.
Just my thoughts.
Regards,
Eduard Pascual
