582

When using the HTML <input> tag, what is the difference between the use of the name and id attributes especially that I found that they are sometimes named the same?

0

13 Answers 13

303

In HTML4.01:

Name Attribute

  • Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea>
  • Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes
  • Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds
  • Is referenced in JavaScript with getElementsByName()
  • Shares the same namespace as the id attribute
  • Must begin with a letter
  • According to specifications is case sensitive, but most modern browsers don't seem to follow this
  • Used on form elements to submit information. Only input tags with a name attribute are submitted to the server

Id Attribute

  • Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
  • Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file
  • Can be used as anchor reference in URL
  • Is referenced in CSS or URL with # sign
  • Is referenced in JavaScript with getElementById(), and jQuery by $(#<id>)
  • Shares same name space as name attribute
  • Must contain at least one character
  • Must begin with a letter
  • Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.)
  • Is case insensitive

In (X)HTML5, everything is the same, except:

Name Attribute

  • Not valid on <form> any more
  • XHTML says it must be all lowercase, but most browsers don't follow that

Id Attribute

  • Valid on any element
  • XHTML says it must be all lowercase, but most browsers don't follow that

This question was written when HTML4.01 was the norm, and many browsers and features were different from today.

10
  • 21
    Please note that several bullet points in this answer are either outdated or simply incorrect, so it's misleading in its current form.
    – kapa
    Aug 23, 2012 at 9:05
  • 133
    It would be helpful for the critics to specify which points are "outdated or simply incorrect" and which version of HTML their comments apply to.
    – DOK
    Jan 23, 2013 at 16:32
  • 11
    I would expect a SO answer to contain some semantic info regarding the difference between id and name, when to use each one, etc.
    – daramasala
    Nov 18, 2013 at 7:08
  • 5
    "Shares the same namespace as the id attribute" is that true ??
    – Tarik
    Feb 17, 2015 at 16:05
  • 12
    "Shares the same namespace" ... what is this supposed to mean? An id may have the same value as a name attribute (despite the requirement that an id be unique). Each attribute works as usual without conflict. This suggests that id and name attributes have separate namespaces.
    – pyrocrasty
    Jul 12, 2015 at 14:09
201

The name attribute is used for posting to e.g. a web server. The id is primarily used for CSS (and JavaScript). Suppose you have this setup:

<input id="message_id" name="message_name" type="text" />

In order to get the value with PHP when posting your form, it will use the name attribute, like this:

$_POST["message_name"];

The id is used for styling, as said before, for when you want to use specific CSS content.

#message_id
{
    background-color: #cccccc;
}

Of course, you can use the same denomination for your id and name attribute. These two will not interfere with each other.

Also, name can be used for more items, like when you are using radio buttons. Name is then used to group your radio buttons, so you can only select one of those options.

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

And in this very specific case, I can further say how id is used, because you will probably want a label with your radio button. Label has a for attribute, which uses the id of your input to link this label to your input (when you click the label, the button is checked). An example can be found below

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>
5
  • 1
    I know it sends the data to the webserver and there you can store it in the database. (was just providing some examples of what you could do) Excuse me for my inattentiveness on that matter, I have edited my answer :) Sep 19, 2011 at 19:53
  • 20
    +1 for mentioning the <label for> click-to-focus feature. This only works with ID's and not name attributes.
    – dbau
    Feb 25, 2012 at 12:03
  • 7
    As much as I appreciate that you edit your answer for correctness, I wonder if it wouldn't save you time to just replace "database" with "webserver" instead of such a verbose explanation. Aug 26, 2012 at 21:36
  • 8
    I don't usually edit my answers, but when I do, I choose to leave the original answers as they were and add footnotes :) But yes, it is possible that it would save 3 seconds of your life if I changed it :) Plus, leaving it like this, shows the mistake I made clearly, so that it (hopefully) won't be made again :) Aug 28, 2012 at 8:53
  • 6
    Maybe you can modify it like this d̶a̶t̶a̶b̶a̶s̶e̶ webserver :) using the <s>database</s> Tag :), So that people will not be mistaken till the end of the answer ;)
    – Tarik
    Feb 17, 2015 at 16:03
72

IDs must be unique

...within page DOM element tree so each control is individually accessible by its id on the client side (within browser page) by

  • JavaScript scripts loaded in the page
  • CSS styles defined on the page

Having non-unique IDs on your page will still render your page, but it certainly won't be valid. Browsers are quite forgiving when parsing invalid HTML. but don't do that just because it seems that it works.

Names are quite often unique but can be shared

...within page DOM between several controls of the same type (think of radio buttons) so when data gets POSTed to server only a particular value gets sent. So when you have several radio buttons on your page, only the selected one's value gets posted back to server even though there are several related radio button controls with the same name.

Addendum to sending data to server: When data gets sent to server (usually by means of HTTP POST request) all data gets sent as name-value pairs where name is the name of the input HTML control and value is its value as entered/selected by the user. This is always true for non-Ajax requests. In Ajax requests name-value pairs can be independent of HTML input controls on the page, because developers can send whatever they want to the server. Quite often values are also read from input controls, but I'm just trying to say that this is not necessarily the case.

When names can be duplicated

It may sometimes be beneficial that names are shared between controls of any form input type. But when? You didn't state what your server platform may be, but if you used something like ASP.NET MVC you get the benefit of automatic data validation (client and server) and also binding sent data to strong types. That means that those names have to match type property names.

Now suppose you have this scenario:

  • you have a view with a list of items of the same type
  • user usually works with one item at a time, so they will only enter data with one item alone and send it to server

