Just found an interesting tag – <datalist>, which allows to provide the list with options for user to select.
I remember while building my web application I used select options and generated the list from some source.
How it works with <datalist>:
<form> <div> <input name="country" list="countries" placeholder="Country"> <datalist id="countries"> <option value="Afghanistan"> <option value="Albania"> <option value="Algeria"> <option value="Andorra"> ... </datalist> </div> </form>
Found the explanation:
- <select> element – user must select one of the provided options
- <datalist> element – it’s only the list with suggestions, but user can enter anything
With <datalist> I can enter anything in there:
So, <select> = Requirement vs <datalist> = Suggestion