HTML name Attribute

The HTML name attribute assigns a name to certain HTML elements. Its purpose depends on the element, such as identifying submitted form data, naming a form or browsing context, defining an image map, or providing a metadata name.

Elements That Use the name Attribute

The purpose of the name attribute depends on the element where it is used.

Element	Description
`<button>`	Provides the name used when the button contributes a value to submitted form data.
`<details>`	Groups disclosure widgets so only one member of the group can be open at a time.
`<fieldset>`	Assigns a name to the fieldset.
`<form>`	Assigns a name to the form.
`<iframe>`	Names the iframe's nested browsing context so it can be targeted by links and forms.
`<input>`	Provides the name associated with the input's value in submitted form data and is also used to group radio buttons.
`<map>`	Names an image map so it can be referenced by an image's `usemap` attribute.
`<meta>`	Specifies the name of a metadata value.
`<object>`	Assigns a name to the embedded object.
`<output>`	Assigns a name to the output element.
`<select>`	Provides the name associated with the selected value or values in submitted form data.
`<textarea>`	Provides the name associated with the textarea's value in submitted form data.

Using name with Form Controls

For form controls, the name attribute identifies the control when its data is submitted. The name and the control's value form a name/value pair.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

If the user enters Diane, the submitted data can include a name/value pair such as username=Diane. A form control without a name generally does not contribute its value to the submitted form data.

Grouping Radio Buttons

Radio buttons with the same name belong to the same radio-button group. Selecting one button causes another selected button in that group to become unselected.

<input type="radio" id="html" name="tutorial" value="html">
<label for="html">HTML</label>

<input type="radio" id="css" name="tutorial" value="css">
<label for="css">CSS</label>

Because both radio buttons use name="tutorial", only one can be selected at a time.

Naming a <form>

The name attribute can assign a name to a <form> element.

<form name="contact-form">
  ...
</form>

The form name can be used by scripts and is also reflected in the document's collection of forms.

Naming an <iframe>

On an <iframe>, the name attribute assigns a name to its nested browsing context. A link or form can use that name as a target.

<iframe src="welcome.html" name="example-frame" title="Example Frame"></iframe>

<a href="contact.html" target="example-frame">Open Contact Page</a>

When the link is activated, the linked document opens in the named iframe instead of replacing the current page.

Naming an Image <map>

The name attribute on a <map> identifies the image map referenced by an image's usemap attribute.

<img src="html-css.png" alt="HTML and CSS" usemap="#tutorial-map">

<map name="tutorial-map">
  ...
</map>

The usemap value references the map name with a leading #. When an id is also specified on the <map>, its value must match the name value.

Naming Metadata

On a <meta> element, the name attribute identifies the type of document-level metadata represented by the accompanying content attribute.

<meta name="description" content="Learn the basics of HTML.">

Common metadata names include description, author, and viewport, although different names have different defined purposes and value requirements.

Grouping <details> Elements

The name attribute can group multiple <details> elements. When members of the same group share a name, opening one closes another open member of that group.

<details name="html-topics">
  <summary>HTML Elements</summary>
  <p>HTML elements define the structure and content of a webpage.</p>
</details>
<details name="html-topics">
  <summary>HTML Attributes</summary>
  <p>HTML attributes provide additional information about elements.</p>
</details>

This provides accordion-style behavior without requiring JavaScript.

Obsolete <a name=""> Syntax

Older versions of HTML allowed the name attribute on the <a> element to create a named anchor within a document. This use is obsolete and is no longer allowed in modern HTML.

<!-- Obsolete -->
<a name="contact"></a>

Use the global id attribute instead. A fragment link can point to any element with a matching id, so an empty <a> element is no longer needed.

<!-- Modern HTML -->
<h2 id="contact">Contact Us</h2>

<a href="#contact">Go to Contact Us</a>

name vs. id

The name and id attributes serve different purposes. An id uniquely identifies an element within the document, while name has element-specific purposes such as identifying submitted form data or naming a browsing context.

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

In this example, id="email" associates the input with its <label>, while name="email" identifies the input's value when the form data is submitted.

Common Mistakes

Do not assume that name and id are interchangeable. They have different purposes even when the same text is used for both values.

Do not omit name from a successful form control when its value needs to be included in submitted form data.

When creating a radio-button group, give the related radio buttons the same name. Different names create separate groups.

When using name with <details>, remember that elements sharing the same group name affect one another's open state.

Do not use <a name="..."> to create a named anchor. This older HTML syntax is obsolete; use the id attribute on the destination element instead.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The long-established uses of the name attribute are widely supported in current core browsers. Newer uses, such as grouping <details> elements, can have a different compatibility history.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the name Attribute

The example uses the same name value on three radio buttons to create a group. Select different options to see how only one radio button in the group can be selected at a time.

Play in Editor

Summary

The HTML name attribute assigns a name to certain HTML elements, but its purpose varies by element. It can identify submitted form data, group radio buttons and disclosure widgets, name forms and browsing contexts, identify image maps, and specify metadata names.