HTML - attributes - list

revision:


Content

"list" attribute : refers to datalist elements syntax some examples


"list" attribute : refers to datalist elements

top

A <datalist> element contains pre-defined options for an <input> element. The list attribute can be used on the <input> element.


syntax

top

<input list="name">

name is a string that will work as "id" and will be used to link the <input> element with the <datalist> element.


some examples

top
codes:
                    <form style="margin-left:3vw;" action="/action_page.php" method="get">
                        <label for="browser">Choose your browser from the list:</label>
                        <input list="browsers" name="browser" id="browser">
                        <datalist id="browsers">
                            <option value="Edge">
                            <option value="Firefox">
                            <option value="Chrome">
                            <option value="Opera">
                            <option value="Safari">
                        </datalist>
                        <input type="submit">
                    </form>
                
codes:

                    <input style="margin-left:3vw;" type="text" list="numbers" />
                    <input type="range" min="0" max="100" list="numbers" />
                    <input type="number" min="0" max="100" list="numbers" />
                    <datalist id="numbers">
                        <option>10</option> 
                        <option label="30">30</option> 
                        <option label="midpoint">50</option> 
                        <option>70</option>
                        <option>90</option> 
                    </datalist>