HTML | DOM Button name Property

Last Updated : 01 Sep, 2022

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.

HTML

<!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 Button name Property
            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.

HTML

<!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="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 property
              var x = document.getElementById("GFG").name = 
              "GeeksForGeeks";
              alert ("The name was changed to: " + x);
        }
    </script>
</body>
</html>