HTMLFormControlsCollection: namedItem() method

The HTMLFormControlsCollection.namedItem() method returns the RadioNodeList or the Element in the collection whose name or id match the specified name, or null if no node matches.

Note that this version of namedItem() hides the one inherited from HTMLCollection. Like that one, in JavaScript, using the array bracket syntax with a String, like collection["value"] is equivalent to collection.namedItem("value").

Syntax

js
namedItem(name)
[name]

Parameters

name

A string which will be used to match against the name or id attributes of the controls in this HTMLFormControlsCollection object.

Return value

Examples

Using namedItem()

HTML

html
<form>
  <label for="notes">Notes:</label>
  <input id="notes" name="my-form-control" type="text" />

  <label for="start">Start date:</label>
  <input id="start" name="my-form-control" type="date" />
</form>

<div id="output"></div>

JavaScript

js
const form = document.querySelector("form");
const items = form.elements.namedItem("my-form-control");

const output = document.querySelector("#output");
const itemIDs = Array.from(items)
  .map((item) => `"${item.id}"`)
  .join(", ");
output.textContent = `My items: ${itemIDs}`;

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
namedItem 1 12 33
27–33Returned a NodeList instead of a RadioNodeList.
≤12.1 ≤4 18 33
27–33Returned a NodeList instead of a RadioNodeList.
≤12.1 1 1.0 4.4

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection/namedItem