HTML DOM button Object
Last Updated :
05 Jan, 2024
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 |
Sets or returns whether a button should automatically get focused on page load. |
defaultValue |
Sets or returns the default value of the button. |
disabled |
Sets or returns whether the button is disabled or not. |
form |
Returns a reference to the form that contains the button. |
formAction |
Sets or returns the value of the formAction attribute of the button. |
formEnctype |
Sets or returns the value of the formEnctype attribute of the button. |
formMethod |
Sets or returns the value of the formMethod attribute of the button. |
formNoValidate |
Sets or returns whether the button allows form data to be validated or not. |
formTarget |
Sets or returns the value of the formTarget attribute of the button. |
name |
Sets or returns the value of the name attribute of the submit button. |
type |
Returns the form element type of the button. |
value |
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 the appendChild() method to append the particular element (such as div) to display it.
Example 1:Â In this example, we will use an HTML DOM button Object in an HTML document.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Button Object
</ title >
</ 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 >
< script >
function Geeks() {
let myDiv = document.getElementById("GFG");
// creating button element
let button = document.createElement('BUTTON');
// creating text to be
//displayed on button
let text = document.createTextNode("Button");
// appending text to button
button.appendChild(text);
// appending button to div
myDiv.appendChild(button);;
}
</ script >
</ body >
</ html >
|
Output:Â
Accessing button object:
Access the button object by using the getElementById() method. Put the id of the button element in the getElementById() to access it.
Example 2:Â In this example, we will use the button object by using the getElementById() method
html
<!DOCTYPE html>
< html >
< head >
< title >
DOM Button Object
</ title >
</ 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 >
< script >
function geek() {
// Accessing the button element
// by using id attribute
let doc = document.getElementById("btn");
// Changing the text content
doc.textContent = "Click me!";
}
</ script >
</ body >
</ html >
|
Output:Â
Supported Browsers:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...