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 datalist Tag

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


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *