HTML | DOM button Object
The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object.
Property Values:
- autofocus: It sets or returns whether a button should automatically get focus when the page loads or not.
- defaultValue: It sets or returns the default value of the button.
- disabled: It sets or returns whether the button is disabled or not.
- form: It returns a reference to the form that contains the button.
- formAction: It sets or returns the value of the formation attribute of the button.
- formEnctype: It sets or returns the value of the formEnctype attribute of the button.
- formMethod: It sets or returns the value of the formMethod attribute of the button.
- formNoValidate: It sets or returns whether the button, allows the form-data to be validated or not.
- formTarget: It sets or returns the value of the formTarget attribute of the button.
- name: It sets or returns the value of the name attribute of the submit button.
- type: It returns the form element type of the button.
- value: It sets or returns the value of the value attribute of the button
Creating button object: The button object can be created using JavaScript. The document.createElement() method is used to create <button> element. After creating a button object use appendChild() method to append the particular element (such as div) to display it.
Example 1:
html
<!DOCTYPE html> < html > < head > < title > DOM Button Object </ title > <!-- script to create new button --> < script > function Geeks() { var myDiv = document.getElementById("GFG"); // creating button element var button = document.createElement('BUTTON'); // creating text to be //displayed on button var text = document.createTextNode("Button"); // appending text to button button.appendChild(text); // appending button to div myDiv.appendChild(button); ; } </ script > </ head > < body style = "text-align: center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 > DOM Button Property </ h2 > < p >Click the button to create a button.</ p > < button onclick = "Geeks()" > Press me! </ button > < br >< br > < div id = "GFG" ></ div > </ body > </ html > |
Output:
Before click on the button:
After click on the button:
Accessing button object: Access the button object by using the getElementById() method. Put the id of button element in the getElementById() to access it.
Example 2:
html
<!DOCTYPE html> < html > < head > < title > DOM Button Object </ title > < script > function geek() { // Accessing the button element // by using id attribute var doc = document.getElementById("btn"); // Changing the text content doc.textContent = "Click me!"; } </ script > </ head > < body style = "text-align: center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 > DOM Button Property </ h2 > < p > Click the button to change the text inside it. </ p > < button type = "button" id = "btn" onclick = "geek()" > Try it </ button > </ body > </ html > |
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari