<optgroup> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:optgroup

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. optgroup

Introduction

You can add some structure to a select element by using the optgroup element.

You use the optgroup element to group option elements together.

The label attribute creates a title for the grouped options.

The disabled attribute disables the option elements contained in the optgroup.

The optgroup Element summary

Item Value
Element:optgroup
Element Type: N/A
Permitted Parents: The select element
Local Attributes: label, disabled
Contents: option elements
Tag Style: Start and end tag
New in HTML5? No
Changes in HTML5: None
Style Convention: None

Using the optgroup Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <input type="hidden" name="recordID" value="1234"> 
         <p> 
            <label for="name">
                Name: <!--  w  ww  .j a v a 2 s  . co m-->
               <input value="java2s.com" id="name" name="name"> 
            </label> 
         </p> 
         <p> 
            <label for="password">
                Password: 
               <input type="password" placeholder="Min 6 characters" id="password" name="password"> 
            </label> 
         </p> 
         <p> 
            <label for="fave" style="vertical-align:top">
                Favorite Fruit: 
               <select id="fave" name="fave"> 
                  <optgroup label="Top Choices"> 
                     <option value="CSS" label="CSS">CSS</option> 
                     <option value="HTML" label="HTML">HTML</option> 
                  </optgroup> 
                  <optgroup label="Others"> 
                     <option value="Oracle" label="Oracle">Oracle</option> 
                     <option value="Typescript" label="Typescript">Typescript</option> 
                  </optgroup> 
               </select> 
            </label> 
         </p> 
         <input type="submit" value="Submit"> 
      </form>  
   </body>
</html>

Related Tutorials