Introduction
The <optgroup> tag in HTML is used to create a grouping of options within a dropdown list. This lab will take you through the steps to create an optgroup and customize it using attributes.
Note: You can practice coding in
index.htmland learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
Set up the HTML File
Create a new file called index.html. Add the basic HTML structure and include a <select> tag within the body element.
<!doctype html>
<html>
<head>
<title>HTML Optgroup Tag Lab</title>
</head>
<body>
<select>
<!-- options will go here -->
</select>
</body>
</html>
Add Options to the Dropdown List
Add <option> tags within the <select> tag to create your list of options. Use the value attribute to set the value for each option.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Create an Optgroup
Use the <optgroup> tag to group certain options together. Add the label attribute to define the name of the group.
<select>
<optgroup label="Group 1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
</optgroup>
</select>
Disable an Optgroup
Use the disabled attribute to disable an entire group of options within the dropdown list. Add this attribute to the opening <optgroup> tag.
<select>
<optgroup label="Group 1" disabled>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
</optgroup>
</select>
Summary
The <optgroup> tag is used to create a grouping of options within a dropdown list. You can customize it using attributes such as disabled and label. By following the steps in this lab, you can effectively group and organize your options in HTML.
