From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../ru/web/api/htmlformelement/elements/index.html | 100 +++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ru/web/api/htmlformelement/elements/index.html (limited to 'files/ru/web/api/htmlformelement/elements') diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..dbd4e1ddcd --- /dev/null +++ b/files/ru/web/api/htmlformelement/elements/index.html @@ -0,0 +1,100 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +
{{APIRef("HTML DOM")}}
+ +

The {{domxref("HTMLFormElement")}} property elements returns an {{domxref("HTMLFormControlsCollection")}} listing all the form controls contained in the {{HTMLElement("form")}} element. Independently, you can obtain just the number of form controls using the {{domxref("HTMLFormElement.length", "length")}} property.

+ +

You can access a particular form control in the returned collection by using either an index or the element's {{domxref("Element.name", "name")}} or {{domxref("Element.id", "id")}}.

+ +

Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which HTMLFormControlsCollection is based.

+ +
+

Note: Similarly, you can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property.

+
+ +

Syntax

+ +
nodeList = HTMLFormElement.elements
+
+ +

Value

+ +

An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls in the form. This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change.

+ +

The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. This is called tree order.

+ +

{{page("/en-US/docs/Web/API/HTMLFormElement", "Elements that are considered form controls")}}

+ +

Example

+ +

Quick syntax example

+ +

In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.

+ +
<form id="my-form">
+  <input type="text" name="username">
+  <input type="text" name="full-name">
+  <input type="password" name="password">
+</form>
+ +
var inputs = document.getElementById("my-form").elements;
+var inputByIndex = inputs[0];
+var inputByName = inputs["username"];
+
+ +

Accessing form controls

+ +

This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type "text" so that some form of processing can be performed on them.

+ +
var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i < inputs.length; i++) {
+  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
+    // Update text input
+    inputs[i].value.toLocaleUpperCase();
+  }
+}
+
+ +

Disabling form controls

+ +
var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i < inputs.length; i++) {
+  // Disable all form controls
+  inputs[i].setAttribute("disabled", "");
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')}}{{ Spec2('HTML WHATWG') }}
{{SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLFormElement.elements")}}

-- cgit v1.2.3-54-g00ecf