Книга: Выразительный JavaScript

Форма в целом

Форма в целом

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

Атрибут name поля задаёт, как будет определено значение этого поля при передаче на сервер. Его также можно использовать как имя свойства при доступе к свойству формы elements, который работает и как объект, похожий на массив (с доступом по номерам), так и map (с доступом по имени).

<form action="example/submit.html">
  Имя: <input type="text" name="name"><br>
  Пароль: <input type="password" name="password"><br>
  <button type="submit">Войти</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // ? password
  console.log(form.elements.password.type);
  // ? password
  console.log(form.elements.name.form == form);
  // ? true
</script>

Кнопка с атрибутом type равным submit при нажатии отправляет форму. Нажатие клавиши Enter внутри поля формы имеет тот же эффект.

Отправка формы обычно означает, что браузер переходит на страницу, обозначенную в атрибуте формы action, используя либо запрос GET, либо POST. Но перед этим запускается свойство “submit”. Его можно обработать в JavaScript, и обработчик может предотвратить поведение по умолчанию, вызвав на объекте event preventDefault.

<form action="example/submit.html">
  Значение: <input type="text" name="value">
  <button type="submit">Сохранить </button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

Перехват событий “submit” полезен в нескольких случаях. Мы можем написать код, проверяющий допустимость введённых значений и сразу же показать ошибку вместо передачи данных формы. Или мы можем отключить отправку формы по умолчанию и дать программе возможность самой обработать ввод, например используя XMLHttpRequest для отправки данных на сервер без перезагрузки страницы.

Оглавление книги