Skip to content
Related Articles

Related Articles

HTML | DOM Button name Property
  • Last Updated : 20 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

The DOM Button name Property is used to set or return the value of a name attribute of a button element. The name attribute is used to specify the name of the button and it is used to reference form data when it has been submitted by the user. It also refers to the element in the javascript.

Syntax:

  • It is used to return the name property.
    buttonObject.name
  • It is used to set the name property.
    buttonObject.name = name

Property Values

  • name: It specify the name of the Button.

Return Value It returns a string value which represent the name of the Button.

Example-1: This program illustrates how to return the name Property.






<!DOCTYPE html>
<html>
  
<head>
    <title>DOM button name Property</title>
</head>
  
<body style="text-align:center">
    <h1 style="color:green;"
            GeeksforGeeks 
        </h1>
  
    <h2
            DOM button name Property 
        </h2>
    <button id="btn" name="myGeeks" onclick="geek()">
        Click me!</button>
  
    <p id="g" style="font-size:25px;color:green;"></p>
  
    <script>
        function geek() {
            
            // Return name value.
            var x = document.getElementById("btn").name;
            document.getElementById("g").innerHTML = x;
        }
    </script>
</body>
  
</html>

Output :

Before Clicking On Button:

After Clicking On Button:

Example-2: This program illustrates how to display and change the name Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM button name Property</title>
</head>
  
<body style="text-align:center">
    <h1 style="color:green;"
            GeeksforGeeks 
        </h1>
  
    <h2
            DOM button name Property 
        </h2>
  
    <body>
  
        <button id="GFG" name="myuser">My Button
      </button>
  
        <b>
          <p>
         Click the buttons below to display and/or
            change the value of the name attribute 
            of the button above.
          </p>
      </b>
  
<button onclick="display()">
  Display name
      </button>
<button onclick="change()">
  Change name
      </button>
  
<script>
function display() {
  var x = document.getElementById("GFG").name;
  alert("The name of the button is: " + x);
}
  
function change() {
    
  // Set button name value.
  var x = document.getElementById("GFG").name = 
      "GeeksForGeeks";
  alert ("The name was changed to: " + x);
}
</script>
  
</body>
</html>

Output:

Initially:

Before Clicking On Display Button:

After Clicking the Change Button:

Supported Browsers: The browser supported by DOM Button name Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :