Select Tag in HTML5

in this article I am going to describe about the implementation and use of Select Tag in HTML5.
  • 1804

Select Tag in HTML5

The <select> element is used to create a drop-down list. This tag is used in conjunction with the <option> tag to produce a list of options.

The <option> tag inside the <select> tag define the available options in the list. We can use <optgroup> tag within <select> tag for grouping option. 

Note: The <select> element is a form control and can be used in a form to collect user input.

Browser Support

<select> tag is supported in all major browsers.

Syntax

Syntax of <select> tag in HTML5

<select>

    <option>Text</option>

    <option>Text</option>

</select>

Attributes of <select> tag in HTML5

   Attribute     Value     Description
   autofocus     autofocus Specifies that the drop-down list should automatically get focus when the page loads
   disabled     disabled Specifies that a drop-down list should be disabled
   form     form_id Defines one or more forms the select field belongs to
   name     name Specify the name of select element.
   multiple     multiple Specify user can select multiple options
   required     required Specifies that the user is required to select a value before submitting the form
   size     number Specify number of  visible option for user in selection list.

HTML5 has added some new attributes suchas autofocus,form and required.

Example of <select> tag in HTML5

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Select Tag</title>

</head>

<body>

    <h1>Example of select tag in HTML5.</h1>

    <form id="form1">

        <table style="width: 50%">

            <tr>

                <td>

                    <label>Id</label></td>

                <td>

                    <input type="text"></td>

            </tr>

            <tr>

                <td>

                    <label>Name</label></td>

                <td>

                    <input type="text"></td>

            </tr>

            <tr>

                <td>Disabled attribute</td>

                <td>

                    <select disabled>

                        <option>Male</option>

                        <option>Female</option>

                    </select></td>

            </tr>

            <tr>

                <td>AutoFocus Attribute</td>

                <td>

                    <select autofocus>

                        <option>10</option>

                        <option>20</option>

                        <option>30</option>

                        <option>40</option>

                    </select>

                    <input type="submit" value="Submit" />

                </td>

            </tr>

            <tr>

                <td>Multiple Attribute</td>

                <td>

                    <select multiple="multiple">

                        <option>Cold Drink</option>

                        <option>Burger</option>

                        <option>Pizza</option>

                        <option>Pao Bhaji</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>Size Attribute</td>

                <td>

                    <select size="3">

                        <option>Cold Drink</option>

                        <option>Burger</option>

                        <option>Pizza</option>

                        <option>Pao Bhaji</option>

                    </select></td>

            </tr>

        </table>

    </form>

</body>

</html>

Output

 select.jpg

© 2020 DotNetHeaven. All rights reserved.