Menu
I have defined it and placed in the <head> tag:
<datalist id="colors">
<option>#ff0000</option> <!-- red -->
<option>#FF5100</option> <!-- red orange -->
<option>#FF7F00</option> <!-- orange -->
<option>#FFBE00</option> <!-- yellow orange -->
<option>#FFFF00</option> <!-- yellow -->
<option>#C0FF00</option> <!-- yellow green -->
<option>#00FF00</option> <!-- green -->
<option>#007F7F</option> <!-- Blue Green -->
<option>#0000FF</option> <!-- Blue -->
<option>#5C00FF</option> <!-- Blue Violet -->
<option>#7F00FF</option> <!-- Violet -->
<option>#BF007F</option> <!-- Red Violet -->
<option>#FFFFFF</option> <!-- White -->
<option>#DADADA</option> <!-- Gray1 -->
<option>#B6B6B6</option> <!-- Gray2 -->
<option>#929292</option> <!-- Gray3 -->
<option>#6D6D6D</option> <!-- Gray4 -->
<option>#494949</option> <!-- Gray5 -->
<option>#242424</option> <!-- Gray6 -->
<option>#000000</option> <!-- Black -->
</datalist>
and it seems to work but I am getting errors:
Unexpected end tag (head) - ignored.
Where should I put it?
898
Alternatives to <datalist> If you can actually limit the user's input to the predefined options, and you don't need free-entry, you can simply use the standard <select> element. If you need type-entry autocomplete, the most widely supported solution is Javascript.
Generally, both the tags are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter its own input and add that as an option with the help of the <input> element whereas the <select> tag doesn't provide this feature.
Definition and Usage The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
The multiple attribute (specification ) is used to notate that multiple values should be able to be selected. The specification for the multiple attribute shows an example of usage with datalists.
You can see that each browser displays a tick mark for each datalist option provided. Additionally, Chrome will snap the slider to these predefined values as the user moves the slider near them. Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
To answer first the question in the title: yes, you can use the same datalist element in multiple controls, by using its id attribute value in different input elements, e.g.
<datalist id="colors">...</datalist>
<label for="car">Color of your car:</label> <input type="color" id="car" list="colors">
<label for="tie">Color of your tie:</label> <input type="color" id="tie" list="colors">
Regarding the question “Where should I put it?”, the HTML5 LC says about datalist:
Contexts in which this element can be used: Where phrasing content is expected.
This means pretty much any place inside the document body, but not in head. When used properly, its placement does not matter, since it generates no visible content as such. You can put it e.g. right before (or after) the first input element that refers to it or, if you prefer, at the start or end of body.
However, if use markup like <option>#ff0000</option>, as opposite to <option value="#ffff00">, in this context, then the placement matters, since now there is visible content (the string #ff0000). On old browsers that do not support the datalist element, such content will be shown where you place the element.
If you are using <input type="color">, which seems probable, then you should consider what happens on IE that does not support that element type. The problem is that sufficiently new versions of IE support datalist but even IE 11 still implements <input type="color"> as a simple text box,. This means that the user, on clicking element, would see a dropdown list of color codes like #FF0000. For this reason, unless IE is irrelevant, you should specify a visible name for the color in alabel` attribute, e.g.
<option value="#ff0000" label="red">
<option value="#FF5100" label="red orange">
In this approach, the datalist element could still be placed almost anywhere inside body and could be referenced by more than one input element.
141
Use by every option not
<option>...</option> but <option value="...">
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
