How to disable the drop-down list in HTML5?

The drop-down list defines the list of available options selected by the users. We visit many websites in our day-to-day work and on those web pages we will find various options in the drop-down list in one or more navigation to access that particular webpage. For example- Drop-down menus on large websites can help users save time by letting them skip one or two levels to the information they are looking for. The example used in this article will explain to create an HTML5 code that will disable such types of drop down list.

Visual Representation


<option> list1 </option>
<option> list2 </option>
<option> list3 </option>

The select tag is used to create the drop-down list whereas the option tag defines the list to select the value.


In this example, we will first use the h1 tag to set the main title of the problem statement and the p tag to set some information on the drop-down list. To disable the drop-down list it will use the keyword disabled with the select tag and display the result on the webpage.

<!DOCTYPE html>
   <h1>Central Board of Secondary Education</h1>
   <p style="color: #000fff"><b>The example to display non-disable dropdown list</b></p>
   <p>The Courses offer for intermediate science student</p>
      <option value="physics">Physics</option>
      <option value="chemistry">Chemistry</option>
      <option value="biology">Biology</option>
      <option value="math">Math</option>
      <option value="Social Science">Social Science</option>
   <p style="color: #000fff"><b>The example to display disable dropdown list</b></p>
   <h3>The Courses offer for intermediate commerce student</h3>
   <select disabled>
      <option value="physics">Business Mathematics</option>
      <option value="chemistry">Economics</option>
      <option value="biology">Accountancy</option>
      <option value="math">English</option>
      <option value="Social Science">Tally</option>

Advantages of Using a Drop-down List

  • It helps to avoid scrolling webpage.

  • To access the content very easily.

  • There is an advantage to an E-commerce webpage which helps to filter the particular product section.


We understood the example of a drop-down list by disabling it. The above output shows the difference between the disabled and non-disabled drop-down lists. The disabled option might be helpful when the administrator wants to secure the specific webpage and it becomes inactive and unresponsive.

Updated on: 15-May-2023


Kickstart Your Career

Get certified by completing the course

Get Started