HTML | DOM Button type Property

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>  

Output:

Before clicking on the button:

After clicking on the button:

Supported Browsers: The browsers supported by DOM Button type Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: