HTML Tutorial - HTML Form Button








There are three ways you can use button by setting the three different type attribute.

  • submit - Specifies that the button will be used to submit a form
  • reset - Specifies that the button will be used to reset a form
  • button - Specifies that the button has no specific semantic significance




submit button - Submit Forms

When you set the type attribute of a button to submit, pressing the button will submit the form that contains the button.

This is the default behavior when you have not applied the type attribute.

Submit button have some additional attributes listed as follows.

  • form - Specifies the form (or forms) with which the button is associated.
  • formaction - Overrides the action attribute on the form element, and specifies a new URL to submit.
  • formenctype - Overrides the enctype attribute on the form element, and specifies the encoding scheme for the form data.
  • formmethod - Overrides the method attribute on the form element.
  • formtarget - Overrides the target attribute on the form element.
  • formnovalidate - Overrides the novalidate attribute on the form to specify whether client-side validation should be performed.

The following code shows how you can apply these attributes to the button element. 

<!DOCTYPE HTML>
<html>
<body>
  <form>
    <p>
      <label for="fave">Fruit: 
      <input autofocus id="fave" name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: 
      <input id="name" name="name" /></label>
    </p>
    <button type="submit" 
            formaction="http://example.com/form"
          formmethod="post">Submit Vote</button>
  </form>
</body>
</html>

The code above omitted the action and method attributes from the form element and provided the configuration through the formaction and formmethod attributes on the button element.





reset button - Reset form

If you set the type attribute from a button to reset, pressing the button causes all of the input elements in the form to be reset to their initial state.

There are no additional attributes for reset button.

The following code shows the addition of a reset button to the HTML document. 

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: 
      <input autofocus id="fave" name="fave" /></label>
    </p><!--from  w ww  . j  av  a2s  .com-->
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button type="submit">Submit Vote</button>
    <button type="reset">Reset</button>
  </form>
</body>
</html>

Click to view the demo

generic button

If you set the type attribute to button, you create a normal button. It has no special meaning and won't do anything when you press it.

The following code shows a generic button. 

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p><!--from  ww  w.  j a va 2 s.  co m-->
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button type="button">
      Do <strong>NOT</strong> press this button
    </button>
  </form>
</body>
</html>

Click to view the demo

You can style the text contained in the button element.

Image Button

<html>
<body>
    <form action="" method="post">
        <button type="submit">Submit</button>
        <br /><br />
        <button type="reset"><b>Clear this form</b> I want to start again</button>
        <br /><br />
        <button type="button"><img src="http://www.java2s.com/style/download.png" alt="submit" /></button>
    </form>
</body><!--   w  w w.jav  a 2  s.  c o m-->
</html>

Click to view the demo