Skip to content
Related Articles

Related Articles

Improve Article

HTML <select> Tag

  • Last Updated : 16 Sep, 2021

Example: 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:

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 specifies the number of visible options in a drop-down list.

Example: 

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: 
 

Example: In this example, we are using 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:

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :