HTML DOM Button type Property

Last Updated : 02 Jan, 2024

The Button type Property is used to set or return the value of a type attribute of a <button> element.

Syntax:

It returns the type property.

buttonObject.type

It sets the type property.

buttonObject.type = "submit|button|reset"

Property Values:

Property Value	Description
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 example illustrate how to return the button type property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM button type Property</title>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM button type Property
    </h2>
 
    <button id="btn" type="Button"
        value="GeeksForGeeks"
        onclick="myGeek()">
        Click Here!
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeek() {
            let x = document.getElementById("btn").type;
            document.getElementById("result").innerHTML = x;
        } 
    </script>
</body>
 
</html>

Output:

Example 2: This example illustrates how to set the button type property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM button type Property</title>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM button type Property
    </h2>
 
    <form id="myForm" action="#">
        First name: <input type="text" name="fname">
        <br><br>
        Last name: <input type="text" name="lname">
        <br><br>
 
        <button id="btn" type="button" value="Submit">
            Submit
        </button>
        <br><br>
 
        <button onclick="myGeek()">
            Click Here!
        </button>
    </form>
 
    <p id="result"></p>
 
    <script>
        function myGeek() {
            let x = document.getElementById("btn")
                .type = "submit"
 
            document.getElementById("result").innerHTML =
                "The button type attribute changed to " + x;
        } 
    </script>
</body>
 
</html>