HTML and CSS Reference
In-Depth Information
<option></option>
<option value="10.00">10.00</option>
<option value="25.00">25.00</option>
<option value="50.00">50.00</option>
<option>Other</option>
</select>
If other, please specify:
</datalist>
<input type="text" id="donation" name="donation" list="donations"></p>
<p><button type="submit">Submit</button></p>
</form>
The result is valid, semantic, and elegant: in the former case, the editable drop-down
is rendered, but in the latter case, a select drop-down is rendered next to the text input
field, as shown in
Figure 3-20
.
Figure 3-20. Jeremy Keith's datalist fallback solution in Chrome 12
See Also
Read Jeremy Keith's full post on the datalist solution at
http://adactio.com/journal/
