Skip to content
Related Articles

Related Articles

HTML | DOM Button type Property

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Jul, 2022
View Discussion
Improve Article
Save Article

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. 

html




<!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. 

html




<!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
  • Edge 12 and above
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!