Form elements with the same name reflected in the DOM

Question

If you have multiple form elements with the same name in a form, the entry in the elements collection on the form ends up being a collection of those fields (which is handy). The DOM2 HTML specification covers the elements collection but doesn't immediately seem to specify this behavior when there are multiple fields with the same name. Is the behavior covered by a standard (somewhere else in the DOM2 HTML specification, or in another spec)?

For clarity, I'm not asking what the best way to access these fields is. I'm asking whether the fact they end up in a collection (of varying kinds) on the elements collection is covered by a standard, and if so which one.

Example (live copy):

HTML:

<form id="theForm">
<input type="text" name="foo" value="one">
<input type="text" name="foo" value="two">
</form>

JavaScript:

var form = document.getElementById("theForm"),
    foo = form.elements.foo,
    index;
console.log("typeof foo = " + typeof foo);
if (typeof foo !== "undefined") {
  console.log("Object#toString says: " + Object.prototype.toString.call(foo));
}
if ('length' in foo && 'item' in foo) {
  console.log("Looks like a collection of some kind:");
  for (index = 0; index < foo.length; ++index) {
    console.log(index + ": " + foo[index].value);
  }
}

Sample output (for Chrome):

typeof foo = object
Object#toString says: [object NodeList]
Looks like a collection of some kind:
0: one
1: two

I've checked IE6, 7, 8, and 9, Firefox 4.0, Firefox 3.6, Chrome 12, Opera 11, and Safari 5. They all make the entry in elements a collection of some kind (Chrome, Firefox, and Safari make it a NodeList [though bizarrely on Safari the typeof is "function" not "object"], and IE and Opera make it an HTMLCollection, but they all have length, item, and [] access). I'm just trying to find the standard, if any, that specifies the behavior.

Why not use document.getElementsByName("fieldNAME") which returns an array in all browsers — mplungjan, Jun 28 '11 at 09:40
@mplungjan: @T.J. just wants to know whether this behaviour is defined somewhere. — Felix Kling, Jun 28 '11 at 09:46
@mplungjan: Quoting: *"I'm not asking what the best way to access these fields is. I'm asking whether the fact they end up in a collection (of varying kinds) on the `elements` collection is covered by a standard, and if so which one."* I know I can use `getElementsByName` (though it will give me **all** of the elements with that name, not just the ones in the form). The point of the question is standards. — T.J. Crowder, Jun 28 '11 at 09:49

score 2 · Accepted Answer · edited Nov 24 '14 at 08:42

2

It's covered by the draft HTML5 spec (and the WHAT-WG version), which in this case seems more about documenting how it’s always worked, under the section on HTMLFormControlsCollection (W3C ref, WHAT-WG ref):

If there are multiple matching items, then a [HTMLFormControlsCollection (W3C ref, WHAT-WG ref) object containing all those elements is returned.

edited Nov 24 '14 at 08:42

T.J. Crowder

1,031,962
187
1,923
1,875

answered Jun 28 '11 at 09:49

Carey

1,198
6
11

Thanks! I've updated the answer to link to the HTML5 spec at the W3C, because that's definitely a specification body (don't get me started on the politics around the WHAT-WG / W3C relationship). Odd name for it (these may not be radio buttons), but hey. That specifically relates to the `namedItem` function, but thanks to the [DOM2 HTML spec's ECMAScript mapping section](http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/DOM2-HTML.html#ecma-script-binding) we know that [] uses it. – T.J. Crowder Jun 28 '11 at 10:04
The `[]` access in the HTML spec is actually from the [WebIDL spec](http://dev.w3.org/2006/webapi/WebIDL/). The `namedItem` function is a [special operation](http://dev.w3.org/2006/webapi/WebIDL/#dfn-special-operation) called a _named getter_. – Carey Jul 01 '11 at 00:04
I *knew* there had to be something picking up from the DOM2 HTML spec, on my ref list it was the "hmmm, where's a more recent version of this?" one. Excellent, thanks -- WebIDL is now on my ref list. – T.J. Crowder Jul 01 '11 at 04:31

mplungjan · Answer 2 · 2011-06-28T09:54:06.717

0

Seems there is a difference between forms access and DOM access in Firefox 4.0.1 and 5

http://jsfiddle.net/mplungjan/jMnWP/

form.foo:

typeof formFoo = object
Object#toString says: [object NodeList]
Looks like a collection of some kind:
0: one
1: two

document.getElementsByName("foo"):

typeof docFoo = object
Object#toString says: [object HTMLCollection]
Looks like a collection of some kind:
0: one
1: two

edited Jun 28 '11 at 09:54

answered Jun 28 '11 at 09:38

mplungjan

169,008
28
173
236

Interesting! (Firefox 3.6, too.) Opera does the same thing, but the other way around (`formFoo` is an `HTMLCollection`, but `docFoo` is a `NodeList`). (BTW, this was more of a *comment* than an *answer*.) – T.J. Crowder Jul 01 '11 at 04:42
I posted as an answer since I can format answers. I can delete it if you feel it is not of any value – mplungjan Jul 01 '11 at 06:45

Form elements with the same name reflected in the DOM

2 Answers2

Linked