HTML5: How to specify a list of pre-defined options for input controls?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.