button type='' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:button

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. button

Introduction

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

Values for the type Attribute of the button Element

Value Description
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

Using the button Element to Submit Forms

When you set the type attribute 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.

When you use the button in this way, you have access to some additional attributes.

Additional Attributes when the type Attribute of a Button Is Set to submit

Attribute Description
form Specifies the form (or forms) with which the button is associated.
formactionOverrides the action attribute on the form element, and specifies a new URL to which the form will be submitted.
formenctype Overrides the enctype attribute on the form element, and specifies the encoding scheme for the form data.
formmethodOverrides the method attribute on the form element.
formtargetOverrides the target attribute on the form element.
formnovalidateOverrides the novalidate attribute on the form element to specify whether client-side validation should be performed.

These attributes override or supplement the configuration of the form element and specify the action, method, encoding scheme, and target and to control client-side validation.

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form> 
         <p> 
            <label for="fave">
               Fruit: <!--from   ww w  . j  a  v  a  2 s . c  om-->
               <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>

Related Tutorials