Select Box in HTML

Select Box provides the menu of options. Let us have a look at an example.

Select a your favorite movie:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Select a your favorite movie:
        <div>
            <select id="favmovie">
                <option value="">--Please select a movie--</option>
                <option value="forest_gump">Forst Gump</option>
                <option value="shawshank_red">Shawshank Redemption</option>
                <option value="schindler_list">Schindler's List</option>
            </select>
        </div>
    </body>
</html>
                        

In above example, <option> is nested inside <select>. Each <option> element represents each item in menu.

Attributes

Following attributes can be used while using a select box.

value attribute

Each <option> should have value attribute containing the data value which will be submitted to the server.
If no value attribute in <option>, then the text inside <option> will be set to default value attribute.

selected attribute

selected attribute is used to make the <option> selected default. Let us have a look at an example.

Select a your favorite movie:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Select a your favorite movie:
        <div>
            <select id="favmovie">
                <option value="">--Please select a movie--</option>
                <option value="forest_gump" selected>Forest Gump</option>
                <option value="shawshank_red">Shawshank Redemption</option>
                <option value="schindler_list">Schindler's List</option>
            </select>
        </div>
    </body>
</html>
                        

In above example, Forest Gump option is selected default.

multiple attribute

multiple attribute indicates that multiple options can be selected. Let us have a look at an example.

Select a your favorite movie:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Select a your favorite movie:
        <div>
            <select id="favmovie" multiple>
                <option value="">--Please select a movie--</option>
                <option value="forest_gump" selected>Forest Gump</option>
                <option value="shawshank_red">Shawshank Redemption</option>
                <option value="schindler_list">Schindler's List</option>
            </select>
        </div>
    </body>
</html>
                        

Multiple option can be selected with ctrl pressed.

size attribute

size attribute shows specifies the numbe of rows in the select box should be visible at one time. The default value of size attribute is 0.
According to the HTML5 specification, default value of size should be 1. But in most of the browser, it crashes. So the default value is 0.

Select a your favorite movie:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Select a your favorite movie:
        <div>
            <select id="favmovie" size="3">
                <option value="">--Please select a movie--</option>
                <option value="forest_gump" selected>Forest Gump</option>
                <option value="shawshank_red">Shawshank Redemption</option>
                <option value="schindler_list">Schindler's List</option>
            </select>
        </div>
    </body>
</html>
                        

Conclusion

In this section, we have learned about the select box.
In next section, we will learn about input type file in HTML.