HTML Datalist: Suggested Values for an Input

The HTML <datalist> element provides suggested values for an <input>. The user can choose one of the suggestions or type a different value.

<label for="section">Section</label>
<input type="text" id="section" name="section" list="scripts">

<datalist id="scripts">
  <option value="PHP"></option>
  <option value="JavaScript"></option>
  <option value="ASP"></option>
  <option value="Dot Net"></option>
  <option value="Perl"></option>
  <option value="JSP"></option>
</datalist>

The input's list value must match the datalist's id. The datalist itself is not the submitted form control; the associated input supplies the submitted name and value.

How Datalist Works Top ↑

A datalist contains predefined suggestions. An input is linked to it through the list attribute.

<input type="text" name="town" list="towns">

<datalist id="towns">
  <option value="Hyderabad"></option>
  <option value="Bhubaneswar"></option>
  <option value="Visakhapatnam"></option>
</datalist>

• The browser can show matching suggestions as the user types.
• The user can select a suggestion.
• The user can also enter a different value.
• The selected or typed value belongs to the input, not to the datalist.

Live Datalist Demo Top ↑

Try typing P, J, or another value. The exact presentation of suggestions is controlled by the browser.

input list and datalist id Top ↑

The connection between the two elements is created by matching these values:

<input list="languages" name="language">

<datalist id="languages">
  <option value="Python"></option>
  <option value="PHP"></option>
</datalist>

If the values do not match, the input will not use that datalist.

Datalist Options Top ↑

Each <option> supplies a suggestion through its value.

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

Datalist vs Select Top ↑

More about Dropdown Listbox (SELECT) →

When to Use Datalist Top ↑

Datalist is a good choice when you have useful suggestions but still want to allow another value.

For example, you can suggest common town names without assuming your list contains every possible town.

Use <select> instead when the user must choose one of the supplied values.

Validation and Allowed Values Top ↑

Datalist suggestions do not restrict the value to the listed options.

<input type="text" name="language" list="languages2">

<datalist id="languages2">
  <option value="Python"></option>
  <option value="PHP"></option>
</datalist>

The user can still submit Java, Ruby, or another value.

required with Datalist Top ↑

The required attribute can require the associated input to contain a value:

<label for="city">City</label>
<input type="text" id="city" name="city" list="cities" required>

<datalist id="cities">
  <option value="Hyderabad"></option>
  <option value="Bengaluru"></option>
</datalist>

required means the field cannot be empty for browser constraint validation. It does not mean the value must be one of the datalist options.

Browser and Accessibility Behavior Top ↑

Modern browsers generally support datalist, but the suggestion interface, filtering behavior and keyboard interaction can vary.

• The browser decides how the suggestion popup looks.
• Matching behavior can differ between browser engines.
• Mobile browsers may present suggestions differently from desktop browsers.
• Assistive-technology behavior can vary, so important form instructions should remain visible outside the popup.

Styling Datalist Suggestions Top ↑

You can style the associated <input> like other form controls, but the browser-generated suggestion popup offers limited styling control.

<input
  type="text"
  name="section"
  list="scripts3"
  class="form-control"
>

If a project requires a fully styled autocomplete popup, a JavaScript autocomplete component may provide more control.

Displaying matching words using jQuery UI Autocomplete →

Dynamic Datalist Options Top ↑

Datalist options can be created or replaced with JavaScript when suggestions change in the browser.

<input type="text" id="skill" name="skill" list="skills">
<datalist id="skills"></datalist>

<script>
const values = ['HTML', 'CSS', 'JavaScript'];
const list = document.getElementById('skills');

values.forEach(value => {
  const option = document.createElement('option');
  option.value = value;
  list.appendChild(option);
});
</script>

For a dedicated example, see adding datalist options with JavaScript.

Plus2net Datalist Applications Top ↑

Video Tutorial Top ↑

Common Datalist Mistakes Top ↑

Expecting datalist to restrict the input Top ↑

Datalist provides suggestions. Users can normally type another value.

Using different list and id values Top ↑

The input's list value must match the datalist's id.

Putting name on the datalist instead of the input Top ↑

The input is the form control that is submitted. Give the input the name.

Using self-closing option syntax Top ↑

Use normal <option></option> markup because option is not a void HTML element.

Assuming required means "must match a suggestion" Top ↑

Required only requires a value. It does not restrict that value to the datalist options.

Depending on identical popup behavior in every browser Top ↑

The browser controls much of the suggestion interface, so presentation and interaction can vary.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: