datalist Tag in HTML


The <datalist> tag is an HTML element that provides a pre-defined list of options to a form input field. When a user types in the input field, a dropdown list of suggestions is displayed based on the options specified in the <datalist> tag.

Here is an example of how to use the <datalist> tag:

<label for=”city”>Choose a city:</label>
<input list=”cities” id=”city” name=”city”>

<datalist id=”cities”>
<option value=”New York”>
<option value=”Los Angeles”>
<option value=”Chicago”>
<option value=”Houston”>
<option value=”Phoenix”>

In the example above, the <input> field has an id of “city” and a name of “city”. The <datalist> element has an id of “cities” and contains a list of options for cities. When a user types in the <input> field, the browser displays a dropdown list of city options from the <datalist> element. The user can then select one of the options or continue typing their own value.

Sure, here’s some additional information about the <datalist> tag:

  • The <datalist> element is supported by all modern browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
  • The <datalist> element can be used with any <input> element that accepts text input, such as <input type="text">, <input type="email">, and <input type="search">.
  • The options in the <datalist> element can be specified using the <option> element. Each <option> element can have a value attribute that specifies the value of the option.
  • The text displayed in the dropdown list is the value of the value attribute of the <option> element.
  • You can use JavaScript to dynamically update the options in the <datalist> element based on user input or other factors.
  • The <datalist> element is a useful tool for providing users with a set of pre-defined options to choose from, which can help to ensure that user input is accurate and consistent.
Previous articledata Tag in HTML
Next articledd Tag in HTML
Namaskaar, Friends main Kapil ka Founder hu. Mere kai English blog bhi hai ,par mera motive yahan par easy language mein Technology se related Gyan ko aap tak pahunchane ka hai .taki aap kuch naya shikh sake. meri koshish hai ki bilkul simple tarike se aap ko nyi updates deta rahu taki aap bhi technology ke is yug mein peeche na rahe aur shikte rahe.Mujhse judne ke liye app mujhe Social Media par follow kar sakte hai.


Leave a Reply