HTML & CSS Interview Question #40

What is the difference between select, datalist, and autocomplete?

Forms, Validation, Metadata, Media, Responsive Images & Accessibility Junior Beginner

Quick Interview Answer

select presents a defined list of options from which the user selects. datalist provides suggested values for a compatible input while still allowing the user to enter another value.

Detailed Explanation

select presents a defined list of options from which the user selects. datalist provides suggested values for a compatible input while still allowing the user to enter another value.

The autocomplete attribute gives the browser a hint about the semantic purpose of a field so it can offer appropriate previously stored or profile data. These features solve different problems and can sometimes be used together with other form attributes.

Code Example

<label for="country">Country</label>
<select id="country" name="country">
    <option value="pk">Pakistan</option>
    <option value="nz">New Zealand</option>
</select>

<label for="city">City</label>
<input id="city"
       name="city"
       list="cities"
       autocomplete="address-level2">

<datalist id="cities">
    <option value="Multan">
    <option value="Lahore">
</datalist>