Monday, September 25, 2023
HomeWeb DevelopmentHTML 5 TutorialsWhat Is DATALIST Element In HTML 5 ?

What Is DATALIST Element In HTML 5 ?

[vc_custom_heading text=”DATALIST Element In HTML 5″ font_container=”tag:h1|text_align:left”]

A standout amongst the most utilized Javascript gadgets over the previous decade has been the content box autocomplete gadget. Each Javascript structure has their own particular autocomplete gadget and a considerable lot of them have gotten to be truly praiseworthy. Much like the placeholder first experience with markup, an every now and again utilized usefulness has been moved from a Javascript-just utility to HTML through the new DATALIST component.

<datalist> …. </datalist>

The HTML <datalist> Element holds a set of <option> elements that speak to the qualities accessible for different controls.

The <datalist> tag defines an arrangement of predefined choices for an input component.

The <datalist> tag is utilized to give an “autocomplete” offer on input components. Clients will see a drop-down arrangement of predefined choices as they input information.

You can utilize the input component’s schedule ascribe to tie it together with a datalist component.

Here is the Syntax for DATALIST Element

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

1
2
3
4
5
<datalist>
    
    <option value="option value">
</datalist>

Below is complete syntax along with example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    
    <head>
         <title>Title name will go here</title>
    </head>
    
    <body>
        
        <input list="country">
        
        <datalist id="country">
    
            <option value="India">
            <option value="Australia">
            <option value="Sourth Africa">
            <option value="Canada">
            <option value="America">
        </datalist>
        
        <input type="submit" value="submit"/>
        
    </body>
    
</html>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular