element.name

  • Revision slug: DOM/element.name
  • Revision title: element.name
  • Revision id: 59405
  • Created:
  • Creator: dextra
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ DomRef() }}

Summary

name gets or sets the name attribute of an DOM object, it only applies to the following elements: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.

Name can be used in the {{ domxref("document.getElementsByName()") }} method, a form and with the form elements collection. When used with a form or elements collection, it may return a single element or a collection.

Syntax

HTMLElement.name = string;
var elName = HTMLElement.name;

var fControl = HTMLFormElement.elementName;
var controlCollection = HTMLFormElement.elements.elementName;

Example

<form action="" name="formA">
  <input type="text" value="foo">
</form>

<script type="text/javascript">

  // Get a reference to the first element in the form
  var formElement = document.forms['formA'].elements[0];

  // Give it a name
  formElement.name = 'inputA';

  // Show the value of the input
  alert(document.forms['formA'].elements['inputA'].value);
 
</script>

Notes

In Internet Explorer (IE), the name property of DOM objects created using {{ domxref("document.createElement()") }} can't be set or modified.

Specification

W3C DOM 2 HTML Specification:

{{ languages( { "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><strong>name</strong> gets or sets the <code>name</code> attribute of an DOM object, it only applies to the following elements: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p>
<p>Name can be used in the {{ domxref("document.getElementsByName()") }} method, a <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> and with the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection. When used with a form or elements collection, it may return a single element or a collection.</p><h3 name="Syntax">Syntax</h3>
<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
var elName = <em>HTMLElement</em>.name;

var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
</pre>
<h3 name="Example">Example</h3>
<pre class="eval">&lt;form action="" name="formA"&gt;
  &lt;input type="text" value="foo"&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;

  // Get a reference to the first element in the form
  var formElement = document.forms['formA'].elements[0];

  // Give it a name
  formElement.name = 'inputA';

  // Show the value of the input
  alert(document.forms['formA'].elements['inputA'].value);
 
&lt;/script&gt;
</pre>
<h3 name="Notes">Notes</h3>
<p>In Internet Explorer (IE), the name property of DOM objects created using {{ domxref("document.createElement()") }} can't be set or modified.</p>
<h3 name="Specification">Specification</h3>
<p>W3C DOM 2 HTML Specification:</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}</p>
Revert to this revision