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
- Edge 12 and above
- Internet Explorer
- Microsoft Edge
- Firefox 1 and above
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
28 Jul, 2022
Like Article
Save Article