HTML datalist - Html

Introduction

HTML datalist is a feature that allows developers to create a list of options that users can choose from while typing in an input field. This is a great way to simplify data entry for users, especially on mobile devices. In this tutorial, we will cover the basics of HTML datalist and how to implement it in your web pages.

Syntax

The syntax for creating a datalist is straightforward. You simply wrap an input element with a datalist element, and then add option elements to the datalist.

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">

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

In the example above, we are creating a datalist with a list of popular web browsers. The input element has a list attribute, which is set to the id of the datalist. This connects the two elements together. The label element is used to give the input field a name, and the for attribute of the label specifies the id of the input field.

Attributes

datalist

• id - The unique identifier for the datalist element.

option

• value - Specifies the value that will appear in the input field when a user selects an option from the list.

Styling

You can style the datalist in CSS using the ::-webkit-datetime-edit-fields-wrapper pseudo-element. For example, to increase the font size of the options, you can do the following:

#browsers::-webkit-datetime-edit-fields-wrapper {
  font-size: 16px;
}

Conclusion

HTML datalist is a useful feature that can help simplify data entry on your web pages. With just a few lines of code, you can create a list of options for users to choose from while typing in an input field. Keep in mind that datalists are not supported in all browsers, so you should always include a regular select element as a fallback.