HTML <select> Tag

13 Dec, 2021
The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list.
Note: The <select> tag is used in a form to receive user responses.
Syntax:
<select>
    <option>
    </option>
    ...
</select>
Attributes: The attributes of the <select> tag are listed below: 
autofocus: The HTML <select> autofocus Attribute is used to specify that the dropdown should automatically get focus when the page loads. It is a type of boolean attribute.
disabled: The <select> disabled attribute is used to specify the select element is disabled. A disabled drop-down list is un-clickable and unusable. It is a boolean attribute.
form: The HTML <select> form attribute is used to specify one or more forms that the <select> element belongs to.
multiple: The HTML <select> multiple attribute is a Boolean Attribute. It specifies that the user is allowed to select more than one value that presents in <select> element.
name: The HTML <select> name attribute is used to specify a name for the drop-down list. It is used to reference the form data after submitting the form or to reference the element in JavaScript.
required: The HTML <select> required attribute is a Boolean attribute that is used to specify that the user should be selected value before submitting the Form.
size: The HTML size attribute is used to specify the number of visible options in a drop-down list.
Example 1: In this example, we simply create a drop-down list in HTML.
HTML
<!DOCTYPE html><html> <body>    <h2>Welcome To GeeksforGeeks</h2>    <select>        <option value="By the way">BTW</option>        <option value="Talk to you later">TTYL</option>        <option value="To be honest">TBH</option>        <option value=" I don’t know">IDK</option>    </select></body> </html>
Output:
HTML <select> Tag
Example 2: This example describes the HTML <select> tag with one pre-selected option.
HTML
<!DOCTYPE html><html> <head>    <title>HTML select Tag</title></head> <body style="text-align:center;">    <h1>GeeksforGeeks</h1>    <h2>HTML select Tag</h2>     <p>Select one option from drop-down list:</p>     <select>        <option value="GFG">GFG</option>        <option value="OS">OS</option>        <option value="DBMS">DBMS</option>        <option value="Data Structure">Data Structure</option>    </select></body> </html>
Output:
HTML <select> Tag with pre-selected option
Example 3: In this example, we are using an optgroup tag with <select> tag. optgroup tag is used for displaying related options in the drop-down list.
HTML
<!DOCTYPE html><html> <body>    <h2>Welcome To GeeksforGeeks</h2>    <label for="Brands">Choose a Brand:</label>    <select name="Brands" id="Brands">        <optgroup label="Tech Brands">            <option value="Google">Google</option>            <option value="Apple">Apple</option>        </optgroup>        <optgroup label="Automative Brands">            <option value="Tesla">Tesla</option>            <option value="audi">Audi</option>        </optgroup>        <optgroup label="Entertainment Brand">            <option value="Disney">Disney</option>        </optgroup>    </select></body> </html>
Output:
HTML <select> Tag with <optgroup> tag
Supported Browsers: 
Google Chrome
Internet Explorer
Microsoft Edge
Firefox
Safari
Opera
nidhi_biet
simmytarika5
clintra
shubhamyadav4
bhaskargeeksforgeeks
HTML-Tags
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array