Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Button type Property
The HTML DOM Button type property is associated with the HTML <button> element. The button element by default has type=”submit” i.e clicking on any button on the form will submit the form. The button type property sets or returns the type of button.
Syntax
Following is the syntax for −
Setting the button type property −
buttonObject.type = "submit|button|reset"
Here, the submit|button|reset are button type values. Submit is set by default.
- Submit − Makes the button a submit button.
- Button − Makes a normal clickable button.
- Reset − Makes a reset button that resets the form data.
Example
Let us see an example of the HTML DOM button type property −
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html>Output
This will produce the following output −
On filling the details and clicking CHANGE −
Now clicking on Submit (which is now reset) −
In the above example −
We have first created two text fields and a button with type “submit” that will submit our data −
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
We have then created the CHANGE button that will execute changeType() method on click −
<button onclick="changeType()">CHANGE</button>
The changeType() method gets the button element by using its id and sets its type to reset. Then the message regarding the change is reflected in the paragraph with “Id” sample. Now when you click on the submit button it will reset i.e clear the form data instead of submitting it −
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}
144 Views
