Topic: HTML button Element


Summary

HTML button Element

The HTML button Element -- <button> -- is an HTML Element used as way of creating a button in HTML.

This HTML element was mainly created to replace the HTML input Element when being used with type="submit"... and even with type="image", when web developers we using those images to create stylized buttons (instead of image maps).

This element is often used inside of a form -- HTML form Element -- but can appear outside of it also.


  <button type="button" onclick="alert('It worked!');">
      Click me!
  </button>
    

  <!-- Notice the HTML <b> tags in the button below -->

  <button type="button">
      Clicking on this will actually do <b>nothing</b> at all.
  </button>
    

  <!-- Notice the HTML <img> tag in the code below -->

  <button type="button" onclick="alert('Hello')">
      <img src="clickme.png" alt="Click Me!" />
  </button>
    

  <form method="POST" action="sendmessage.php">

      <input type="text" name="subject" />
      <textarea name="message"></textarea>

      <button type="submit">
          send <img src="symbol.png" alt="&raquo;" />
      </button>

  </form>
    
Availability

The HTML button Element is available in: HTML 4, XHTML 1, and XHTML 1.1.

Attributes

The HTML button Element has the following HTML attributes.

accesskey
disabled
name
tabindex
type
value

The "value" attribute for the HTML button Element is really only useful when the HTML button Element is being used inside of a <form> -- inside of an HTML form Element. (In other words, when the button is part of a form.)

The value of this attribute will be submitted when the form is submitted, iff the form was submitted by clicking on this button (that this attribute belongs to).


  <form method="POST" action="sendmessage.php">

      <input type="text" name="subject" />
      <textarea name="message"></textarea>


      <!--
         - Note the 2 <button>'s below have the same value 
         - in their "name" attribute, but different values
         - in their "value" attributes.
        -->

      <button type="submit" name="doit" value="save">
          save <img src="symbol.png" alt="&raquo;" />
      </button>

      <button type="submit" name="doit" value="send">
          send <img src="symbol.png" alt="&raquo;" />
      </button>

  </form>  
             

With the example above, if you were handle this on the server-side with a PHP script, you would figure out which button was clicked with $_POST['doit']. (Note the key used in $_POST is the value of the name attribute on the buttons.)

If the first button is clicked -- the button with value="save" -- then $_POST['doit'] will have a value of "save". And is the second button is clicked -- the button with value="send" -- then $_POST['doit'] will have a value of "send".

NOTE, IE6 and IE7 have some problems with the HTML button Element. And to make things worse... each of them screws things up in a different way. (Although I do provide some JavaScript code to fix things.)

See Also

The following elements are related to the HTML button Element.

<form> (HTML form Element)
<input> (HTML input Element)
-- Mirza Charles Iliya Krempeaux
       

Peers