So your view's model (since it displays a list) is of type IEnumerable<SomeType>, but your server side only accepts one single item of type SomeType.

How about name sharing then?

Each item is wrapped within its own FORM element and input elements within it have the same names so when data gets to the server (from any element) it gets correctly bound to the string type expected by the controller action.

This particular scenario can be seen on my Creative stories mini-site. You won't understand the language, but you can check out those multiple forms and shared names. Never mind that IDs are also duplicated (which is a rule violation) but that could be solved. It just doesn't matter in this case.

36
  • name identifies form fields*; so they can be shared by controls that stand to represent multiple possibles values for such a field (radio buttons, checkboxes). They will be submitted as keys for form values.
  • id identifies DOM elements; so they can be targeted by CSS or JavaScript.

* name's are also used to identify local anchors, but this is deprecated and 'id' is a preferred way to do so nowadays.

0
15

name is the name that is used when the value is passed (in the URL or in the posted data). id is used to uniquely identify the element for CSS styling and JavaScript.

The id can be used as an anchor too. In the old days, <a name was used for that, but you should use the id for anchors too. name is only to post form data.

10

name is used for form submission in the DOM (Document Object Model).

ID is used for a unique name of HTML controls in the DOM, especially for JavaScript and CSS.

9

The name defines what the name of the attribute will be as soon as the form is submitted. So if you want to read this attribute later you will find it under the "name" in the POST or GET request.

Whereas the id is used to address a field or element in JavaScript or CSS.

7

The id is used to uniquely identify an element in JavaScript or CSS.

The name is used in form submission. When you submit a form only the fields with a name will be submitted.

3

The name attribute on an input is used by its parent HTML <form>s to include that element as a member of the HTTP form in a POST request or the query string in a GET request.

The id should be unique as it should be used by JavaScript to select the element in the DOM for manipulation and used in CSS selectors.

6
  • 1
    s/should/MUST - it is likely to break things if it's not; at least when using JavaScript Sep 19, 2011 at 11:38
  • 1
    I agree with you, but browsers will still parse the page. It's incredibly bad practice, but it won't break the internet.
    – StuperUser
    Sep 19, 2011 at 11:39
  • But the interweb scripts on the page ;) Sep 19, 2011 at 11:41
  • It won't break, it will have unintended consequences since JS stops searching for an element with an id once it finds a matching one (see jsfiddle.net/KED6T)
    – StuperUser
    Sep 19, 2011 at 11:47
  • I find your answer a bit confusing, because you're referring to input elements as forms. One that doesn't understand the concept may get confused which names, which controls etc. Sep 19, 2011 at 17:33
3

I hope you can find the following brief example helpful:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

In the code, note that both 'name' attributes are the same to define optionality between 'male' or 'female', but the 'id's are not equals to differentiate them.

2

Adding some actual references to W3C documentation that authoritatively explain the role of the 'name' attribute on form elements. (For what it's worth, I arrived here while exploring exactly how Stripe.js works to implement safe interaction with the payment gateway Stripe. In particular, what causes a form input element to get submitted back to the server, or prevents it from being submitted?)

The following W3C documentation is relevant:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Section 17.2 Controls

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0 and https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set Section 4.10.22.4 Constructing the form data set.

As explained therein, an input element will be submitted by the browser if and only if it has a valid 'name' attribute.

As others have noted, the 'id' attribute uniquely identifies DOM elements, but is not involved in normal form submission. (Though 'id' or other attributes can of course be used by JavaScript to obtain form values, which JavaScript could then use for Ajax submissions and so on.)

One oddity regarding previous answers/commenters concern about id's values and name's values being in the same namespace. So far as I can tell from the specifications, this applied to some deprecated uses of the name attribute (not on form elements). For example https://www.w3.org/TR/html5/obsolete.html:

"Authors should not specify the name attribute on a elements. If the attribute is present, its value must not be the empty string and must neither be equal to the value of any of the IDs in the element's home subtree other than the element's own ID, if any, nor be equal to the value of any of the other name attributes on a elements in the element's home subtree. If this attribute is present and the element has an ID, then the attribute's value must be equal to the element's ID. In earlier versions of the language, this attribute was intended as a way to specify possible targets for fragment identifiers in URLs. The id attribute should be used instead."

Clearly, in this special case, there's some overlap between id and name values for 'a' tags. But this seems to be a peculiarity of processing for fragment ids, not due to general sharing of namespace of ids and names.

1

An interesting case of using the same name: input elements of type checkbox like this:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

At least if the response is processed by PHP, if you check both boxes, your POST data will show:

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

I don't know if that sort of array construction would happen with other server-side languages, or if the value of the name attribute is only treated as a string of characters, and it's a fluke of PHP syntax that a 0-based array gets built based on the order of the data in the POST response, which is just:

myfruit[]       apple
myfruit[]       orange

Can't do that kind of trick with ids. A couple of answers in What are valid values for the id attribute in HTML? appear to quote the spec for HTML 4 (though they don't give a citation):

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So the characters [ and ] are not valid in either ids or names in HTML4 (they would be okay in HTML5). But as with so many things html, just because it's not valid doesn't mean it won't work or isn't extremely useful.

-1

If you are using JavaScript/CSS, you must use the 'id' of a control to apply any CSS/JavaScript stuff on it.

If you use name, CSS won't work for that control. As an example, if you use a JavaScript calendar attached to a textbox, you must use the id of the text control to assign it the JavaScript calendar.

1
  • 2
    In CSS you can select by attribute where <input name="mytext" /> may be selected by input[name="mytext"]. You may also use this selector in jQuery as well.
    – Cafe Coder
    Sep 14, 2014 at 16:49

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