Implicit, explicit or both for form labels?

From: http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL
for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element’s contents.

The validator does throw a “reference to non-existent ID” warning—not an error—for a FOR that doesn’t have a matching ID on the page.

The reason I was using the implicit label in the past was so that I could have a :focus and :hover that would change the background to help indicate which item was in play at the moment by surrounding them both. That way there was no meaningless DIV necessary to surround them. I added the for attribute making it both implicit and explicit because of a similar discussion in the past and because of the example here: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels

Now I see that it’s best to continue the way I’ve been doing it thanks to the articles posted above. :slight_smile:

<label for="inputId">Label Text: </label> <input id="inputId" action="handler/formProcess" />

It [#19] doesn’t identify it ‘implies’ and that demo was purely to prove what you could shove through that validator for a pass answer whether or not it was of any semantic value.

<ot>The blankspace before the “/” on the closing tag is purely for my eyesight tracking I find it easier process with my dyslexic brain.</ot>

That way there was no meaningless DIV necessary to surround them.

For instances where it makes sense for the label to come after the input (checkboxes, radio buttons) you can still do that kind of highlighting if you want:

<input type=“checkbox” name=“foo” id=“foo” value=“1”> <label for=“foo”>Yes, sign me up!</label>

input:focus, input:focus+label, input:hover, input:hover+label (can also for :active if you want for phones etc) {
highlight styles;
}

You could also get at least hover styles to work for the other setup. label:hover, label:hover+input…

In case you still like to do that as much as possible with CSS. Of course JS or CSS4 could get :focus back in as well… : )