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
HTML
The <optgroup> element in HTML is used to group options in a drop-down list. For example, you may have seen grouped list items, for example, graduation and post-graduation courses are displayed in different groups in a single drop-down list.
Following are the attributes−
- disabled: Specifies that an option-group should be disabled
- label: Specifies a label for an option-group Let us now see an example to implement the <optgroup> element:
Let us now see an example to implement the element −
Example
<!DOCTYPE html> <html> <body> <h2>Educational Qualification</h2> <select> <optgroup label="Graduation"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="Postgraduation"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select> </body> </html>
Output
In the above example, we have two optgroup to set a dropdown list with two sections. In this way, we have grouped options in a drop-down list−
<select> <optgroup label="Graduation"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="Postgraduation"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select>
The option element set is used to set different options for the drop-down list and allows users to select any one of them from a single optiongroup−
<option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option>
Updated on: 12-Jun-2020
11 Views
Advertisements