HTML select form with option to enter custom value

by

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

It looks like this:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

More Related Contents:

  1. Form inside a table
  2. What is the default form HTTP method?
  3. What is the boundary in multipart/form-data?
  4. using href links inside tag
  5. How do you overcome the HTML form nesting limitation?
  6. How do I change the color of radio buttons?
  7. How to get HTML 5 input type=”date” working in Firefox and/or IE 10
  8. How to call servlet class from HTML form
  9. Setting the character encoding in form submit for Internet Explorer
  10. Make page to tell browser not to cache/preserve input values
  11. Tri-state Check box in HTML?
  12. Can you have multiline HTML5 placeholder text in a ?
  13. Form inside a form, is that alright? [duplicate]
  14. How can I submit a POST form using the tag?
  15. HTML5 validation when the input type is not “submit”
  16. Use Fieldset Legend with bootstrap
  17. What is the correct readonly attribute syntax for input text elements?
  18. How to align input forms in HTML
  19. Which elements support the ::before and ::after pseudo-elements?
  20. Node.js – How to send data from html to express
  21. How do I style the HTML form validation error messages with CSS?
  22. Set a form’s action attribute when submitting?
  23. What happens if the action field in a has parameters?
  24. Html.BeginForm() with an absolute URL?
  25. Using rvest or httr to log in to non-standard forms on a webpage
  26. How to remove x and y on submit in HTML form with Image type button?
  27. Custom HTTP Request headers in HTML
  28. How can I control the height of an Option element in Webkit?
  29. Is it bad design to use table tags when displaying forms in html?
  30. How can I pre-populate html form input fields from url parameters?

Leave a Comment