Is it possible to reuse a datalist on multiple elements?

Asked 29/6, 2014 at 11:11 Answered 29/6, 2014 at 12:10

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?

Derivation answered 29/6, 2014 at 11:11 Comment(6)

Why would you place it in <head> tag? Add it to the <body> – Chiao 29/6, 2014 at 11:18

For no other reason than I don't know where to put it. – Derivation 29/6, 2014 at 11:26

You should place it exactly in the place you want it to appear in your document.. between <body></body>, and should probably add values to those options. – Dissyllable 29/6, 2014 at 11:26

Thanks. I thought, for some reason, that it had to be outside the body to be reused. – Derivation 29/6, 2014 at 11:32

Just out of curiosity: what component is returning this error? I know browsers to report Javascript errors in the debugging environments, but HTML? – Washy 29/6, 2014 at 11:52

I should have indicated it's a formatting/parsing error. I'm using Caret in Chrome. – Derivation 29/6, 2014 at 12:33

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.

Ioyal answered 29/6, 2014 at 12:10 Comment(1)

Outstanding answer! Thank you – Derivation 29/6, 2014 at 12:31

Use by every option not

<option>...</option> but <option value="...">

Luanaluanda answered 29/6, 2014 at 11:26 Comment(1)

This might be useful information, but it does not address the question asked. – Ioyal 29/6, 2014 at 11:37

I've run the skeleton snippet below in these browsers:

Chrome 35 Mac -> Works fine
Mozilla 30 Mac -> Works fine, though no list control, only bare input field
IE 11 -> works fine, no list control.
From IE 9 downwards the page get scrambled.
Safari 7.0.4 can't handle it, it shows no list. Needs probably some other details.

So your error comes probably from another aspect.

According to HTML5 specs, the element should be used where "Phrasing content" is placed. http://www.w3.org/TR/html5/forms.html#the-datalist-element. This is the text of the document, as I see, the <body>: http://www.w3.org/TR/html5/dom.html#phrasing-content-1

EDIT: Sometimes it's useful to go to the good ol' W3 validator: http://validator.w3.org/check

If I put the datalist in the head, the validator reports something about "straying head end tag". So This should be one source of the problem.

Snippet:

    <html>
      <head>
        <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>
  </head>
<body>

  <input list="colors" />

</body>
</html>

Washy answered 29/6, 2014 at 11:39 Comment(0)

Recommended topics

Hot tags