Bootstrap 5 Form controls Datalists
Last Updated :
23 Nov, 2022
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.
HTML
<!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.
HTML
<!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
Share your thoughts in the comments
Please Login to comment...