HTML DOM Input Button Object

HTML DOM Input Button Object

Last Updated : 14 Jun, 2023

The DOM Input Type Button Object is used to represent the HTML <input> element with type="button". The Input Type Button element is accessed by getElementById().

Syntax:

document.getElementById("ID");

Where “id” is the ID assigned to the “input” tag.

Example 1: In this example, we will see the use of the DOM Input Button Object

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2> DOM Input Button Object </h2>
  
    <!-- Assigning button id -->
    <input type="button" id="GFG" onclick="myGeeks()" value="Submit">
    <p id="sudo"></p>

    <script>
        function myGeeks() {
          
            // accessing 'button' id.
            let g = document.getElementById("GFG").value;
            document.getElementById("sudo").innerHTML = 
              "Value od input type button is:" + g;
        }
    </script>
</body>
</html>

Output:

Example 2: Input button Object can be created by using the document.createElement method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
        #GFG {
            margin-left: 45%;
            margin-top: 30px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2> DOM Input Button Object </h2>
    <h3 style="color:green;">
        Click the Button to Create the Button</h3>
    <button onclick="myGeeks()">Submit</button>
    <script>
        function myGeeks() {
            let g = document.createElement("INPUT");
            g.setAttribute("type", "button");
            g.setAttribute("value", "Click me");
            g.setAttribute("id", "GFG");
            document.body.appendChild(g);
        }
    </script>
</body>
</html>

Output:

Supported Browsers: The browser supported by DOM Input button Object are listed below:

Google Chrome 1 and above
Firefox 1 and above
Opera
Safari 1 and above
Edge 12 and above

HTML DOM Input Button Object

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML | DOM Progress Object

The Progress Object in HTML DOM is used to represent the HTML <progress> element. The <progress> element can be accessed by using getElementById() method.Property Values: labels: It returns the list of progress bar labels.max: It is used to set or return the progress bar value of the max

HTML | DOM Style alignItems Property

The DOM Style alignItems Property is used to set or return the default alignment of items in a flexible container. Syntax: To get the alignItems Propertyobject.style.alignItemsTo set the alignItems Propertyobject.style.alignItems = "stretch|center|flex-start|flex-end| baseline|initial|inherit" Prope

HTML| DOM Ins Object

The DOM ins Object is used to represent the HTML <ins> element. The ins element is accessed using getElementById().Properties: cite: It is used to set or return the value of the cite attribute of a inserted element.dateTime: It is used to sets or returns the value of the dateTime attribute of

HTML | DOM Style emptyCells Property

Sometimes HTML tables contain empty cells. The DOM Style emptyCells is used to display borders and background for the empty cells. Syntax: It is used to return the emptyCells property.object.style.emptyCellsIt is used to set emptyCells property.object.style.emptyCells = "show|hide|initial|inherit" R

HTML DOM UiEvent

The DOM UiEvent in HTML is an event that is triggered by the user interface belonging to the UiEvent Object. The two main purposes of the UI Event are: Allows registration of event listeners and describes event flow through a tree structure.Provide a common subset of the current event systems used i

HTML | DOM Style backgroundPosition Property

The HTML DOM Style backgroundPosition : It sets or returns position of the background-image in an element. Syntax: To get the backgroundPosition propertyobject.style.backgroundPositionTo set the backgroundPosition propertyobject.style.backgroundPosition = value Return Values: It returns a string val

HTML DOM Article Object

The DOM article object is used to represent the HTML <article> element. The article element can be accessed using the getElementById() method. Syntax: document.getElementById("id"); Where â€˜idâ€™ is the ID assigned to the article tag. Example 1: In the below program the article object is accessed

HTML DOM li Object

The DOM Li Object is used to represent the HTML <li> element. The li element is accessed by getElementById(). Properties: value: It has an attribute named value which is used to return the value of the value attribute of the <li> tag. Syntax: document.getElementById("ID"); Where â€œidâ€ is

HTML DOM Legend Object

The DOM Legend Object is used to represent the HTML <legend> element. The legend element is accessed by getElementById(). Properties: Form: it is used to return the reference of the form that contains the legend element. Syntax: document.getElementById("ID">); Where â€œidâ€ is the ID assigned

HTML DOM HR Object

The DOM HR Object is used to represent the HTML <hr> element. The hr element is accessed by getElementById(). Properties: Align: It is used to set or return the alignment of a horizontal element.color: It is used to set or return the color of the horizontal element.noshade: It is used to set o