HTML | DOM Button name Property

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :

Before Clicking On Button:

After Clicking On Button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.