0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В современных фронтенд-приложениях существует два подхода при работе с формами. В некоторых изменение данных на странице происходит сразу по мере изменения формы. У такой формы нет кнопок "сохранить" или "отправить". Здесь каждый элемент формы связан с обработчиком, который отслеживает любые изменения. Типичный пример - фильтрация данных на странице.</p>
1
<p>В современных фронтенд-приложениях существует два подхода при работе с формами. В некоторых изменение данных на странице происходит сразу по мере изменения формы. У такой формы нет кнопок "сохранить" или "отправить". Здесь каждый элемент формы связан с обработчиком, который отслеживает любые изменения. Типичный пример - фильтрация данных на странице.</p>
2
<p>В более классическом варианте отправка формы происходит по кнопке. В таком случае нужно использовать событие submit самой формы:</p>
2
<p>В более классическом варианте отправка формы происходит по кнопке. В таком случае нужно использовать событие submit самой формы:</p>
3
<p>Почему не повесить событие click на кнопку отправки формы? Технически так сделать можно, но тогда сломается стандартное поведение. Браузеры позволяют отправлять формы с клавиатуры, нажав клавишу Enter. В таком случае кнопка не нажимается, а форма отправляется.</p>
3
<p>Почему не повесить событие click на кнопку отправки формы? Технически так сделать можно, но тогда сломается стандартное поведение. Браузеры позволяют отправлять формы с клавиатуры, нажав клавишу Enter. В таком случае кнопка не нажимается, а форма отправляется.</p>
4
<p>Сама обработка формы обычно строится так:</p>
4
<p>Сама обработка формы обычно строится так:</p>
5
<ul><li>извлекаются данные формы</li>
5
<ul><li>извлекаются данные формы</li>
6
<li>выполняется запрос на сервер или меняются данные в приложении</li>
6
<li>выполняется запрос на сервер или меняются данные в приложении</li>
7
<li>изменяется внешний вид</li>
7
<li>изменяется внешний вид</li>
8
</ul><p>Второй и третий пункт мы рассмотрим в следующих уроках, когда поговорим про AJAX. А здесь поговорим о первом - об извлечении данных формы.</p>
8
</ul><p>Второй и третий пункт мы рассмотрим в следующих уроках, когда поговорим про AJAX. А здесь поговорим о первом - об извлечении данных формы.</p>
9
<p>Существует два подхода. Сначала рассмотрим неправильный:</p>
9
<p>Существует два подхода. Сначала рассмотрим неправильный:</p>
10
<p>При таком подходе придется работать с каждым элементом формы индивидуально: сначала извлечь их из DOM, а затем - собрать значения. Делать так не нужно, потому что есть правильный способ.</p>
10
<p>При таком подходе придется работать с каждым элементом формы индивидуально: сначала извлечь их из DOM, а затем - собрать значения. Делать так не нужно, потому что есть правильный способ.</p>
11
<p>Правильный способ - использовать специальный объект<a>FormData</a>, доступный в браузере. Он позволяет получить значение всех полей формы, для которых указан атрибут name:</p>
11
<p>Правильный способ - использовать специальный объект<a>FormData</a>, доступный в браузере. Он позволяет получить значение всех полей формы, для которых указан атрибут name:</p>
12
<h2>Извлечение элементов формы</h2>
12
<h2>Извлечение элементов формы</h2>
13
<p>Иногда все же приходится обращаться к элементам формы напрямую. Например, при реализации валидации во время изменения формы, а не ее отправки.</p>
13
<p>Иногда все же приходится обращаться к элементам формы напрямую. Например, при реализации валидации во время изменения формы, а не ее отправки.</p>
14
<p>В таких случаях работа с элементами формы идет напрямую:</p>
14
<p>В таких случаях работа с элементами формы идет напрямую:</p>
15
<p>Если элементов много, то код, выполняющий запросы в DOM, станет громоздким. Этого можно избежать, если использовать возможности DOM, относящиеся к формам. Каждая форма содержит свойство elements, которое возвращает объект со всеми элементами данной формы. Ключи объекта - имена элементов, значения - сами элементы:</p>
15
<p>Если элементов много, то код, выполняющий запросы в DOM, станет громоздким. Этого можно избежать, если использовать возможности DOM, относящиеся к формам. Каждая форма содержит свойство elements, которое возвращает объект со всеми элементами данной формы. Ключи объекта - имена элементов, значения - сами элементы:</p>
16
16