Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
Syntax
<select>…… <option> list1 </option> <option> list2 </option> <option> list3 </option> </select>
The select tag is used to create the drop-down list whereas the option tag defines the list to select the value.
Example
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>
<html>
<title>Tutorialspoint</title>
<head>
</head>
<body>
<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>
<select>
<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>
</select>
<br><br><br><br><br><br>
<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>
</select>
</body>
</html>
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.
Conclusion
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.
1K+ Views
