Difference between id and name attributes in HTML

user_167511 0
Viewed 495838

What is the difference between the id and name attributes? They both seem to serve the same purpose of providing an identifier.

I would like to know (specifically with regards to HTML forms) whether or not using both is necessary or encouraged for any reasons.

attributes html
21 Answers

<body>
<form action="">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <button>Submit!</button>
</form>
</body>

As we can see here, "id" and "for" elements are interconnected. If you click on the label (Username) then the input field will be highlighted (this is useful for mobile users and is considered as a good practice).

On the other hand, the "name" element is useful while submitting the form. Whatever you enter in the input field it will be displayed on the URL. Please see the attached image.

Image of URL

user_115652360

ID is used to uniquely identify an element.

Name is used in forms. Although you submit a form, if you don’t give any name, nothing will will be submitted. Hence form elements need a name to get identified by form methods like "get or push".

And only the ones with the name attribute will go out.

user_85214340

In all the time this question has been around, I am chagrined (and perhaps a bit saddened) that nobody has thought to mention accessibility which, though always important, has been steadily gaining support amongst both management and software engineers (just from my personal observations; no hard data to back that up).

One statistic I can provide is this (source):

Accessibility lawsuits

So awareness of accessibility shortcomings show a steadily growing trend. The same reference mentions that, from those numbers, one can observe that at least one lawsuit is filed every hour!

So how does accessibility weigh in on name vs id?

According to the World Wide Web Consortium (W3C):

The for attribute of the label must exactly match the id of the form control.

user_1156900

Based on personal experiences and according to the W3Schools description for attributes:

ID is a global attribute and applies to virtually all elements in HTML. It is used to uniquely identify elements on the Web page, and its value is mostly accessed from the frontend (typically through JavaScript or jQuery).

name is an attribute that is useful to specific elements (such as form elements, etc.) in HTML. Its value is mostly sent to the backend for processing.

HTML Attribute Reference

Admin1

There is no literal difference between an id and name.

name is an identifier and is used in the HTTP request sent by the browser to serve as a variable name associated with data contained in the value attribute of the element.

The id on the other hand is a unique identifier for browser, client side and JavaScript. Hence the form needs an id while its elements need a name.

id is more specifically used in adding attributes to unique elements. In DOM methods, Id is used in JavaScript for referencing the specific element you want your action to take place on.

For example:

<html>

<body>
    <h1 id="demo"></h1>

    <script>
        document.getElementById("demo").innerHTML = "Hello World!";
    </script>
</body>

</html>

Same can be achieved by name attribute, but it's preferred to use id in a form and name for small form elements like the input tag or select tag.

user_105898040

The id will give an element an id, so once you write real code, (like JavaScript) you can use the id to read elements. The name is just a name, so the user can see the name of the element, I guess.

Example:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); // Reads the element that has the id "heading".
</script>

// You can also use something like this:
document.getElementById("heading").value; // Reads the value of the selected element.
user_135714650
Related