Horje
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:

Full Example of HTML <datalist> Element





Related Articles
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> ElementHTML Form Elements
Full Example of HTML <datalist> ElementHTML Form Elements

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


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