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 ++++++++ files/ru/web/api/htmlformelement/index.html | 273 +++++++++++++++++++++ files/ru/web/api/htmlformelement/length/index.html | 37 +++ .../api/htmlformelement/reportvalidity/index.html | 79 ++++++ files/ru/web/api/htmlformelement/reset/index.html | 24 ++ files/ru/web/api/htmlformelement/submit/index.html | 56 +++++ 6 files changed, 569 insertions(+) create mode 100644 files/ru/web/api/htmlformelement/elements/index.html create mode 100644 files/ru/web/api/htmlformelement/index.html create mode 100644 files/ru/web/api/htmlformelement/length/index.html create mode 100644 files/ru/web/api/htmlformelement/reportvalidity/index.html create mode 100644 files/ru/web/api/htmlformelement/reset/index.html create mode 100644 files/ru/web/api/htmlformelement/submit/index.html (limited to 'files/ru/web/api/htmlformelement') 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")}}

diff --git a/files/ru/web/api/htmlformelement/index.html b/files/ru/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..6e83b5de3a --- /dev/null +++ b/files/ru/web/api/htmlformelement/index.html @@ -0,0 +1,273 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLFormElement interface provides methods to create and modify {{HTMLElement("form")}} elements; it inherits from properties and methods of the {{domxref("HTMLElement")}} interface.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.
+
{{domxref("HTMLFormElement.action")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.
+
{{domxref("HTMLFormElement.elements")}} {{readonlyinline}}
+
Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.
+
{{domxref("HTMLFormElement.encoding")}}
+
Is a synonym for enctype.
+
{{domxref("HTMLFormElement.enctype")}}
+
Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.
+
{{domxref("HTMLFormElement.length")}} {{readonlyinline}}
+
Returns a long that represents the number of controls in the form.
+
{{domxref("HTMLFormElement.method")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
+
{{domxref("HTMLFormElement.name")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
+
{{domxref("HTMLFormElement.noValidate")}}
+
Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.
+
{{domxref("HTMLFormElement.target")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.checkValidity()")}}
+
Returns a {{jsxref("Boolean")}} that is true if the element's child controls are subject to constraint validation and satify those contraints, or false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
+
{{domxref("HTMLFormElement.item()")}}
+
Gets the item in the elements collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.
+
{{domxref("HTMLFormElement.namedItem()")}}
+
Gets the item or list of items in elements collection whose name or id match the specified name, or null if no items match. You can also specify the name in array-style brackets or parentheses after the form object name, without calling this method explicitly.
+
{{domxref("HTMLFormElement.submit()")}}
+
Submits the form to the server.
+
{{domxref("HTMLFormElement.reset()")}}
+
Resets the forms to its initial state.
+
+ +
+
{{domxref("HTMLFormElement.reportValidity()")}}
+
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
+
+ +

Examples

+ +

The following example shows how to create a new form element, modify its attributes and submit it.

+ +
// Create a form
+var f = document.createElement("form");
+
+// Add it to the document body
+document.body.appendChild(f);
+
+// Add action and method attributes
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Call the form's submit method
+f.submit();
+
+ +

In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.

+ +
<title>Form example</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Get a reference using the forms collection
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.name + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // A reference to the form is passed from the
+  // button's onclick attribute using 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Form  example</h1>
+
+<form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Click "Info" to see information about the form.
+    Click set to change settings, then info again
+    to see their effect</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+  </textarea>
+ </p>
+</form>
+
+ +

The following example shows how to submit a form in a popup window.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function popupSend (oFormElement) {
+  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
+    alert("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+</head>
+
+<body>
+
+<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
+  <p>First name: <input type="text" name="firstname" /><br />
+  Last name: <input type="text" name="lastname" /><br />
+  Password: <input type="password" name="pwd" /><br />
+  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
+  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
+  <input type="checkbox" name="vehicle" value="Car" />I have a car</p>
+  <p><input type="submit" value="Submit" /></p>
+</form>
+
+</body>
+</html>
+ +

Submitting forms and uploading files using XMLHttpRequest

+ +

If you want to know how to serialize and submit a form using the XMLHttpRequest API, please read this paragraph.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change.
+ The following method has been added: checkValidity().
+ The following properties have been added: autocomplete, noValidate, and encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ru/web/api/htmlformelement/length/index.html b/files/ru/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..1c22fb4328 --- /dev/null +++ b/files/ru/web/api/htmlformelement/length/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

HTMLFormElement.length  - свойство только для чтения, которое возвращает количество элементов управления в элементе {{HTMLElement("form")}}. Вы можете получить доступ к списку элементов управления формы с помощью свойства {{domxref("HTMLFormElement.elements", "elements")}}.

+ +

Это свойство учитывает элементы, которые являются потомками элемента <form>, а также элементы, которые были определены как члены этой формы с помощью их свойства form.

+ +

{{page("/en-US/docs/Web/API/HTMLFormElement", "Элементы, которые считаются управляющими элементами форм")}}

+ +

Синтаксис

+ +
numControls = form.length;
+
+ +

Значение

+ +

Количество управляющих элементов внутри формы <form>. Это то же число, что и число элементов в {{domxref("HTMLFormControlsCollection")}}, возвращаемой свойством {{domxref("HTMLFormElement.elements", "elements")}}.

+ +

Пример

+ +
if (document.getElementById("form1").length > 1) {
+  // в форме больше одного управляющего элемента
+}
+
+ +

Спецификации

+ + diff --git a/files/ru/web/api/htmlformelement/reportvalidity/index.html b/files/ru/web/api/htmlformelement/reportvalidity/index.html new file mode 100644 index 0000000000..bc4028946c --- /dev/null +++ b/files/ru/web/api/htmlformelement/reportvalidity/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLFormElement.reportValidity() +slug: Web/API/HTMLFormElement/reportValidity +translation_of: Web/API/HTMLFormElement/reportValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

Метод HTMLFormElement.reportValidity() возвращает true если все дочерние элементы прошли проверку. Когда возвращается false, по каждому дочернему элементу не прошедшему проверку генерируется событие invalid и пользователю сообщаются проблемы проверки.

+ +

Синтаксис

+ +
HTMLFormElement.reportValidity()
+
+ +

Пример

+ +
document.forms["myform"].addEventListener('invalid', function() {
+  //Опциональный ответ здесь.
+}, false);
+
+document.forms["myform"].addEventListener('submit', function() {
+  document.forms["myform"].reportValidity();
+}, false);
+ +

Спецификация

+ +

HTML 5.1 Forms: The Constraint Validation API

+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatChrome(40.0) }}{{ CompatNo }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatChrome(40.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/ru/web/api/htmlformelement/reset/index.html b/files/ru/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..1d2c858788 --- /dev/null +++ b/files/ru/web/api/htmlformelement/reset/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +
{{ APIRef("HTML DOM") }}
+ +

Метод HTMLFormElement.reset() восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.

+ +

Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод HTMLFormElement.reset(). Это не сбрасывает другие атрибуты, такие как disabled.

+ +

Синтаксис

+ +
HTMLFormElement.reset()
+
+ +

Пример

+ +
document.getElementById('myform').reset();
+
+ +

Спецификация

+ +

HTML 5.1 Nightly: Resetting a form

diff --git a/files/ru/web/api/htmlformelement/submit/index.html b/files/ru/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..4df609cd44 --- /dev/null +++ b/files/ru/web/api/htmlformelement/submit/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +tags: + - HTMLFormElement +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

Метод HTMLFormElement.submit() позволяет отправить форму {{HtmlElement("form")}}.

+ +

Этот метод похож, но не идентичен кнопке {{HtmlElement("button")}}. , который активирует отправку формы.   Однако при непосредственном вызове этого метода:

+ + + +

Метод {{domxref("HTMLFormElement.requestSubmit()")}} идентичен кнопке {{HtmlElement("button")}} , которая активирует отправку формы и не имеет различий, указанных выше.

+ +

Если элемент управления формы (например, кнопка отправки) имеет name или id кнопки submit, тогда этот метод будет маскировать метод submit формы..

+ +

Syntax

+ +
HTMLFormElement.submit()
+
+ +

Example

+ +
document.forms["myform"].submit();
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-form-submit', 'HTMLFormElement: submit')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

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

-- cgit v1.2.3-54-g00ecf