[whatwg] Combo Boxs, once again...

• From: Matthew Raymond <mattraymond@earthlink.net>
• Date: Thu, 01 Jul 2004 21:34:50 -0400
• Message-ID: <40E4BBBA.6060805@earthlink.net>

    Here are seven different ways to do combo boxes with their pros and 
cons. I recommend prefer the last one. Let me know if I made any typos 
or omitted obvious pros or cons.

=== Sample #1 ===

WF2-ONLY:

<select editable type="text" name="combo1" value="something" 
data="options.xml" />

WF2 + LEGACY:

<select editable type="text" name="combo1" value="something">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

Pros:
    Similar to a standard select.
    Input has a specific type.
    Single value submitted to the server.
    No abusive markup.

Cons:
    Degrades to a drop-down, which is a serious problem.
    Many oppose extending the use of the "type" attribute.

=== Sample #2 ===

WF2-ONLY:

<select editable name="combo1" value="something" type="text" 
data="options.xml" />

...OR...

<select editable name="combo1" value="something" type="text">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

WF2 + LEGACY:

<ignore>
   <input type="text" name="combo1" value="something" />
   <label for="select1"> or select from this list: </label>
</ignore>
<select editable name="combo1" type="text" value="something" id="select1">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.
    No abusive markup.

Cons:
    Many oppose extending the use of the "type" attribute.
    Legacy UAs submit multiple values to the server.
    Introduces a new element that did not previously exist.

=== Sample #3 ===

WF2-ONLY:

<select editable name="combo1" value="something" type="text" 
data="options.xml" />

...OR...

<select editable name="combo1" value="something" type="text">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

WF2 + LEGACY:

<span repeat="template" repeat-start="0">
   <input type="text" name="combo1" value="something" />
   <label for="select1"> or select from this list: </label>
</span>
<select editable name="combo1" type="text" value="something" id="select1">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.

Cons:
    Many oppose extending the use of the "type" attribute.
    Legacy UAs submit multiple values to the server.
    Abuses repetition templates.

=== Sample #4 ===

WF2-ONLY:

<input type="text" name="combo1" value="something" list="select1" />
<ignore><select name="combo1" data="options.xml" /></ignore>

...OR...

<input type="text" name="combo1" value="something" list="select1" />
<ignore>
   <select editable name="combo1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</ignore>

WF2 + LEGACY:

<input type="text" name="combo1" value="something" list="select1" />
<ignore>
   <label for="select1"> or select from this list: </label>
   <select name="combo1" id="select1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</ignore>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.
    Uses the existing |type| attribute of <input> for input typing.
    No abusive markup.

Cons:
    Legacy UAs submit multiple values to the server.
    Introduces a new element that did not previously exist.
    <ignore> element required even in WF2-only cases.

=== Sample #5 ===

WF2-ONLY:

<input type="text" name="combo1" value="something" list="select1" />
<span repeat="template" repeat-start="0">
    <select name="combo1" data="options.xml" />
</span>

...OR...

<input type="text" name="combo1" value="something" list="select1" />
<span repeat="template" repeat-start="0">
   <select editable name="combo1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</span>

WF2 + LEGACY:

<input type="text" name="combo1" value="something" list="select1" />
<span repeat="template" repeat-start="0">
   <label for="select1"> or select from this list: </label>
   <select name="combo1" id="select1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</span>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.
    Uses the existing |type| attribute of <input> for input typing.

Cons:
    Legacy UAs submit multiple values to the server.
    Abuses repetition templates.
    Template use required even in WF2-only cases.

=== Sample #6 ===

WF2-ONLY:

<input type="text" name="combo1" value="something" list="list1" />
<datalist id="list1" data="options.xml" />

...OR...

<input type="text" name="combo1" value="something" list="list1" />
<datalist id="list1">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</datalist>

WF2 + LEGACY:

<input type="text" name="combo1" value="something" list="list1" />
<datalist id="list1">
   <label for="select1"> or select from this list: </label>
   <select name="combo1" id="select1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</datalist>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.
    Uses the existing |type| attribute of <input> for input typing.

Cons:
    Legacy UAs submit multiple values to the server.
    Requires abuse of markup for graceful degradation.
    Introduces a new element that did not previously exist.


=== Sample #7 ===

WF2-ONLY:

<input type="text" name="combo1" value="something" list="list1" />
<datalist id="list1" data="options.xml" />

...OR...

<input type="text" name="combo1" value="something" list="list1" />
<datalist id="list1">
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</datalist>

...OR...

<input type="text" name="combo1" value="something" list="select1" />
<ignore><select name="combo1" data="options.xml" /></ignore>

...OR...

<input type="text" name="combo1" value="something" list="select1" />
<ignore>
   <select editable name="combo1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</ignore>

WF2 + LEGACY:

<input type="text" name="combo1" value="something" list="select1" />
<ignore>
   <label for="select1"> or select from this list: </label>
   <select name="combo1" id="select1">
     <option>First Option</option>
     <option>Second Option</option>
     <option>Third Option</option>
   </select>
</ignore>

Pros:
    Degrades to both a text box and a drop-down list.
    Input has a specific type.
    Uses the existing |type| attribute of <input> for input typing.
    No abusive markup.

Cons:
    Legacy UAs submit multiple values to the server.
    Requires two new elements that did not previously exist.

Received on Thursday, 1 July 2004 18:34:50 UTC