HTML | DOM Button type Property

Last Updated : 19 Feb, 2019

The DOM Button type Property is used to set or return the value of a type attribute of a <button> element.

Syntax:

It is used to return the type property.
```
buttonObject.type
```

It is used to set the type property.

buttonObject.type = "submit|button|reset"

Property Values:

submit: It defines a submit button .It has a default value for all browser except Internet Explorer.
button: It defines a clickable button. It has a default value for Internet Explorer.
reset: It defines a reset button which is used to change the previous data from the form.

Return Value : It returns a string value which represents the type of button.

Example-1: HTML Program that illustrate how to return the buttonObject.type property.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DOM button type Property</title> 
    </head> 
    <body style = "text-align:center"> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            DOM button type Property 
        </h2> 
          
        <button id="btn"type="Button" value="GeeksForGeeks" 
                                          onclick="geek()"> 
        Click me!</button> 
          
        <p id="g" style="font-size:25px;color:green;"></p> 
          
        <script> 
            function geek() { 
            var x = document.getElementById("btn").type; 
            document.getElementById("g").innerHTML =  x; 
            } 
        </script> 
    </body> 
</html> 

Output :
Before clicking on the button :

After clicking on the button: :

Example-2 : Example that illustrate how to set the buttonObject.type property.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DOM button type Property</title> 
    </head> 
    <body style = "text-align:center"> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            DOM button type Property 
        </h2> 
        <form id="myForm" action="/action_page.php">
       First name: <input type="text" name="fname"><br>
       Last name: <input type="text" name="lname"><br>
      <button id="btn" type="button" value="Submit">Submit</button>
      <br><br>
      <b>CLick on "Try it " Button to 
          change the type of above Button</b>
      <br><br>    
     <button  onclick="geek()"> 
        Try it</button> 
          
        <p id="g" style="font-size:25px;color:green;"></p> 
          
        <script> 
            function geek() { 
            var x = document.getElementById("btn").type = "submit"
            document.getElementById("g").innerHTML =  
             "The value of a type attribute of a button"
             + " was changed from button to " + x; 
            } 
        </script> 
    </body> 
</html> 