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.
<!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.
<!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 >
|
Output:
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Firefox
- Opera
- Safari