Teach with us

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";
}
Updated on 07-Aug-2019 12:02:28

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements