Datalist: Enhancements, Styling, and Dynamic Options

<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>

• 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.

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.

When to use Datalist

Example of Datalist