Skip to content
Related Articles

Related Articles

Improve Article

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

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :