[whatwg] Allowing size and maxlength attributes for all new input types would provide better fallbacks

Sun Mar 6 12:32:00 PST 2011

On 02/16/11 08:31, Jukka K. Korpela wrote:
> The current version disallows the size and maxlength attributes in input
> elements when  type="time", type="date", type="datetime",
> type="datetime-local", type="number", type="range", or type="color" is
> used.
> I suppose the reason is that for other new input types, browsers are
> expected to use advanced user interface, either with no visible text field
> or with a text field of a size determined by the browser.
> 
> However, the method of extending forms with new input types is based on the
> clever idea that using a new attribute in input elements, non-supporting
> browsers will imply type="text" and use a normal text input field as
> fallback. This idea gets somewhat broken if size and maxlength attributes
> cannot be used. Setting the visible width and imposing a maximum length of
> input in characters are often useful hints. E.g., for <input type="time">,
> it would be useful to have size="5" maxlength="5" (perhaps combined with a
> CSS setting that sets the font to monospace for consistency) to convey or
> support a message about expected input format as well as to prevent some
> input errors.

Note that <input type='time' maxlength='5' size='5'> should work as
expected given than maxlength and size would just be ignored by a UA
which knows about the 'time' type and would be used by a UA which doesn't.

Though, if you want to have a valid HTML code, the best solution is
probably not to change the HTML specs to accept those attributes given
that they will be completely useless if the UA support the given types.
However, I think the web page should set the attributes in a compat
check in javascript. Probably the same way you would have to set a few
event handlers to create the widget you want. That way, you would only
use these attributes when the UA would actually use them.
For example, instead of:
<input type='number' size='4' maxlength='4'>
You could do:
<body onload="
  var i = document.getElementsByTagName('input')[0];
  if (i.type != 'number') {
    i.type = 'text';
    i.maxLength='4'; i.size='4'; i.oninput=/*a event handler*/;
    [...];
  }">
  <input type='number'>
</body>

--
Mounir