Pages

Sunday, February 13, 2011

HTML Button Element


The Button element is used to create a customizable button. The difference of the button element from the button of the input element is it can contain text or other elements that offers the capability to add more design.

Listed below are the most common attributes you can use for the button element:
  • class - provides the class or classes of the heading. This attribute is used to identify the name of the style class or classes to be used for rendering.
  • disabled - sets the state of the button to be disabled in which it cannot be selected or controlled.
  • id - provides a unique name for the button.
  • lang - provides the language in which the enclosed content is coded.
  • name - provides a name for the button.
  • style - provides a cascading style sheet (CSS) properties to the button.
  • tabindex - sets the position of the tabbing order of the button.
  • title - privides a text title for the button. Most web browser displays the value of the title as "tooltip".
  • type - provides the type of control the button will create, such as button, submit and reset.
  • value - provides the name that is displayed at the center of the button.

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

     <body>
       <h1>
         the BUTTON element
       </h1>
       <form action=}register.php" method="post" id="frmRegistration" name="frmRegistration">
         <p>
            <button type="submit" name="btnForward" id="btnForward">
                 <img src="forward.png" width="55" height="50" alt="Forward Button" />
            </button>
       </form>
   </body>
</html>

0 comments:

Post a Comment