The <datalist> Tag is used to enable the “autocomplete” feature for elements. Users will see a drop-down list of predefined options before entering data.
The HTML <datalist> Tag is used to autocomplete the feature on the form element. It provides a list of predefined options for users to select data.
The <datalist> Tag should be used with the <input <element with the “list” attribute. The value of the “list” attribute is associated with the datalist ID.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML datalist Tag
</title>
</head>
<body>
<h1>HTML Datalist Tag Example</h1>
<label for="tutorials">Choose your tutorial from the list:-</label>
<input list="myprogrming" name="tutorials" id="browser">
<datalist id="myprogrming">
<option value="HTML" >
<option value="JavaScript">
<option value="C">
<option value="Bootstrap">
<option value="WordPress">
<option value="CSS">
</datalist>
</body>
</html>
Output:-
HTML Datalist Tag Example
HTML Optgroup Tag
HTML <optgroup> Tag
HTML <optgroup> Tag is used to group related <option> in drop-down list within <select> element. Means to highlight title.
Using <select> with the <optgroup> Tag makes it easier to access the dropdown list, especially if the list contains a large number of options.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML optgroup Tag
</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML optgroup tag Example</h1>
<label for="cars">Choose a Time:</label>
<select name="cars" id="cars">
<optgroup label="Morning Time">
<option value="1">1 O'Clock</option>
<option value="2">2 O'Clock</option>
<option value="3">3 O'Clock</option>
<option value="4">4 O'Clock</option>
<option value="5">5 O'Clock</option>
</optgroup>
<optgroup label="Evening Time">
<option value="6">6 O'Clock</option>
<option value="7">7 O'Clock</option>
<option value="8">8 O'Clock</option>
<option value="9">9 O'Clock</option>
</optgroup>
</select>
</body>
</html>Output:-
HTML Option Tag
HTML <option> Tag
HTML <option> Tag is used to define options in the dropdown list inside <select> or <datalist> Tag. The dropdown list must contain at least one <option> Tag.
The corresponding <option> of a dropdown list can be grouped using the <optgroup> element which helps in understanding a larger list.
Note:- The <option> Tagcan be used without an attribute, but must be used with a value attribute that specifies what is sent to the server.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML option Tag
</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML option tag Example</h1>
<label for="cars">Choose a Color:</label>
<select>
<option>-------Select Your Favorite Color----------</option>
<option value="yellow" style="color: violet;">Violet</option>
<option value="white" style="color: blue;">Blue</option>
<option value="black" style="color: black;">Black</option>
<option value="green" style="color: green;">green</option>
<option value="red" style="color: red;">Red</option>
</select>
</body>
</html>Output:-