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.
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
.png)
