Introduction

id and name may both look like simple labels on an HTML element, but they serve different purposes. The short version is that id identifies one specific element in the document, while name is mainly used for grouping or submitting form-related values.

What id Means

An id value is meant to be unique within the page. It gives one element a stable identity that CSS, JavaScript, labels, and fragment links can refer to.

1<section id="pricing">
2  <h2>Pricing</h2>
3  <p>Choose the plan that fits your team.</p>
4</section>

That id can then be used in several ways:

<a href="#pricing">Jump to pricing</a>

#pricing {
  border-top: 2px solid #333;
}

const section = document.getElementById("pricing");
console.log(section.tagName);

Because id is supposed to be unique, document.getElementById("pricing") returns one specific element.

What name Means

The name attribute is different. It is primarily used to give form controls a key for form submission, and multiple elements are allowed to share the same name.

1<form action="/search" method="get">
2  <input type="text" name="q" />
3  <button type="submit">Search</button>
4</form>

When the form is submitted, the browser sends the control value under the key q. Without name, many form controls do not contribute any value to the submitted form data at all.

Shared name values are also how radio buttons form a group:

<label><input type="radio" name="plan" value="basic" /> Basic</label>
<label><input type="radio" name="plan" value="pro" /> Pro</label>
<label><input type="radio" name="plan" value="team" /> Team</label>

All three inputs belong to the same logical field because they share the same name.

They Are Not Interchangeable

One common mistake is treating name as an older version of id or assuming either one can always replace the other. They solve different problems.

For example, a label's for attribute points to an element id, not its name:

<label for="email">Email</label>
<input id="email" name="email" type="email" />

Here:

• 'id="email" connects the label to the input and gives the element a unique DOM identity'
• 'name="email" determines the submitted field key'

In many real forms, an input has both attributes because both jobs are needed.

JavaScript and CSS Differences

id has special first-class support in browser APIs and selectors. document.getElementById(...) is built around it, and CSS has the dedicated #idValue selector.

name does not have the same uniqueness guarantee. JavaScript can still query it, but the semantics are different:

const fields = document.getElementsByName("plan");
console.log(fields.length);

This may return multiple elements, which is expected for radio groups and repeated form inputs.

CSS can target name, but only through a normal attribute selector:

input[name="plan"] {
  accent-color: teal;
}

That works, but name is not a replacement for a document-unique identifier.

When to Use Each One

Use id when you need:

• a unique DOM target
• a fragment link such as #section-one
• a label association through for
• a stable hook for scripting or accessibility relationships

Use name when you need:

• form data to be submitted under a specific key
• a group of radio buttons to act as one field
• multiple related inputs to share the same logical field name

Many inputs legitimately use both attributes because they participate in both the DOM and form submission.

Common Pitfalls

• Reusing the same id on several elements, which breaks uniqueness assumptions.
• Omitting name on a form control and then wondering why its value is not submitted.
• Using name when a label or script actually needs id.
• Assuming id values are sent automatically with form submissions.
• Treating name as a unique identifier even though it is often intentionally shared.

Summary

• 'id uniquely identifies one element in the document.'
• 'name mainly gives form controls their submission key or grouping name.'
• 'id is used by fragment links, labels, CSS #... selectors, and getElementById.'
• 'name is important for submitted form data and radio button grouping.'
• Many form elements use both because the two attributes solve different problems.