Bootstrap 5 Form controls Datalists
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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
Contact Us