How to create HTML <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Simple Example of HTML <datalist> Element

index.html

Example: HTML

 <form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Full Example of HTML <datalist> Element

The datalist element specifies a list of pre-defined options for an input element.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

</body>
</html>

Output should be:

What is HTML Form Elements	HTML Form Elements
How to create HTML <input> Element	HTML Form Elements
How to create The <label> Element	HTML Form Elements
How to create HTML <select> Element	HTML Form Elements
How to create HTML <option> element	HTML Form Elements
How to Visible HTML Select Option Values	HTML Form Elements
How to Allow Multiple Selection in HTML Option Value	HTML Form Elements
How to create HTML <textarea> Element	HTML Form Elements
How to create HTML <button> Element	HTML Form Elements
How to create HTML <fieldset> and <legend> Elements	HTML Form Elements
How to create HTML <datalist> Element	HTML Form Elements
How to create HTML <output> Element	HTML Form Elements

Single Articles

Simple Example of HTML <datalist> Element	HTML Form Elements
Full Example of HTML <datalist> Element	HTML Form Elements

Read Full:	HTML Form Elements
Category:	Web Tutorial
Sub Category:	HTML Form Elements
Uploaded by:	Admin
Views:	101

Reffered: https://www.w3schools.com/html/html_form_elements.asp