How to specify that an option should be disabled in HTML5 ?

Last Updated : 17 Mar, 2021

The <select> tag is used to create a drop-down list in an HTML document. Generally, it is used in the forms when some data is to be collected from the user. By default, all the values or options can be chosen or selected from the drop-down list created using the <select> element. However, sometimes we may want the user to select out of some possible options provided that other option(s) are disabled by default.

Method 1: This can be done using the disabled attribute. When specified, an option becomes unusable and non-clickable. The following code demonstrates this method.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      #container { 
        margin: 0 auto; 
        height: 300px; 
        width: 650px; 
        border: 5px solid black; 
        background-color: rgb(104, 241, 104); 
        opacity: 0.5; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
      } 
      .tagging { 
        height: 60px; 
        width: 130px; 
        border: 2px solid black; 
        font-family: cursive; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="container"> 
      <h1 id="heading1"> 
        GeeksforGeeks - A computer Science Portal 
      </h1> 
      <select class="tagging"> 
        <option value="tag" disabled>Choose course</option> 
        <option value="Option A">DSA</option> 
        <option value="Option B">Python</option> 
        <option value="Option C">Java</option> 
        <option value="Option D">Others</option> 
      </select> 
    </div> 
  </body> 
</html> 

Output In this example, “Choose Course” has been disabled using the “disabled” attribute. Though there are five options in the drop-down list, we have prevented users to select the first option.

Method 2: The following example is demonstrated using the <optgroup> tag in HTML5. The <optgroup> tag is used to group related options in an <select> element (drop-down list).

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      #container { 
        margin: 0 auto; 
        height: 300px; 
        width: 650px; 
        border: 5px solid black; 
        background-color: rgb(104, 241, 104); 
        opacity: 0.5; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
      } 
  
      .tagging { 
        height: 60px; 
        width: 130px; 
        border: 2px solid black; 
        font-family: cursive; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="container"> 
      <h1 id="heading1"> 
          GeeksforGeeks - A computer Science Portal 
      </h1> 
      <select class="tagging"> 
        <optgroup label="Choose Course"> 
          <option value="Option A">DSA</option> 
          <option value="Option B">Python</option> 
          <option value="Option C">Java</option> 
          <option value="Option D">Others</option> 
        </optgroup> 
      </select> 
    </div> 
  </body> 
</html> 

Output: In this example, the <optgroup> tag has been used to group all the four options together and hence preventing the “Choose Course” option to be selected by the user.