The HTML list attribute
Quick answer
The HTML list attribute links the input to a <datalist> of suggested values by its id. It is used on the <input> element.
Overview
The list attribute connects an input to a datalist of suggestions. It is used on form controls such as <input>, <select> and <textarea>.
It is a form-control attribute: it configures how a control behaves, what it accepts, or its initial value, working alongside the control's <label> and parent <form>. Constraint attributes also feed the browser's built-in validation.
Syntax
<input list="fruits"><datalist id="fruits"><option value="Apple"></datalist>Values
| Value |
|---|
The id of a <datalist> element. |
Example
<input list="fr" placeholder="Type a fruit" style="padding:8px;"><datalist id="fr"><option value="Apple"><option value="Banana"><option value="Cherry"></datalist>Best practices
- Give every control a <label> so it has an accessible name.
- Treat client-side constraints as a convenience — always validate again on the server, since they can be bypassed.
- Choose the most specific input type so users get the right on-screen keyboard and built-in checks.
- Keep the submitted name and value meaningful for whatever processes the form.
Frequently asked questions
What does the list attribute do?
Connects an input to a datalist of suggestions.
Are HTML form attributes enough for validation?
They give instant feedback, but client-side checks can be bypassed, so always validate on the server too.
Do form controls still need a label?
Yes. Every control needs a <label> for an accessible name, whatever attributes you set.
Which elements use the list attribute?
It is an element-specific attribute, used on form controls such as <input>, <select> and <textarea>.