What's the point of HTML forms `name` attribute?

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 serve a purpose?

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.

From the specification:

> The name attribute represents the form's name within the forms collection.

Once you assign a name to an element, you can refer to that element via document.name_of_element throughout your code. It doesn't work to 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 <form>, Attributes, 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.

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.

name attribute is not completely redundant vis-à-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;