Datalist: Enhancements, Styling, and Dynamic Options

Datalist provides a set of predefined options for user input fields.
<input name="section" list="scripts" />

<datalist id="scripts"> <option value="PHP" /> <option value="JavaScript" /> <option value="ASP" /> <option value="Dot Net" /> <option value="Perl" /> <option value="JSP" /> </datalist>
This element is used inside a form to receive user inputs by selecting or by entring new data.
  • It displays options for the users to select.
  • It is with auto complete feature helping users as they type in the text box
  • Unlike drop down list box or radio button user can write any text without limiting to options given by datalist.
  • Datalist is bind ( or linked ) by input element list attribute.
HTML Datalist for selection of options or adding new input by user

Here is the demo of Datalist.

Difference between Datalist and dropdown list box ( <SELECT> )

  1. Predefined Options: select shows all options, datalist suggests as typed.
  2. User Input: select limits to given options, datalist allows custom values.
  3. Appearance: select is consistent but less style-flexible, datalist varies by browser.
  4. Control and Flexibility: select enforces choices, datalist offers suggestions with flexibility.
  5. Use Cases: select for restricted input, datalist for guided but open input.
More about Dropdown Listbox ( SELECT )

When to use Datalist

datalist When we give user the choice to enter data other than the available list then datalist to be used.

If we don’t want user to enter anything other than available list then go for dropdown listbox.

Example of Datalist

We ask user to enter the name of the town they are staying. We are not sure of having a list of all the towns as option to select by the user. Here user can select the town name if available or can enter a new town which is not available in our list of towns.

Datalist is a powerful tool for developers. Here are some of the applications.

Options of a Datalist taken from SQLite database table
Adding options to a Datalist by JavaScript
Adding options to a Datalist from MySQL table by using PHP and Ajax
Displaying Matching words by using Autocomplete while entering text JQuery UI
Datalist is not supported by Safari browser.
HTML Form Drop down Listbox Checkbox in a form


* indicates required
Subscribe to plus2net



    How can i make to submit the form after selecting a option from datalist ??

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer