<datalist>

Definition

The HTML datalist element is a way to provide a list of options to users when they are filling out a form. This is helpful because it allows users to select an option from the list rather than having to type out their own response. It's also useful for providing a list of pre-defined options or for providing suggestions as the user is typing.

The datalist element is typically used in conjunction with an input element, and the list of options is specified using option elements inside the datalist element. Here is an example of how you might use the datalist element in a form:

Examples

<label for="city">City:</label>
<input type="text" id="city" name="city" list="city-list">
<datalist id="city-list">
	<option value="New York">
	<option value="Los Angeles">
	<option value="Chicago">
	<option value="Houston">
	<option value="Philadelphia">
</datalist>

In this example, the input element has an id attribute of "city" and a name attribute of "city". It also has a list attribute whose value is "city-list", which specifies that this input should use the list of options defined in the datalist element with an id of "city-list".

The datalist element then contains a list of option elements, each of which has a value attribute specifying one of the options that should be available in the list. When the user starts typing in the input element, they will see a list of suggestions based on the options in the datalist element. They can then select an option from the list, or continue typing to enter their own response.

Attributes

This element makes use of the global attributes.

Best Practices

• Use the datalist element in conjunction with an input element to provide a list of options to users when they are filling out a form.
• Use the list attribute on the input element to specify which datalist element should be used to provide the list of options.
• Use the option elements inside the datalist element to specify the options that should be available in the list.
• Use the value attribute on the option elements to specify the value that should be used if the user selects that option.
• Use the label attribute on the datalist element to provide a label for the list of options.
• Use the disabled attribute on the datalist element to disable the list of options.
• Use the accesskey attribute on the datalist element to specify a keyboard shortcut for activating or focusing the element.
• Use the form attribute on the datalist element to specify the form that the element belongs to.
• Use the autofocus attribute on the datalist element to indicate that the element should be focused automatically when the page loads.
• Use the tabindex attribute on the datalist element to specify the tab order of the element.
• Use the title attribute on the datalist element to provide additional information about the element.

Accessibility Considerations

When using the datalist element, there are a few accessibility considerations to keep in mind. First, it is important to make sure that the datalist element has an appropriate label attribute. This will provide a label for the list of options, which will make it easier for users with assistive technology to understand what the element is for. Additionally, you should make sure to use the value attribute on the option elements to specify the value that should be used if the user selects that option. This will make it easier for assistive technology to understand the meaning of the options in the list.

Another important consideration is to make sure that the datalist element is keyboard accessible. This means that users should be able to interact with the element using only their keyboard, without needing a mouse. You can achieve this by using the tabindex attribute to specify the tab order of the element, and by using the accesskey attribute to specify a keyboard shortcut for activating or focusing the element.

Finally, it is important to make sure that the datalist element is properly marked up with the appropriate semantic elements. For example, you should use the label element to provide a label for the datalist element, and you should use the option element to specify the options that should be available in the list. This will make it easier for assistive technology to understand the structure and meaning of the datalist element.

Browser Compatibility