Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features.
Bootstrap 5 Form controls datalists are used to create a group of options (group of <option> elements) that can be accessed by using an input element. It is similar to the <select> element but the difference is that it has more menu styling limitations and differences.
Datalist used Tags:
- <input>: It is used to create an input field.
- <datalist>: It is used to provide autocomplete feature in the HTML files.
- <option>: It is used to choose an option from a Drop-Down menu.
Syntax:
<label for="datalist" class="form-label">
Datalist Label
</label>
<input class="form-control" list="gfglist"
id="datalist" placeholder="search...">
<datalist id="gfglist">
<option value="...">
...
</datalist>Example 1: In this example, we will create a datalist with a group of options.
<!DOCTYPE html> <html>
<head>
<title>Bootstrap5 Form controls Datalists</title>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap5 Form controls Datalists</h2>
<label for="GFGDataList" class="form-label">
Datalist
</label>
<input class="form-control" list="GFGOptions" id="GFGDataList" placeholder="Select option">
<datalist id="GFGOptions">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Bootstrap">
</datalist>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create a datalist with a group of color options.
<!DOCTYPE html> <html>
<head>
<title>Bootstrap5 Form controls Datalists</title>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap5 Form controls Datalists</h2>
<label for="GFG_Color" class="form-label">
Select Color
</label>
<input type="color" class="form-control" list="colors" id="GFG_Color" placeholder="Select Color">
<datalist id="colors">
<option value="#ff0000"></option>
<option value="#006600"></option>
<option value="#0000ff"></option>
<option value="#cc0099"></option>
</datalist>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#datalists