In the Learn section of this exercise it says:
The
<datalist>
is used with an<input type="text">
element.
It seems that the logic to this is explained as being because this:
… creates a text field that users can type into and filter options from the
<datalist>
.
Indeed, in the example that’s then given, the <input>
element includes this type="text"
attribute, along with 3 other attributes, as follows:
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city">
However, in the code given in this exercise’s code editor, the type="text"
attribute is excluded altogether, as follows:
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
The code seems to give the same result with or without type="text"
. Is it therefore optional, or even redundant?
Use of the type
attribute when creating a datalist input is made even more confusing in exercise 14 - Forms Review, where it says:
Setting
type
to"list"
will pair the<input>
with a<datalist>
element.
Am I right in thinking that this is actually wrong, because type
is either set to "text"
or excluded altogether? i.e. it can’t have a value of "list"
because list
is an attribute in its own right and set to the same "value"
as the <datalist>
's id
attribute? This is what is suggested by the code given to us in the code editor in exercises 12, 13 and 14, as follows:
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>
<option value="mustard"></option>
</datalist>