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.
<!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.
<!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
- Internet Explorer
- Firefox
- Opera
- Safari