[whatwg] Form control consistency

[Markus Ernst]

Hello

I googled, read the list archive and whatwg forum and did not find 
anything about this topic; if it should have been discussed before, I 
apologize.

Reading the Webforms 2.0 drafts I found that many useful extensions are 
made, but the basic control structure remains untouched. IMO there is a 
great amount of inconsistency in there, as the existing controls seem to 
be inspired by their on-screen representations rather than by their 
functionalities:

Input element:
- Single line text field
- Hidden text field
- Specialized text field (password, new extensions)
- Unique list selection (radio button group)
- Multiple list selection (checkbox group)
- Confirmation / "yes or no" (single checkbox)
- File upload
- Action initiation (button)

Textarea element:
- Multiline text field

Select element:
- Unique list selection
- Multiple list selection

Button element:
- Action initiation

So we have controls with similar functionalities but totally different 
syntax, and also controls with similar syntax but totally different 
meanings / functionalities. A trivial task, as for example changing the 
representation of a list selection from a radio button group into a 
select box, needs a non-trivial amount of coding - specially if it 
should be done at runtime by a script.

I suggest to change the point-of-view for future HTML versions. A 
consistent structure could look somehow like the following:


1. Input element
User input functionality

Changes:
- input type="text" defaults to a single line text field (unchanged)
- for a multiline text field, either a "multiline" attribute or a new 
"textarea" type is introduced
- also, a rich text editor could be introduced, either by a "richtext" 
attribute or a new "richtext" type (of course this would introduce new 
questions, such as, how to configure its toolbars...)
- hidden, file, password, and new specialized types remain unchanged
- checkbox, radio, submit, reset, button, and image types get deprecated
- the textarea element gets deprecated

Examples:
- single line text field (unchanged)
   <input type="text" name="foo" value="bar">
- multi line text field
   <input type="text" name="foo" value="bar" multiline> or
   <input type="textarea" name="foo" value="bar">
- rich text editor
   <input type="text" name="foo" value="bar" richtext> or
   <input type="richtext" name="foo" value="bar">
- special fields (unchanged)
   <input type="[hidden|password|date|...]" name="foo" value="bar">


2. Select element
List selection functionality

Changes:
- introduce type attribute to determine appearance:
type="menu" (default): display as today's select element
type="boxes": display as group of check or radio boxes
- for type="boxes", the "multiple" attribute switches from radio button 
to checkbox appearance
- the current option syntax gets deprecated; the label will be added 
with the label tag rather than be included in the option tag

Examples:
- default selectbox, as we know it
   <select name="foo">
     <option id="foo1" value="bar1"><label for="foo1">Bar 1</label>
     <option id="foo2" value="bar2"><label for="foo2">Bar 2</label>
     <option id="foo3" value="bar3"><label for="foo3">Bar 3</label>
   </select>
- multiple choice selectbox, as we know it
   <select name="foo" size="5" multiple>
     <option id="foo1" value="bar1"><label for="foo1">Bar 1</label>
     <option id="foo2" value="bar2"><label for="foo2">Bar 2</label>
     <option id="foo3" value="bar3"><label for="foo3">Bar 3</label>
   </select>
- radio button group
   <select name="foo" type="boxes">
     <option id="foo1" value="bar1"><label for="foo1">Bar 1</label>
     <option id="foo2" value="bar2"><label for="foo2">Bar 2</label>
     <option id="foo3" value="bar3"><label for="foo3">Bar 3</label>
   </select>
- checkbox group
   <select name="foo" type="boxes" multiple>
     <option id="foo1" value="bar1"><label for="foo1">Bar 1</label>
     <option id="foo2" value="bar2"><label for="foo2">Bar 2</label>
     <option id="foo3" value="bar3"><label for="foo3">Bar 3</label>
   </select>


3. Checkbox element (new)
Confirmation resp. "Yes or no" functionality

Changes against input type="checkbox":
- the "checkbox" element gets no value attribute; the submitted value is 
"1" when checked, "0" when not checked (this is actually the main reason 
for introducing a new element - changing input type="checkbox" in this 
manner would cause severe backwards compatibility problems in many 
applications; one more reason for the new element is the problem of 
styling the input element, where i.e. borders or dimensions usually do 
not apply to checkboxes but only to text fields)

Example:
   <checkbox id="chk1" name="confirm">
   <label for="chk1">I have read and understood the general 
conditions</label>


4. Button element
Action initiation functionality

Changes:
- button type="image" is introduced in order to totally replace all 
button functionalities of the input element


I assume that this is possible without breaking backwards compatibility. 
At least, new browsers will be able to interpret HTML4 syntax. Old 
browsers will not be able to interpret all of my suggestions, but AFAICS 
this is the case also with other new parts of HTML5.

-- 
Markus Ernst