HTML datalist tag

HTML <datalist> element suggests different predefined options in an input field. We have to select one of the options. It must be used with <input> tag.

Example

<p>Which is your favourite subject.</p>
 <input list="data" name="subject">
 <datalist id="data">
  <option> Physics 
  <option> Chemistry 
  <option> Mathematics 
  <option> None 
 </datalist>
Try </>

list attribute contains the id of <datalist> tag.

Specific uses

datalist element offers the user different options to select only one option in a from. For instance, You are asked to choose one subject from different options.

Some browsers don't support datalist element. In this case, select element can be used in inside datalist element.

Example

<p>Which is your favourite subject.</p>
<input list="data" name="subject">
<datalist id="data">
or select option from the list
 <select>
  <option value="Physics">
  <option value="Chemistry"> 
  <option value="Mathematics">
  <option value="none">
 </select>
</datalist>
Try</>

Related Tags

TagsDescription
<input> It defines an input field where a user can edit.
<input list="The id of the datalist element" name="unique-name" />
<option> It defines an option as a part of the list.
<option> defines an option <option>

Tag omission

Both starting and ending tags are necessary for the datalist element.

Global Attributes

All the global attributes are applicable on the datalist element.



Was this article helpful?

 

Email:

Message:

Get the newsletter