The <datalist> element in HTML provides a list of predefined options to an associated <input> element. It allows users to either select from a list of options or enter their own custom input, making the input process more flexible and user-friendly. The <datalist> is particularly useful when there are suggestions but not strict requirements, offering a way to guide users without limiting their input.
Unlike a <select> element, users can either pick an option from the list or enter a new value not in the list.
datalist.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>datalist Example</title> </head> <body> <form action="https://httpbin.org/post" method="POST"> <label for="browser">Choose your favorite browser:</label> <input list="browsers" id="browser" name="browser" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> <option value="Safari"> <option value="Opera"> </datalist> <input type="submit" value="Submit"> </form> </body> </html>
Above snippet generate below screen.
No comments:
Post a Comment