Pages

Saturday, February 26, 2011

HTML Group Option Element



The group option <optgroup> element is used to organize a list of items within the select element. By using the group option <optgroup> element, one or more option elements can be divided into related categories. The group option <optgroup> element can contain only option elements. Most web browsers indent each option while the name of the group is displayed as a title on top of those options.

Listed below are the most common attributes you can use for the group option <optgroup> element:
  • class - provides the class or classes of the group option. This attribute is used to identify the name of the style class or classes to be used for rendering.
  • disable - sets the state of the group to be disable in which it cannot be selected or controlled.
  • id - provides a unique name for the group option.
  • label - provides the name of the group option.
  • lang - provides the language in which the enclosed content is coded.
  • style - provides a cascading style sheet (CSS) properties to the group option.
  • title - provides a text title for the group option. Most web browser displays the value of the title as a "tootip".
Here's an example on how to use the group option <optgroup> element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
         <mate name="keywords" content="blog, web development" />
         <title>the GROUP OPTION element</title>
     </head>

     <body>
       <h1>
         the GROUP OPTION element
       </h1>
       <form action="register.php"  method="post" id="frmNew" name="frmNew">
           <p>
               <select name="selTransportation" id="selTransportation">
                    <optgroup label="Cars">
                       <option value="Audi">Audi</option>
                       <option value="Porsche">Porsche</option>
                       <option value="Subaru" selected="selected">Subaru</option>
                    </optgroup>
               </select>
           </p>
       </form>
   </body>
</html>
 

0 comments:

Post a Comment