Web development covers a lot of material, and even someone like myself who has done it for years can forget stuff many times before it sets in. We all have those *facepalm* moments. In this article, I will discuss what can and can’t be done with the id and name attributes, and why.

Let me jump straight to the point:

Solid Statement: Use the id attribute to identify elements for style and scripting purposes. Use the name attribute only for form elements.

Other than forms, there’s really no reason to use the name attribute now that the id attribute is universally compatible. The only practical use that name has left is for submitting your form values. Let me break down the differences for both.

Id Attribute

  • Valid on any element
  • Each Id should be unique
  • Can be used as anchor reference in URL
  • Is referenced in CSS or URL with # sign
  • Is referenced in JS with getElementById()
  • Shares same name space as name attribute
  • Must begin with a letter
  • Is case sensitive

Name Attribute

  • Valid only on a, form, iframe, img, map, input, select, textarea
  • Name does not have to be unique
  • Can not be referenced in CSS or URL
  • Is referenced in JS with getElementsByName()
  • Shares same name space as id attribute
  • Must begin with a letter
  • Is case sensitive
  • Used on form elements to submit information

What can and can’t be referenced in JavaScript

Consider the following code snippet

HTML4STRICTview code 
<form name="myform" id="formid">
    <p name="paragraph" id="paragraphid">some text</p>
    <textarea name="details" id="textareaid">some text</textarea>
</form>

You can reference the following:

Reference What it Returns
document.myform the form element
document.myform.details the textarea element
document.myform.id the string “formid”
document.myform.name the string “myform”
document.myform.details.id the string “textareaid”
document.myform.details.name the string “details”
document.getElementById(“textareaid”).name the string “details”
document.getElementsByName(“paragraph”) the p element
document.getElementsByName(“paragraph”)[0].id “paragraphid”

You cannot reference the following:

Bad Reference Why It Doesn’t Work
document.myform.paragraph You can directly reference user-input element names only
document.myform.paragraphid You can’t directly reference id like name, ever
document.getElementById(“paragraphid”).name You can only reference names of user inputs

Conclusions

The differences between items in the two tables above can be subtle, which can cause you a headache. By avoiding name on anything but form fields, you will make life much easier. For the sake of consistency and sanity, I also avoid ever trying to reference name in JavaScript, even for form fields (I reference those by id as well).

If this article helped you, leave a comment!