What\'s the point of the name
attribute on an HTML form? As far as I can tell, you can\'t read the form name on submission or do anything else with it. Does it
name
attribute is not completely redundant vis a vis id
. As aforementioned, it useful with <forms>
, but less known is that it can also be used with with any HTMLCollection
, such as the children
property of any DOM element.
HTMLCollection
, in additional to be a array-like object, will have named properties commensurate with any named members (or the first occurrence in case of non-unique name). It is useful to retrieve specific named nodes.
For example, in the following example HTML:
<div id='person1'>
<span name='firstname'>John</span>
<span name='lastname'>Doe</span>
<span name='middlename'></span>
</div>
<div id='person2'>
<span name='firstname'>Jane</span>
<span name='lastname'>Doe</span>
<span name='middlename'></span>
</div>
by naming each child, one can quickly and efficiently retrieve a named element, such as lastname
, as such:
document.getElementById('person1').children.namedItem('lastname')
...and if there is no risk of 'length' being the name of a member element, (being that length
is a reserved property of HTMLCollection
), a more terse notation may be used instead:
document.getElementById('person1').children.lastname
DOM Living Standard 2019 March 29
An HTMLCollection object is a collection of elements...
The namedItem(key) method, when invoked, must run these steps:
If key is the empty string, return null.
Return the first element in the collection for which at least one of the following is true: it has an ID which is key; it is in the HTML namespace and has a name attribute whose value is key;
Once you assign a name to an element, you can refer to that element via document.name_of_element
throughout your code. Doesn't work too tell when you've got multiple fields of the same name, but it does allow shortcuts like:
<form name="myform" ...>
document.myform.submit();
instead of
document.getElementsByName('myform')[0].submit();
Here's what MDN has to say about it:
name
The name of the form. In HTML 4, its use is deprecated (id
should be used instead). It must be unique among the forms in a document and not just an empty string in HTML 5.
(from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name)
I find it slightly confusing that specifies that it must be unique, non-empty string in HTML 5 when it was deprecated in HTML 4. (I'd guess that requirement only applies if the name
attribute is specified at all?). But I think it's safe to say that any purpose it once served has been superseded by the id
attribute.
In short, and probably oversimplifying a bit: It is used instead of id
for browsers that don't understand document.getElementById
.
These days it serves no real purpose. It is a legacy from the early days of the browser wars before the use of name
to describe how to send control values when a form is submitted and id
to identify an element within the page was settled.
You can use the name attribute as an "extra information" attribute - similarly as with a hidden input - but this keeps the extra information tied into the form, which makes it just a little simpler to read/access.
From the spec:
The
name
attribute represents theform
's name within the forms collection.