In this section, we will learn what the list attribute is and how to use it.

What is list Attribute in HTML <input> Tag?

Sometimes we have an input element in our document and know in advance what values users are going to put in that field. In such cases, in order to help users to fill the field faster and with ease, we can create a predefined list of options (values) for that field so that users can only pick their values from the list instead of writing it down.

The list itself is created via HTML <datalist> element. This is an independent HTML element and by default, there’s no connection between a list created via the <datalist> and target <input> elements.

So in order to set this link between a <datalist> and target <input> elements, we use the list attribute.

Note: even if we use a data-list for an input element, it doesn’t limit users to only that data-list! Users are still capable of using other values if they want!

<input> Tag list Attribute Values

The value of the list attribute is the id number of the target <datalist> element in which we want to connect it to an <input> element.

HTML list Attribute in <input> Tag Syntax:

<input type = “type” list = “datalist-id”>

Example: using list attribute in HTML <input> tag

See the Pen using list attribute in HTML <input> tag by Omid Dehghan (@odehghan) on CodePen.