[whatwg] Suggestion: New "input-redirect" CSS property.

Tue Aug 17 20:30:08 PDT 2004

BACKGROUND:

    There has been much talk recently about changing the behavior of the 
<label> element. The current HTML 4.01 specified behavior is pass focus 
from the label to the associated control in all situations, regardless 
of the control or the conventions of the operating system.

ARGUMENTS FOR THE CHANGE:

1) Users may not understand why clicking a label in a web app focuses a 
control, but clicking one in a native app doesn't. Considering clicking 
labels is more likely to be a conscious act, and that clicking a label 
in a native app is in all likelihood harmless, I don't see this as a 
problem.

2) There is the possibility that people my accidently click the label 
and cause undesired behavior. Some of these problems are because of 
vendor-specific form submission handling that is not specified in the 
HTML 4.01 specification. Other circumstances involve rare but 
recoverable situations that require a combination of keyboard and mouse 
input to occur.

3) It is a general principle of web standards groups that markup should 
not specify presentation or behavior. The HTML 4.01 specification 
violates this. However, vendors would have to enable focus passing to 
specific types of controls regardless if whether it was specified to 
make the label behavior consistent with the operating system, so 
adhering to this principle in this situation is of little benefit to 
browser programmers or webmasters.

ARGUMENTS AGAINST THE CHANGE (IN ITS CURRENT FORM):

1) The new behavior is not backwards compatibility with HTML 4.01, thus 
resulting in unexpected behavior when webmasters who wish to start using 
our new markup.

2) The existing HTML 4.01 behavior is already implemented on many browsers.

3) The HTML 4.01 behavior is generally not an "expensive" feature to 
implement in browsers.

4) There is no existing method to determine the correct native behavior 
for a <label> when associated with an <object>, and even if there were, 
the browser vendors would have to depend on plug-in makers to report 
what behavior should be used, so there's no way of knowing if the 
plug-in is reporting the correct native behavior.

5) The HTML 4.01 spec makes the behavior of labels more consistent, 
because all controls have a single label behavior.

6) The HTML 4.01 spec makes the behavior of markup more consistent, 
because a <label> for two different controls will always do the same 
thing on the same platform.

7) As it stands now, <label> is underused on the web. Many webmasters 
use text only. Removing focus passing to the control will only encourage 
this trend.

A REASONABLE COMPROMISE:

    The problem her is not so much that the HTML 4.01 behavior is so 
terrible, but that native behavior is not possible. Webmasters need a 
way to specify native behavior when necessary while not having to worry 
about behavioral backwards compatibility. To this end, I suggest a 
compromise: let a CSS property specific to <label> control the behavior.

Property Name
    input-redirect

Values
    "forced" - The element redirects input to an associated control.
    "native" - The element uses native UI conventions for focus passing.
    "none"   - The element suppresses all input redirection.

    The default for HTML 4.01 markup and for markup without a Doctype 
would be "forced", so that markup without this property would remain 
backwards compatible with the HTML 4.01 specification. In "HTML5", 
"native" would be the default. If someone wants the old HTML 4.01 
behavior in "HTML5", they just add one line of CSS:

label { input-redirect: forced }

    Webmasters can also use the property to specify exactly how they 
want <label> to behave in specific situations:

<html>
<head>
   <title>Example for input-redirect</title>
   <style><!--
     label.text { input-redirect: none }
     label.radio { input-redirect: native }
     label.check { input-redirect: forced }
   --></style>
</head>
<body>
   <form>
     <label class="text">
       Text Box
       <input type="text" name="text1">
     </label>
     <label class="check">
       <input type="checkbox" name="check1">
       Check Box
     </label>
     <label class="radio">Radio Button 1
       <input type="radio" name="radio" value="radio1">
     </label>
     <label class="radio">Radio Button 2
       <input type="radio" name="radio" value="radio2">
     </label>
     <label class="radio">Radio Button 3
       <input type="radio" name="radio" value="radio3">
     </label>
   </form>
</body>
</html>

    (For <object>, the default "HTML5" behavior should probably be "none".)

    The new input-redirect property gives everyone what they want. Those 
who want native behavior as opposed to the 4.01 behavior get it as the 
default for "HTML5". Those that favor the 4.01 standard don't have to 
worry about behavioral backwards compatibility issues. Most importantly, 
webmasters can make up their own minds by learning a single CSS property 
rather than being forced to learn Javascript.