W3docs
en
Log in

What is the Difference Between the "id" and "name" Attributes

In this snippet, we’re going to discuss the differences between the “id” and “name” attributes, after which you’ll make a better decision of their usage.

Tags

If you have a situation when you must decide whether to use the HTML id or <span class="attribute">name</span> attribute, then you are in the right place.

In this snippet, we’re going to discuss the differences between the <span class="attribute">id</span> and <span class="attribute">name</span> attributes, after which you’ll make a better decision of their usage.

Let’s discuss them separately and then you can see an example.

The <span class="attribute">id</span> Attribute

The <span class="attribute">id</span> attribute is a unique identifier of the HTML element. Each <span class="attribute">id</span> attribute must be unique. Also, this attribute must begin with a letter and is case sensitive. It can be used as an anchor reference in URL. It isn’t associated with the data within the element.

In CSS, the <span class="attribute">id</span> attribute is referenced with the # character. In Javascript, it is referenced with getElementById().

The <span class="attribute">name</span> Attribute

The <span class="attribute">name</span> attribute defines a name of the element. It is used in the HTTP request that is sent to the server as a variable name by the browser. This attribute is associated with the data within the element.

Like the <span class="attribute">id</span> attribute, the <span class="attribute">name</span> attribute must begin with a letter and is case sensitive, but unlike the <span class="attribute">id</span> attribute, it can be not unique.

The <span class="attribute">name</span> attribute cannot be referenced in CSS. In Javascript, it is referenced with getElementsByName().

This attribute is valid only on the following elements: <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, and <textarea>.

Example of the <span class="attribute">id</span> and <span class="attribute">name</span> attributes:

Example of the “id and “name” attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Radio Buttons</h1>
    <form action="/form/submit" method="post">
      <p>Select your gender:</p>
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">Male</label><br />
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">Female</label><br />
      <input type="radio" id="other" name="gender" value="other" />
      <label for="other">Other</label>
      <br />
      <p>Select your age:</p>
      <input type="radio" id="age1" name="age" value="30" />
      <label for="age1">0 - 25</label><br />
      <input type="radio" id="age2" name="age" value="60" />
      <label for="age2">25 - 50</label><br />
      <input type="radio" id="age3" name="age" value="100" />
      <label for="age3">50 - 80</label><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
Try it Yourself »

Conclusion:

The "id" and "name" attributes are both used to identify elements in HTML, but they serve different purposes.

The "id" attribute is used to uniquely identify an element on a web page. It is often used by developers to manipulate the element with JavaScript or to create links to the element within the same page or other pages. The "id" attribute can only be used once per page, as it is intended to provide a unique identifier for that specific element.

The "name" attribute, on the other hand, is used to identify form elements and is often used to submit data to the server. For example, a text input field in a form will have a "name" attribute that corresponds to the name of the data that will be submitted to the server when the form is submitted.

Both "id" and "name" attributes are used in the DOM tree, but for different purposes. The "id" attribute is used to reference an element in the DOM tree, while the "name" attribute is used to identify form elements within the DOM tree.

In some cases, the "id" and "name" attributes may have overlapping uses, but they are intended to serve different purposes. It's important to use them correctly to ensure that your web page functions properly and is accessible to all users.