recursal/MDN huggingface dataset:
HTMLFormElement: свойство elements
==================================

Свойство **`elements`** интерфейса `HTMLFormElement` (en-US) возвращает список `HTMLFormControlsCollection` (en-US), содержащий все элементы управления `<form>`.

Для получения только количества элементов управления формы можно использовать свойство `HTMLFormElement.length`.

Для получения доступа к определенному элементу управления в возвращаемой коллекции используйте индекс или атрибуты `name` и `id`.

До HTML 5 возвращаемым объектом был `HTMLCollection`, на котором основан `HTMLFormControlsCollection`.

**Примечание:** Аналогичным образом можно получить список всех форм, содержащихся в документе, используя свойство документа `forms`.

Значение
--------

`HTMLFormControlsCollection` (en-US), которое содержит все элементы управления, не являющиеся изображениями.
 Это «живой» список, если у формы добавляются или удаляются элементы, то список обновляется.

Элементы управления в возвращаемом списке расположены в порядке, в котором они появляются в форме, после предварительного порядка обхода дерева в глубину. Это называется **порядок дерева**.

Возвращаются только следующе элементы:

* `<button>`
* `<fieldset>`
* `<input>` (за исключением элементов, у которых атрибут `type` равен `"image"`, по историческим причинам)
* `<object>` (en-US)
* `<output>`
* `<select>`
* `<textarea>` (en-US)
Примеры
-------

### Простой пример синтаксиса

В этом примере мы получаем список элементов управления формы, а также доступ к его членам по индексу, имени или идентификатору.


```html
<form id="my-form">
  <label>
    Username:
    <input type="text" name="username" />
  </label>
  <label>
    Full name:
    <input type="text" name="full-name" />
  </label>
  <label>
    Password:
    <input type="password" name="password" />
  </label>
</form>
```



```js
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];
```

### Доступ к элементам управления

В этом примере мы получаем список элементов формы, а затем выполняем поиск элементов `<input>` c типом `<input/text>` (en-US), чтобы обработать их.


```js
const inputs = document.getElementById("my-form").elements;

// Получаем элементы формы
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Изменяем значение
    inputs[i].value.toLocaleUpperCase();
  }
}
```

### Отключение элементов управления


```js
const inputs = document.getElementById("my-form").elements;

// Получаем элементы формы
for (let i = 0; i < inputs.length; i++) {
  // Отключаем все элементы формы
  inputs[i].setAttribute("disabled", "");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-form-elements-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ValidityState.patternMismatch
=============================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`patternMismatch`** объекта **`ValidityState`** указывает, соответствует ли значение `<input>` шаблону, указанному в атрибуте `pattern`.

Если поле поддерживает атрибут `pattern`, это значит, что `<input>` содержит `type` text (en-US), tel, email (en-US), url (en-US), password или search (en-US) и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в `pattern`, свойство `patternMismatch` будет `true`.

Примеры
-------

Учитывая следующее:


```html
<p>
  <label
 >Enter your phone number in the format (123)456-7890 (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit area code"
 size="2" />)-
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit prefix"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4-digit number"
 size="3" />
  </label>
