Learn about HTML - <optgroup> Tag
Hello Developers,
HTML is the very basic language for learning web development. The are different types of tags exist in HTML. <outgroup> is one of them. Let's see what it does.
If you have a long list of options, groups of related options are easier to handle for a user.
For making a user-friendly select list, grouping is the best way. To make a long list of options into a group <outgroup> is used. If we seek for the actual definition we can say that The <optgroup> tag is used to group related options in a <select> element (drop-down list).
Let's say we have some country name in a list. If we want to divide the country list into some group, wqe can use <outgroup> in the <select> menu.
The Below code represents the grouping of the country name in the <select> block.
<select name="coutries" id="coutries" class="form-control">
<optgroup label="Asian Countries">
<option value="Bangaladeh">Bangladesh</option>
<option value="India">India</option>
</optgroup>
<optgroup label="African Countries">
<option value="Morocco">Morocco</option>
<option value="Ghana">Ghana</option>
</optgroup>
</select>
If we add the code in a bootstrap HTML page, then it will look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Example of HTML <em>optgroup</em> Tag</title>
</head>
<body>
<div class="container">
<h1>The HTML <em>optgroup</em> Tag</h1>
<form action="#">
<label for="coutries" class="form-label">Asian coutries</label>
<select name="coutries" id="coutries" class="form-control">
<optgroup label="Asian Countries">
<option value="Bangaladeh">Bangladesh</option>
<option value="India">India</option>
</optgroup>
<optgroup label="African Countries">
<option value="Morocco">Morocco</option>
<option value="Ghana">Ghana</option>
</optgroup>
</select>
<br><br>
<input type="button" value="Submit" class="btn btn-success">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Let's run the code in the localhost. The output is given below:
Hope this might help in the journey of development.
Read More: How to make ready a flutter application for release in Google Play Store or App Store
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.