Semantic-UI | Dimmer

How to create a group of related options in a drop-down list using HTML ?

Last Updated : 20 May, 2020

We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to define a group of 
        related options in a 
        drop-down list? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        .gfg { 
            font-size: 40px; 
            font-weight: bold; 
            color: green; 
        } 
  
        .geeks { 
            font-size: 17px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg">GeeksforGeeks</div> 
    <div class="geeks"> 
        A computer science portal for geeks 
    </div> 
    <h2> 
        How to define a group of related 
        options in a drop-down list 
    </h2> 
    <select> 
        <optgroup label="Programming Languages"> 
            <option value="C">C</option> 
            <option value="C++">C++</option> 
            <option value="Java">Java 
        </optgroup> 
        <optgroup label="Scripting Language"> 
            <option value="JavaScript">JavaScript</option> 
            <option value="PHP">PHP</option> 
            <option value="Shell">Shell</option> 
        </optgroup> 
    </select> 
</body> 
  
</html> 

Output:

Supported Browsers are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Semantic-UI | Dimmer

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to define an option in a drop-down list in HTML5 ?

In this article, we will learn how to define an option in a drop-down list in HTML5. The <select> element is used to create a drop-down lists in HTML. This is generally used to present a list of options to the user in a form so that the user could choose one option as the needed one. The <o

How to add options to a drop-down list using jQuery?

Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery. Approach : To add more option to the existing drop-down list using the append() method : var options = { val1: 'C#', val2: 'PHP' }; var selectOption = $('#programmingLanguage');

How to groups related elements in a form using HTML ?

The <fieldset> tag in HTML5 is used to make a group of related elements in the form and it creates the box over the elements. The <fieldset> tag is new in HTML5. Syntax: <fieldset> Contents... </fieldset> Attribute: disabled: It specify that the group of related form elements

How to change Selected Value of a Drop-Down List using jQuery?

We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr

How to generate a drop down list of timezone using PHP ?

The timezone_identifiers_list() function is used to generate a dropdown list of timezone with PHP. This function is used to return an indexed array containing all the timezone identifiers. The datetimezone object is sent as a parameter to the timezone_identifiers_list() function and it returns an in

How to create an ordered list using HTML5 ?

In this article, we define an ordered list by using the <ol> tag in the document, This tag is used for ordered list, an ordered list can be numerical or alphabetical. Inside the <ol> tag you have to make a list li of items that will follow the order. Syntax: <ol> <li>Item1

How to create multiple dropdown options as a tag in ReactJS?

Choosing multiple options and creating your own options from the dropdown means allowing the user to choose more than one option from the dropdown and add his own options. Material UI for React has this component available for us and it is very easy to integrate. We can choose multiple options and c

How to choose multiple options from dropdown as a tag using ReactJS?

Choosing multiple options from the dropdown means allowing the user to choose more than one option from the dropdown. Material UI for React has this component available for us and it is very easy to integrate. We can choose multiple options from the dropdown using the following approach. Creating Re

How to set the focus on drop-down list automatically when the page loads in HTML5?

The purpose of this article is to focus the drop-down list automatically when the page loads in HTML5. The <select> autofocus attribute is a boolean attribute that specifies that the drop-down list should automatically get focus when the page loads. Syntax: <select autofocus> Example: Th

How to define a term or name in a definition list using HTML5 ?

HTML5 provides a way to specify a term and definition associated with it in a formatted way. A description list (or a definition list in older versions) provides a systematic arrangement of a term and its definition. The following tags are used for defining a definition list: <DL>: This is the