</p>
```


Здесь у нас есть 3 поля для номера телефона северной Америки, помещённых внутрь `label`. В каждом поле, как определено в атрибуте `pattern`, ожидается ввод 3, 3 и 4 символов соответственно.

Если значения слишком длинные, слишком короткие или содержат не цифровые символы, `patternMismatch` будет `true`. Если `true`, элемент соответствует CSS-псевдоклассу`:invalid`.


```css
input:invalid {
  border: red solid 3px;
}
```


Обратите внимание, что в данном примере мы получаем значение свойства `patternMismatch`, а не `validityState.tooLong` или `validityState.tooShort`, потому что ограничения заданы именно с помощью атрибута `pattern`. Если бы вместо него использовались атрибуты `minlength` (en-US) и `maxlength` (en-US), для валидации можно было использовать `validityState.tooLong` или `validityState.tooShort`.

**Примечание:** Примечание: Если атрибут `pattern` не используется, поле `email (en-US)` требует, соответствия значения хотя бы формату `x@y`, а поле `url (en-US)` — хотя бы формату `x:`. Если поле не валидно, свойство `validityState.typeMismatch` будет `true`, если не используется атрибут `pattern`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-patternmismatch |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Также смотрите
--------------

* Валидация ограничений (en-US)
* Формы: Валидация форм
* Регулярные выражения
validityState.badInput
======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`badInput`** объекта ValidityState, указывающее, что пользователь ввёл значение, которое браузер не может преобразовать. Например, поле ввода чисел, содержащее строку. ***Примечание:** Во всех браузерах, кроме Internet Explorer, ввести в числовое поле любое нечисловое значения не удастся.*

Пример
------


```html
<input type="number" id="age" />
```



```js
var input = document.getElementById("age");
if (input.validity.badInput) {
  console.log("Bad input detected…");
} else {
  console.log("Content of input ok.");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-badinput-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Руководство: Валидация ограничений (en-US)
* Учебник: Валидация форм
ValidityState.rangeUnderflow
============================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`rangeUnderflow`** объекта **`ValidityState`** указывает, соответствует ли значение `<input>` после изменения пользователем ограничениям, установленным атрибутом `min` (en-US).

Если поле является числовым, включая типы date, month (en-US), week (en-US), time (en-US), datetime-local, number, range и заданно значение атрибута `min`, если содержимое поля не соответствует ограничению атрибута `min` (en-US), свойство `rangeUnderflow` будет true.

Учитывая следующее:


```html
<input type="number" min="20" max="40" step="2" />
```


если `value < 20`, `rangeUnderflow` будет true. Если `true`, элемент соответствует CSS-псевдоклассам `:invalid` и `:out-of-range`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeunderflow |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `ValidityState.rangeOverflow`
* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
* Атрибут `step` (en-US)
* Атрибут `max` (en-US)
ValidityState.stepMismatch
==========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`stepMismatch`** объекта **`ValidityState`** указывает, соответствует ли значение `<input>` после изменения пользователем ограничениям, установленным атрибутом `step`.

Если поле является числовым, включая типы date, month (en-US), week (en-US), time (en-US), datetime-local, number, range и значение атрибута `step` не равно `any`, в случае не соответствия поля ограниченям атрибутов `step` (en-US) и `min` (en-US), то `stepMismatch` будет true. Если остаток от деления значения элемента формы за вычетом `min` (en-US) на `step` (en-US), (которое по умолчаиню равно 1) не равен нулю, то это является несоответствием.

Учитывая следующее:


```html
<input type="number" min="20" max="40" step="2" />
```


если `(value - min) % 2 != 0`, `stepMismatch` будет true.

Если true, элемент соответствует CSS-псевдоклассам `:invalid` и `:out-of-range`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-stepmismatch |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
* Атрибут `step` (en-US)
ValidityState.typeMismatch
==========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`typeMismatch`** объекта **`ValidityState`** указывает, соответствует ли изменённое пользователем значение `<input>` ограничениям атрибута `type`.

Если атрибут `type` получает типы вроде email (en-US) или url (en-US), а значение не соответствует ограничениям данного типа, свойство `typeMismatch` будет true.

Тип email (en-US) допускает ввод одного или нескольких email-адресов, в зависимости от наличия атрибута `multiple` (en-US). Валидный email-адрес включает префикс электронной почты и домен, с доменом верхнего уровня или без него. Если значение поля email-адреса не является пустой строкой, одним или несколькими email-адресами, разделёнными запятой (если присутствует атрибут `multiple` (en-US)), то это `typeMismatch`.

Тип url (en-US) допускает ввода одного или нескольких url-адресов, в зависимости от наличия атрибута `multiple` (en-US). Валидный URL-адрес включает протокол с IP-адресом или комбинацией поддоменом, домена и домен верхнего уровня. Если значение поля URL не ялвяется пустой строкой, одним или несколькими URL-адресами, разделёнными запятой (если присутствует атрибут `multiple` (en-US)), то это `typeMismatch`.

| Тип input | Значение | Ожидаемое значение |
| --- | --- | --- |
| email (en-US) | `x@y` или `x@y.z` | Email-адрес с или без TLD (en-US) |
| url (en-US) | `x:` или `x://y.z` | Протокол или полный URL с протоколом |

Примеры
-------

Учитывая следующее:


```html
<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>
```



```css
input:invalid {
  border: red solid 3px;
}
```


В примере выше в обоих полях происходит `typeMismatch`, потому что email-адрес является просто доменом, а URL не содержит протокол

`typeMismatch` происходит при несоответствии `значения`, заданного в атрибуте `type` и содержимым поля. `typeMismatch` является лишь одной из возможных ошибок и возможна только для полей email (en-US) и url (en-US). Когда введённое значение не соответствует ожидаемому для других полей ввода, в зависимости от типа поля будут возникать разные ошибки. Например, если в поле number ввести значение не являющееся числом с плавающей запятой, `badInput` будет `true`. Если `обязательное поле email не заполнено`, `valueMissing` (en-US) будет `true`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-typemismatch |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
* Регулярные выражения
validityState.tooShort
======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`tooShort`** объекта **`ValidityState`** указывает, является ли длина изменённого пользователем значения `<input>`, `<button>`, `<select>`, `<output>`, `<fieldset>` или `<textarea>` (en-US) меньше минимально допустимого значения, заданного в атрибуте `minlength`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-tooshort-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
validityState.tooLong
=====================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`tooLong`** объекта **`ValidityState`** указывает, превышает ли длина значения `<input>` или `<textarea>` (en-US), после редактирования пользователем, заданный в атрибуте `maxlength` (en-US) максимум.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-toolong-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
ValidityState.rangeOverflow
===========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Доступное только для чтения свойство **`rangeOverflow`** объекта **`ValidityState`** указывает, что после редактирования пользователем поля `<input>`, значение не соответствует ограничениям, установленным атрибутом `max` (en-US).

Если поле является числовым, включая типы date, month (en-US), week (en-US), time (en-US), datetime-local, number, range и заданно значение атрибута max, если содержимое поля не соответствует ограничению атрибута `max` (en-US), свойство `rangeOverflow` будет true.

Учитывая слещующее:


```html
<input type="number" min="20" max="40" step="2" />
```


если `value > 40`, `rangeOverflow` будет true. Если `true`, элемент соответствует CSS-псевдоклассам `:invalid` и `:out-of-range`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeoverflow |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `ValidityState.rangeUnderflow`
* Валидация ограничений (en-US)
* Валидация форм на стороне клиента
* Атрибут `step` (en-US)
* Атрибут `min` (en-US)
abort
=====

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Событие **`abort`** из Fetch API вызывается когда fetch запрос прерывается, т.е. с помощью `AbortController.abort()`.

|  |  |
| --- | --- |
| Bubbles | Нет |
| Cancelable | Нет |
| Target objects | `AbortSignal` |
| Interface | `Event` |

Примеры
-------

В следующем фрагменте мы создаём новый объект `AbortController`, и получаем его `AbortSignal` (доступно в свойстве `signal`). Позже мы проверяем, был ли прерван сигнал, используя свойство `aborted`, и выводим соответствующее сообщение в консоль.


```js
var controller = new AbortController();
var signal = controller.signal;

signal.onabort = function () {
  console.log("Request aborted");
};
```

Наследование
------------

Событие `abort` реализует `Event` интерфейс — он имеет свойства и методы, определённые в нём.

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

| Specification |
| --- |
| DOM Standard # eventdef-abortsignal-abort |
| DOM Standard # abortsignal-onabort |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Fetch API
AbortSignal.aborted
===================

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство **`aborted`** только для чтения, оно возвращает `Boolean` (en-US), который указывает прерван(`true`) DOM запрос(ы), с которым связан сигнал, или нет(`false`).

Синтаксис
---------


```js
var isAborted = abortSignal.aborted;
```

### Значение

`Boolean` (en-US)Примеры
-------

В следующем фрагменте мы создаём новый объект `AbortController`, и получаем его `AbortSignal` (доступно в свойстве `signal`). Позже мы проверяем, был ли прерван сигнал, используя свойство `aborted`, и выводим соответствующее сообщение в консоль.


```js
var controller = new AbortController();
var signal = controller.signal;

// ...

signal.aborted
  ? console.log("Запрос был отменён")
  : console.log("Запрос не отменён");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-aborted① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Fetch API
GlobalEventHandler.onanimationend
=================================

Обработчик события `animationend (en-US)`. Это событие вызывается когда CSS-анимация достигает конца своего активного периода, который вычисляется как (`animation-duration` \* `animation-iteration-count`) + `animation-delay`.

Синтаксис
---------
```

var animEndHandler = target.onanimationend;

target.onanimationend = `Function`
```

### Значение

A `Function` вызывается, когда происходит событие `animationend (en-US)`, указывающее, что анимация CSS начинается с цели, где целевой объект является HTML-элементом (`HTMLElement`), документ (`Document`) или окно (`Window`). Функция получает в качестве входного параметра один параметр: `AnimationEvent` объект, описывающий событие, которое произошло.

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

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationend |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* The `animationend (en-US)` event this event handler is triggered by
* `AnimationEvent`
* The `animationstart (en-US)` event
focusout
========

Событие `focusout` вызывается перед потерей элементом фокуса. Главное отличие между этим событием и `blur` (en-US) в том, что у последнего нет фазы всплытия.

Основная информация

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

DOM L3

Интерфейс
`FocusEvent` (en-US)
Всплытие

Да

Отменяемый

Нет

Цель

Элемент

Действие по умолчанию

Нет.

Свойства
--------

| Свойство | Тип | Описание |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Цель события, теряющая фокус. |
| `type` Только для чтения  | `DOMString` | Тип события. |
| `bubbles` Только для чтения  | `Boolean` | Всплывает ли событие при нормальных условиях. |
| `cancelable` Только для чтения  | `Boolean` | Возможно ли отменить событие. |
| `relatedTarget` Только для чтения  | `EventTarget` (DOM-элемент) | Цель события, получающая фокус. |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
Element: свойство classList
===========================

Описание
--------

**`Element.classList`** — это доступное только для чтения свойство, которое содержит текущую коллекцию `DOMTokenList` всех атрибутов `class` элемента.

Использование `classList` представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, через `element.className`.

Значение
--------

`DOMTokenList` представляет содержимое атрибута `class` элемента. Если атрибут `class` не установлен или пуст, то будет возвращён пустой `DOMTokenList`, то есть `DOMTokenList` со свойством `length` равным `0`.

Хотя само свойство `classList` доступно только для чтения, можно изменять связанный с ним `DOMTokenList` с помощью методов `add()` (en-US), `remove()` (en-US), `replace()` и `toggle()` (en-US).

Для проверки, содержит ли элемент какой-либо класс можно использовать метод `classList.contains()` (en-US).

Примеры
-------


```js
const div = document.createElement("div");
div.className = "foo";

// Начальное состояние: <div class="foo"></div>
console.log(div.outerHTML);

// Используем classList API для удаления и добавления классов
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен
div.classList.toggle("visible");

// Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// Добавление или удаление нескольких классов сразу
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// Добавление или удаление нескольких классов с использованием spread-синтаксиса
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// Замена класса "foo" классом "bar"
div.classList.replace("foo", "bar");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `element.className`
* `DOMTokenList`
* `classList.js` (кросс-браузерный полифил, реализующий функциональность `element.classList`)