HTML5: How to specify a list of pre-defined options for input controls?

Last update on February 06 2024 11:32:01 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<title>HTML5 datalist example</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<input list="Languages" /><!-- Input element with a datalist attribute -->
<datalist id="Languages"><!-- Datalist element with options for input suggestions -->
<option value="PHP"><!-- Option for PHP -->
<option value="ASP"><!-- Option for ASP -->
<option value="Python"><!-- Option for Python -->
<option value="Ruby"><!-- Option for Ruby -->
<option value="Java"><!-- Option for Java -->
</datalist><!-- End of datalist element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document is using HTML5 doctype declaration.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as the title.
The <body> section is where the visible content of the webpage resides.
There's an <input> element with a list attribute, which connects it to the datalist.
The <datalist> element with the id "Languages" provides a list of options for the input field.
Each <option> inside the datalist represents a suggestion for the input field.
The HTML document ends with the closing </html> tag.

Live Demo:

See the Pen datalist-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page