Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Button Object
The HTML DOM Input Button Object serves as an input HTML element with type attribute as “button”.
Let us see how to create an Input Button Object −
syntax
Following is the syntax −
var newButton = document.createElement(“INPUT”); newButton.setAttribute(“type”,”value”);
Here, value can be “button”, “submit” & “reset”.
properties
Following are the properties of Input Button Object −
Property | Explanation |
|---|---|
| autofocus | This property returns and alter the value of autofocus attribute of an input button in HTML. |
| defaultValue | It returns and modify the default value of an input button in HTML. |
| disabled | It returns and alter the value of disabled attribute of an input button in HTML. |
| form | It returns the reference of the form which enclose the input button. |
| name | It returns and alter the value of the name attribute of an input button in HTML. |
| type | This property returns the type of the input button i.e. whether it is of “button” type, “submit” type or “reset” type. |
| value | It returns and modify the content of the value attribute of input button. |
Example
Let us see an example of DOM Input Button Object −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Input Button Object</title>
<style>
body{
text-align:center;
}
.btn{
display:block;
margin:1rem auto;
background-color:#db133a;
color:#fff;
border:1px solid #db133a;
padding:0.5rem;
border-radius:50px;
width:60%;
font-weight:bold;
}
.show-msg{
font-weight:bold;
font-size:1.4rem;
color:#ffc107;
}
</style>
</head>
<body>
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" class="btn" value="Click to replicate
me">
<div class="show-msg"></div>
<script>
function createReplica() {
var newButton = document.createElement("INPUT");
newButton.setAttribute("type","button");
newButton.setAttribute("class","btn");
newButton.setAttribute("value","Click to replicate me");
newButton.setAttribute("onclick","createReplica()");
document.body.appendChild(newButton);
}
</script>
</body>
</html>Output
This will produce the following output −
Click on “Click to replicate me” button to create a new replica of the same button.
Updated on: 12-Jun-2020
132 Views
Advertisements