HTML name Attribute

Introduction

The name attribute assigns the submission key for a form control. When a user submits a form, the browser sends data as name=value pairs—for example username=alex and email=alex@example.com. Without a name, the control is omitted from the submission. Use it on <input>, <textarea>, <select>, and <button>. Do not confuse name with id: id labels the element in the page; name labels the field for the server.

What You’ll Learn

Purpose of name Attribute

The primary purpose of name is to identify form data on submission. Server-side code reads keys like password or quantity from the request. JavaScript can read the same data with FormData or new URLSearchParams(new FormData(form)).

Radio buttons in one group intentionally share a name so the browser submits only the selected option’s value. Checkboxes can share a name (multiple values) or use distinct names. Multi-select lists send several values under one name when multiple is set.

📝 Syntax

Add name with a string identifier on form controls:

<form action="/signup" method="post">

  <label for="username">Username:</label>

  <input type="text" id="username" name="username">



  <label for="password">Password:</label>

  <input type="password" id="password" name="password">



  <label><input type="radio" name="plan" value="free"> Free</label>

  <label><input type="radio" name="plan" value="pro"> Pro</label>



  <button type="submit">Sign up</button>

</form>

Syntax Rules

• Value is a string, e.g. name="email" or name="user[first]" for nested keys in some frameworks.
• Required on controls you want included in form submission (except submit button without name, which is optional).
• Radio group: same name, different value on each radio.
• id is for document identity and <label for>; name is for submitted data.
• JavaScript IDL property: inputElement.name = "newKey".
• Duplicate names on text inputs are allowed but can confuse server parsing—avoid unless intentional.

💎 Values

The name attribute accepts any string that is a valid form field name:

• name="username" — Simple single field key.
• name="email" — Common contact form field.
• name="color" on radios — Group name; value comes from selected radio’s value.
• name="tags" on multi-select — Multiple values submitted with same key.
• name="items[]" — Convention used by some backends for arrays (framework-specific).

document.getElementById("dynamicField").name = "feedback";

document.querySelector("input").setAttribute("name", "comment");

Applicable Elements

name vs id vs for

Examples Gallery

Login form field names, radio group with shared name, and changing element.name with JavaScript.

<form>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username">



  <label for="password">Password:</label>

  <input type="password" id="password" name="password">



  <button type="submit">Submit</button>

</form>

<fieldset>

  <legend>Size</legend>

  <label><input type="radio" name="size" value="s"> S</label>

  <label><input type="radio" name="size" value="m"> M</label>

  <label><input type="radio" name="size" value="l"> L</label>

</fieldset>

<input type="text" id="dynamicField" name="comment">



<script>

  document.getElementById("dynamicField").name = "feedback";

</script>

♿ Accessibility

• Use id with <label for> — Labels reference id, not name.
• Group radios with <fieldset> and <legend> — Explain the shared name group to all users.
• Descriptive names help developers — Clear keys like email improve maintainability (users do not see name directly).
• Do not rely on name for visible labels — Always provide visible text or aria-label where needed.
• Stable names — Avoid renaming fields unexpectedly; it can confuse autofill and assistive workflows.

💡 Best Practices