HTML and CSS Reference
In-Depth Information
Figure 3-17. The color input type in Chrome 12
3.7 Creating an Editable Drop-Down
Problem
You want to give the user the ability to enter text but also prompt her with some
suggestions to choose from. This is sometimes known as an
editable drop-down
or a
combo box.
Solution
Use the HTML5
datalist
element to create a list of suggestions using the
option
element, and associate the list with an
input
element via the
list
attribute:
<form>
<p><label>Donation amount <input type="text" name="donation"
list="donations"
></label></p>
<datalist id="donations">
<option value="10.00">10.00</option>
<option value="25.00">25.00</option>
<option value="50.00">50.00</option>
</datalist>
