[whatwg] Combo Boxs, once again...
Matthew Raymond
mattraymond at earthlink.net
Thu Jul 1 18:34:50 PDT 2004
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.
More information about the whatwg
mailing list