Pages

Saturday, February 19, 2011

HTML Select Element


The select element is used to create a drop- down menu or multiline menu. In s drop-down menu, a user can only select one option. In a multiline menu, a user can select more than one option.


Listed below are the most common attributes you can use for the select element:
  • class - provides the class or classes of the select element. 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 select element to be disable in which it cannot be selected or controlled.
  • id - provides a unique name for the select element.
  • lang - provides the language in which the enclosed content is coded.
  • multiple - sets the state of the select element to a multiline menu.
  • name - provides a name for the select element.
  • style - provides a cascading style sheet (CSS) properties to the select element.
  • tabindex - sets the position of the tabbing order of the select element.
  • title - provides a text title for the select element. Most web browser displays the value of the title as "tooltip".

Here's an example on how to use the select 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 SELECT element</title>
     </head>

     <body>
       <h1>
         the SELECT element
       </h1>
       <form action="register.php" method="post" id="frmNew" name="frmNew">
            <p>
                <select name="selCountry" id="selCountry">
                   <option value="Canada">Canada</option>
                   <option value="Philippines">Philippines</option>
                   <option value="USA">USA</option>
                </select>
            </p>
       </form>
   </body>
</html>   

0 comments:

Post a Comment