907

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.

2

21 Answers 21

779

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

10
  • 3
    other than radio button are there any usage ?? I think it should have great differences other than that ??? Commented Oct 30, 2013 at 4:23
  • 41
    @Prageeth: The difference is that a "name" transfers from the browser to the server and can be different than the "id". There are many reasons people might want that difference. For example, your server-side language/framework may need the submitted values to have certain names, but your javascript works best with something completely different in the ids. Commented Nov 1, 2013 at 22:18
  • 69
    To put it very informally, id is what your frontend (CSS, JS) works with, while name is what your server receives and can then process. This is basically what Greeso's answer says.
    – Saraph
    Commented Dec 6, 2016 at 8:15
  • 11
    It might be better to say: The name attribute is required when sending data... instead of: The name attribute is used when sending data... since any form data missing the name attribute will not be transmitted (or indeed will not be processed at all according to the HTML spec)
    – ebyrob
    Commented May 9, 2019 at 17:47
  • 1
    @IsmaelHarun While the code you used may seem to treat name and id as the same (particularly if you're writing a SPA using AJAX and no form submissions), name and id are still very different. Name is required if you want to send field values back to the server on a form submission. Id is used for normal JavaScript DOM operations. Commented Oct 11, 2021 at 2:11
397

Use name attributes for form controls (such as <input> and <select>), as that's the identifier used in the POST or GET call that happens on form submission.

Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier. It's possible to look up elements by name, too, but it's simpler and more reliable to look them up by ID.

3
  • 5
    This was hugely clarifying. So, might I infer, then, that "name" is almost a representation of the parameter "identifier" sent across to the server? This question is partly answered by the accepted answer but is not put in those terms.
    – Thomas
    Commented Feb 16, 2015 at 16:18
  • 7
    @Thomas: There is no necessary tie between name and id at all. The identifier uniquely identifies a particular HTML element on the page. The name attribute of an HTML form element, by contrast, does not have to be unique, and often isn't, such as with radio buttons or pages with multiple <form> elements. It is traditional to use the same string for name and id where both are used on a single HTML element, but nothing makes you do this. Commented Feb 17, 2015 at 2:31
  • @WarrenYoung what about the name attribute of the form tag. As far as I know, its value must also be unique, so I am confused why there is a name attribute for this tag that does the same thing as the id attribute. In my opinion, the name attribute for the form tag is obsolete and should not be used. Instead, the id attribute should be used. I haven't tested it, but I think if you have multiple forms with the same name, the last form overwrites the previous ones. Apart from the fact that it's not actually allowed, but how much HTML code is out there that is not compliant with the rules. Commented May 27, 2021 at 13:22
199

Here is a brief summary:

  • id is used to identify the HTML element through the Document Object Model (via JavaScript or styled with CSS). id is expected to be unique within the page.

  • name corresponds to the form element and identifies what is posted back to the server.

37

The way I think about it and use it is simple:

id is used for CSS and JavaScript/jQuery (it has to be unique on a page).

name is used for form handling on the server when a form is submitted via HTML (it has to be unique in a form - to some extent, see Paul's comment below).

3
  • 7
    Not entirely true - the Name attribute doesn't have to be unique in a form, as it can link radio buttons together.
    – user1945782
    Commented Dec 15, 2015 at 16:39
  • 7
    Also, it may surprise you, but PHP is not the only server language in the world. Commented Jan 10, 2019 at 4:01
  • @seesharper - That's funny. I even voted you up! Well, yes, that does not surprise me :)
    – Greeso
    Commented May 30, 2019 at 15:12
29

See id= vs name=:

What’s the difference? The short answer is, use both and don’t worry about it. But if you want to understand this goofiness, here’s the skinny:

id= is for use as a target like this: <some-element id="XXX"></some-element> for links like this: <a href="#XXX".

name= is also used to label the fields in the message send to a server with an HTTP (HyperText Transfer Protocol) GET or POST when you hit submit in a form.

id= labels the fields for use by JavaScript and Java DOM (Document Object Model). The names in name= must be unique within a form. The names in id= must be unique within the entire document.

Sometimes the name= and id= names will differ, because the server is expecting the same name from various forms in the same document or various radio buttons in the same form as in the example above. The id= must be unique; the name= must not be.

JavaScript needed unique names, but there were too many documents already out here without unique name= names, so the W3 people invented the id tag that was required to be unique. Unfortunately older browsers did not understand it. So you need both naming schemes in your forms.

Note: attribute "name" for some tags like <a> is not supported in HTML5.

2
  • 3
    A bit confusing... and I think wrong in some points. Isn't it this: name is important for <input> tags in a <form> submission as the parameters are used in the HTTP, and id is merely a unique identifier Commented Jul 22, 2015 at 15:11
  • 1
    Also, this (unregistered) user is linking to his own page (the link on his profile says mindprod.com/jgloss ). I don't know if that's a problem for SO but given the rather confusing snippet it feels inapropriate.
    – zb226
    Commented Sep 4, 2018 at 11:52
16

The ID tag - used by CSS, define a unique instance of a div, span or other elements. Appears within the JavaScript DOM model, allowing you to access them with various function calls.

The Name tag for fields - this is unique per form -- unless you are doing an array which you want to pass to PHP/server-side processing. You can access it via JavaScript by name, but I think that it does not appear as a node in the DOM or some restrictions may apply (you cannot use .innerHTML, for example, if I recall correctly).

3
  • 12
    radio buttons must share the same name to behave properly - it's not unique per form.
    – nickf
    Commented Sep 9, 2009 at 5:14
  • My mistake. Though to clarify, for text inputs, text areas and etc, name tags are used to identify them. Not necessary unique.
    – Extrakun
    Commented Sep 9, 2009 at 5:23
  • Tag? Isn't an attribute? Commented Oct 6, 2021 at 14:10
14

Generally, it is assumed that name is always superseded by id. This is true, to some extent, but not for form fields and frame names, practically speaking. For example, with form elements, the name attribute is used to determine the name-value pairs to be sent to a server-side program and should not be eliminated. Browsers do not use id in that manner. To be on the safe side, you could use the name and id attributes on form elements. So, we would write the following:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

To ensure compatibility, having matching name and id attribute values when both are defined is a good idea. However, be careful—some tags, particularly radio buttons, must have nonunique name values, but require unique id values.

Once again, this should reference that id is not simply a replacement for name; they are different in purpose. Furthermore, do not discount the old-style approach, a deep look at modern libraries shows such syntax style used for performance and ease purposes at times. Your goal should always be in favor of compatibility.

Now in most elements, the name attribute has been deprecated in favor of the more ubiquitous id attribute. However, in some cases, particularly form fields (<button>, <input>, <select>, and <textarea>), the name attribute lives on, because it continues to be required to set the name-value pair for form submission. Also, we find that some elements, notably frames and links, may continue to use the name attribute, because it is often useful for retrieving these elements by name.

There is a clear distinction between id and name. Very often when name continues on, we can set the values the same. However, id must be unique, and name in some cases shouldn’t—think radio buttons. Sadly, the uniqueness of id values, while caught by markup validation, is not as consistent as it should be. CSS implementation in browsers will style objects that share an id value; thus, we may not catch markup or style errors that could affect our JavaScript until runtime.

This is taken from the book JavaScript - The Complete Reference by Thomas-Powell.

1
  • 5
    Another reason not to get in the habit of just making id match name: you may have two forms on a page which need to submit the same data (e.g. two search fields). In this case, the name should be the same (the server-side code doesn't care which was submitted), but the id must be different (because it must be unique within the whole page).
    – IMSoP
    Commented Feb 2, 2016 at 13:22
13
<form action="demo_form.asp">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>

    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br>

    <input type="submit" value="Submit">
</form>
1
  • 3
    An explanation would be in order. E.g., what is the idea/gist? The question was "What is the difference between the id and name attributes?". Can you elaborate? Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). Commented Oct 6, 2021 at 14:17
10

name vs. id


name

  • Name of the element. For example used by the server to identify the fields in form submits.
  • Supporting elements are <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, and <param>
  • Name does not have to be unique.

id

  • Often used with CSS to style a specific element. The value of this attribute must be unique.
  • Id is a global attribute. Global attributes can be used on all elements, though the attributes may have no effect on some elements.
  • Must be unique in the whole document.
  • This attribute's value must not contain white spaces, in contrast to the class attribute, which allows space-separated values.
  • Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
1
  • I’ve seen name attributes used in style elements. I assume this is invalid?
    – Synetech
    Commented Jan 13, 2016 at 1:22
10

<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, the "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 good practice).

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

Image of URL

9

The forum thread below has answers to the same basic question, but basically, id is used for scripting identification and name is for server-side.

id vs. name attribute for HTML controls

0
9

name is deprecated for link targets, and invalid in HTML5. It no longer works at least in the latest Firefox (v13). Change <a name="hello"> to <a id="hello">.

The target does not need to be an <a> tag. It can be <p id="hello"> or <h2 id="hello">, etc. which is often cleaner code.

As other posts say clearly, name is still used (needed) in forms. It is also still used in META tags.

3
  • Do you mean "name is deprecated for link tags" instead of "name is deprecated for link targets"? As a matter of fact, the link target can be an iframe. If you don't specify the name attribute for that iframe, the target attribute does not work for the link. That behaivor remains still for all browsers and is HTML5 compliant.
    – yucer
    Commented Mar 23, 2015 at 11:42
  • I am here trying to figure out how to make a link anchor, as in the marker for where you go to when you have a URL that ends in "#something". the best i can tell, in html before 4, it must be <a name="something">. In html 4, it's <a name="something" id="something"> (matching), and in html 5, <a id="something">, although id can be a "global attribute" on anything. What i can't figure out is whether name in addition to id is tolerated in <a> in html 5. ok experiment w whatever setup i happen to have...
    – FutureNerd
    Commented Apr 1, 2020 at 4:22
  • While the a tag name attribute is deprecated, it is still supported by browsers including Firefox, so the answer is incorrect. Yes, for an anchor (target location) you should now use id on the element (<h2 id="hello">), but this wasn't really what the OP was asking.
    – Kal
    Commented Jan 25, 2021 at 22:34
7

The ID of a form input element has nothing to do with the data contained within the element. IDs are for hooking the element with JavaScript and CSS. The name attribute, however, is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.

For instance:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

When the form is submitted, the form data will be included in the HTTP header like this:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

3

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.

2

If you're not using the form's own submit method to send information to a server (and are instead doing it using JavaScript) you can use the name attribute to attach extra information to an input - rather like pairing it with a hidden input value, but it looks neater because it's incorporated into the input.

This bit does still currently work in Firefox although I suppose in the future it might not get allowed through.

You can have multiple input fields with the same name value, as long as you aren't planning to submit the old fashioned way.

2

Id:

  1. It is used to identify the HTML element through the Document Object Model (DOM) (via JavaScript or styled with CSS).
  2. Id is expected to be unique within the page.

Name corresponds to the form element and identifies what is posted back to the server.

Example:

<form action="action_page.php" id="Myform">
    First name: <input type="text" name="FirstName"><br>
    <input type="submit" value="Submit">
</form>

<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="LastName" form="Myform">
2

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.

1

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

1

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.

0

Below is an interesting use of the id attribute. It is used within the <form> tag and used to identify the form for <input> elements outside of the </form> boundaries so that they will be included with the other <input> fields within the form.

 <form action="action_page.php" id="form1">
     First name: <input type="text" name="fname"><br>
     <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">
0

Both name and id is targetable by # so not sure why ID was mentioned for this task exclusively.

I often Inspect those attributes to create specific links to bookmark (where clicking on header with mouse cursor to do the same is not provided for some reason) such as the Option File Inclusions section of MySQL 5.6 4.2.2.2 Using Option Files documentation:

https://dev.mysql.com/doc/refman/5.6/en/option-files.html#option-file-inclusions

where it's defined as <a name="option-file-inclusions"></a> (with absolutely no forms involved).

I think, the name attribute is also older than id in HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.