Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Button Object
The HTML DOM Input Button Object represents an HTML input element with the type attribute set to "button". This object provides programmatic access to button elements, allowing you to create, modify, and interact with buttons dynamically using JavaScript.
The Input Button Object is used to create interactive buttons that can trigger JavaScript functions when clicked. Unlike submit buttons, these buttons do not automatically submit forms but instead execute custom JavaScript code.
Syntax
Following is the syntax to create an Input Button Object dynamically −
var newButton = document.createElement("INPUT");
newButton.setAttribute("type", "button");
To access an existing button element −
var button = document.getElementById("buttonId");
The type attribute can be set to "button", "submit", or "reset" depending on the button's intended functionality.
Properties
Following are the key properties of the Input Button Object −
| Property | Description |
|---|---|
autofocus |
Gets or sets whether the button should automatically get focus when the page loads. |
defaultValue |
Gets or sets the default value of the button as specified in the HTML. |
disabled |
Gets or sets whether the button is disabled (true) or enabled (false). |
form |
Returns a reference to the form element that contains the button. |
name |
Gets or sets the value of the name attribute of the button. |
type |
Returns the type of the input element ("button", "submit", or "reset"). |
value |
Gets or sets the text displayed on the button. |
Creating Button Objects Dynamically
Following example demonstrates how to create and manipulate Input Button Objects dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Creating Button Objects</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Dynamic Button Creation</h2>
<button onclick="createButton()">Create New Button</button>
<div id="buttonContainer" style="margin-top: 20px;"></div>
<script>
function createButton() {
var newButton = document.createElement("INPUT");
newButton.setAttribute("type", "button");
newButton.setAttribute("value", "I'm a new button!");
newButton.style.margin = "10px";
newButton.style.padding = "8px 16px";
newButton.style.backgroundColor = "#4CAF50";
newButton.style.color = "white";
newButton.style.border = "none";
newButton.style.borderRadius = "4px";
newButton.onclick = function() {
alert("New button clicked!");
};
document.getElementById("buttonContainer").appendChild(newButton);
}
</script>
</body>
</html>
Each time you click "Create New Button", a new button is added to the container with its own click event.
Accessing Button Properties
Following example shows how to access and modify button properties −
<!DOCTYPE html>
<html>
<head>
<title>Button Properties Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Button Properties Demo</h2>
<input type="button" id="myButton" name="testButton" value="Original Text">
<br><br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="changeProperties()">Change Properties</button>
<button onclick="toggleDisabled()">Toggle Disabled</button>
<div id="output" style="margin-top: 20px; background: #f5f5f5; padding: 15px; border-radius: 5px;"></div>
<script>
function showProperties() {
var btn = document.getElementById("myButton");
var output = document.getElementById("output");
output.innerHTML =
"<b>Button Properties:</b><br>" +
"Type: " + btn.type + "<br>" +
"Name: " + btn.name + "<br>" +
"Value: " + btn.value + "<br>" +
"Disabled: " + btn.disabled;
}
function changeProperties() {
var btn = document.getElementById("myButton");
btn.value = "Text Changed!";
btn.name = "modifiedButton";
document.getElementById("output").innerHTML = "<b>Properties changed!</b>";
}
function toggleDisabled() {
var btn = document.getElementById("myButton");
btn.disabled = !btn.disabled;
document.getElementById("output").innerHTML =
"<b>Button is now: </b>" + (btn.disabled ? "Disabled" : "Enabled");
}
</script>
</body>
</html>
This example demonstrates reading and modifying various button properties including type, name, value, and disabled state.
Button Replication Example
Following example shows how to create a button that replicates itself when clicked −
<!DOCTYPE html>
<html>
<head>
<title>Button Replication Demo</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" value="Click to replicate me" style="
display: block;
margin: 1rem auto;
background-color: #007bff;
color: white;
border: 1px solid #007bff;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
">
<div id="message" style="font-weight: bold; font-size: 1.2rem; color: #28a745; margin-top: 20px;"></div>
<script>
var buttonCount = 1;
function createReplica() {
var newButton = document.createElement("INPUT");
newButton.setAttribute("type", "button");
newButton.setAttribute("value", "Click to replicate me");
newButton.setAttribute("onclick", "createReplica()");
newButton.style.cssText = `
display: block;
margin: 1rem auto;
background-color: #007bff;
color: white;
border: 1px solid #007bff;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
`;
document.body.appendChild(newButton);
buttonCount++;
document.getElementById("message").innerHTML =
"Total buttons created: " + buttonCount;
}
</script>
</body>
</html>
The output shows an initial button that creates identical copies of itself when clicked −
Input Button Object Example [Click to replicate me] (blue button) Total buttons created: 1 (Clicking the button adds more identical buttons below)
Form Integration
Input buttons can be associated with forms and access form properties −
<!DOCTYPE html>
<html>
<head>
<title>Button Form Association</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Button Form Properties</h2>
<form id="sampleForm" name="testForm">
<input type="text" name="username" placeholder="Enter username"><br><br>
<input type="button" id="formButton" value="Check Form Info" onclick="showFormInfo()">
</form>
<div id="formInfo" style="margin-top: 20px; padding: 15px; background: #e9ecef; border-radius: 5px;"></div>
<script>
function showFormInfo() {
var btn = document.getElementById("formButton");
var formInfo = document.getElementById("formInfo");
if (btn.form) {
formInfo.innerHTML =
"<b>Form Information:</b><br>" +
"Form ID: " + btn.form.id + "<br>" +
"Form Name: " + btn.form.name + "<br>" +
"Number of Elements: " + btn.form.elements.length;
} else {
formInfo.innerHTML = "Button is not associated with any form.";
}
}
</script>
</body>
</html>
This demonstrates how buttons can access their parent form using the form property.
Conclusion
The HTML DOM Input Button Object provides comprehensive control over button elements through JavaScript. You can create buttons dynamically, modify their properties, handle events, and integrate them with forms. This makes buttons highly versatile for creating interactive web applications with custom functionality.
296 Views
