3
<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

i have used datalist tag but problem is users are allowed to enter values other than option so how to restrict users to enter data other than options or should i use other than datalist

user6688672
  • 77
  • 2
  • 11

2 Answers2

4

<datalist> provides suggestions but does not require that the user enter certain values.

For that, you should use a <select>, or something like Selectize or Select2 if you want users to type in their answers with restricted autocomplete.

It's also worth noting that <datalist> is brand-new and not supported by all browsers (in particular, I just tried it in Safari and it didn't work); you might consider using something else (such as the options I linked above) so that you don't restrict your website only to users with the latest standards-compliant browser.

wolfson
  • 192
  • 8
  • 1
    You could use html5 validation to limit the values, ref: https://stackoverflow.com/questions/24934669/how-can-i-validate-the-input-from-a-html5-datalist – Herbert Van-Vliet Jan 22 '22 at 11:38
1

I think the more sensible action is to make use of select form field. More details at: HTML Form: Select-Option vs Datalist-Option

Chris Calip
  • 11
  • 1