W3cubDocs

/Web APIs

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="textarea" />

  <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 Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
namedItem 1 12 33
27–33Returned a NodeList instead of a RadioNodeList.
No ≤12.1 ≤4 4.4 18 33
27–33Returned a NodeList instead of a RadioNodeList.
≤12.1 1 1.0

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