HTML Tutorial

<select> Tag in HTML | Drop-down List

The <select> tag in HTML is used to create a drop-down list. It allows users to choose one or more options from a list of predefined options. The options inside the select tag are defined using the <option> tag.

Key Points on <select> Tag:

The <select> tag creates a drop-down menu that allows users to choose from a list of options.
The options are specified with the <option> tag, where each option is a possible selection in the menu.
The multiple attribute allows multiple selections from the list, while the size attribute defines how many options are visible at once.
The name attribute specifies the name of the select element, used to identify the data when sending it to a server.
The value attribute of the <option> tag defines the value that is sent when the form is submitted.

Syntax of <select> Tag:

Syntax Example

<select name="car" id="car">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>

Example of <select> Tag in HTML:

This example demonstrates how to create a drop-down list of car brands using the <select> tag.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Select Tag Example</title>
        </head>
        <body>
            <h1>Choose Your Favorite Car</h1>
            <form>
                <label for="car">Select a car brand:</label>
                <select name="car" id="car">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>
                <input type="submit">
            </form>
        </body>
        </html>

Output

The <select> tag is an essential part of HTML forms, allowing users to choose from a list of options in a compact, accessible way. It supports both single and multiple selections, making it versatile for many use cases in web development.