<label>Cartoon Character: <input name="myCartoonCharacter" list="characters"></label> <datalist id="characters"> <option value="Homer" label="Homer Simpson"> <option value="Bart" label="Bart Simpson"> <option value="Peter" label="Peter Griffin"> <option value="Barney" label="Barney Rubble"> <option value="Fred" label="Fred Flinstone"> </datalist>
The above example demonstrates usage of the
<input> element with the
list attribute is used to identify an element that lists predefined options suggested to the user. It can be used to provide an "autosuggestion" feature. When the user starts typing a list will drop down with suggestions based on their initial input. As they continue typing, this could narrow down the list of options displayed, depending on the subsequent characters the user types. At any time, the user can select one of the suggested options.
When using the
list attribute, its value must be the ID of a
<datalist> element in the same document. This element provides a list of options for the autosuggestion (using an
<option> element for each option).