html tutorial - Datalist <datalist> tag in HTML - html5 - html code - html form




datalist tag in html

Learn html - html tutorial - datalist tag in html - html examples - html programs

  • The <datalist> tag used to specify the set of pre-defined values for an <input> tag.
  • The <datalist> tag used to create an “autocomplete” options for <input> elements.
  • The <option> tag used to specify the options in the data list.
  • <datalist> tag belongs to Flow content and Phrasing content.
  • <datalist> tag supports Global Attributes and Event Attributes.

Syntax for <datalist> tag:

<datalist>Content is here</datalist>

Differences between HTML 4.01 and HTML5 for <datalist> tag:

HTML 4.01

  • HTML4 does not support <datalist> tag.

HTML5

  • HTML5 supports <datalist> tag.

Sample Coding for <datalist> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy datalist Tag</title>
    </head>
    <body>
        <input list=”Wikitechy tutorials”>
        <datalist id=”Wikitechy tutorials”>
            <option value=”Wikitechy html”>
            <option value=”Wikitechy css”>
            <option value=”Wikitechy php”>
        </datalist>
     </body>
</html>

Code Explanation for <datalist> tag:

code explanation for datalist tag

  1. <input> tag used to get the input from the user.
  2. <datalist> tag used to display a drop-down list specify the set of pre-defined values for an <input> tag.
  3. <option> tag used to specify the list of options in the datalist.

Output of <datalist> tag:

output for datalist tag

  1. The output displays the pre-defined terms in the datalist as “HTML”,”CSS” and “PHP”.

Browser Support for <datalist> tag:

Yes Yes Yes No Yes

Related Searches to datalist tag in html

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×