Свойства и методы форм JavaScript

Введение в работу с формами в JavaScript

Формы — основной способ отправки данных пользователями на сервер, поэтому надёжный доступ к их элементам из JavaScript является базовым навыком. DOM предоставляет формы и поля внутри них через специальные коллекции (document.forms, form.elements) и свойства (input.value, checkbox.checked, select.value), а также несколько императивных методов (submit(), reset(), focus()).

В этой главе рассматривается, как получать доступ к формам и элементам управления, читать и изменять их значения, реагировать на пользовательский ввод с помощью событий input и change, а также вызывать типичные действия программным способом. Чтобы понять, как формы расположены в дереве документа, смотрите раздел Работа с формами в DOM.

Доступ к формам и их элементам

`document.forms` и `form.elements`

Каждая форма на странице доступна через document.forms. Это специальная коллекция, по которой можно обращаться по номеру (document.forms[0]) или, что нагляднее, по атрибуту name формы (document.forms.loginForm или document.forms['loginForm']).

Когда форма получена, form.elements предоставляет её именованные элементы управления точно таким же образом — по индексу или по атрибуту name элемента. Обращение по имени — рекомендуемый стиль, поскольку он продолжает работать даже при добавлении или переупорядочивании полей:

const form = document.forms.loginForm;     // a <form name="loginForm">
const userField = form.elements.username;  // an <input name="username">
// Shortcut: named controls are also exposed directly on the form
const samePassword = form.password;        // <input name="password">

Когда несколько элементов управления имеют одно и то же name (радиокнопки), form.elements.name возвращает RadioNodeList — коллекцию, свойство .value которой равно значению выбранной кнопки. Элемент <fieldset> также имеет собственную коллекцию elements, поэтому сгруппированный раздел можно рассматривать как мини-форму.

Вот полный пример, демонстрирующий доступ к форме и её полям:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Form Example</title>
</head>
<body>
    <form name="loginForm">
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <div style="margin-top:15px;" id="output"></div>

    <script>
        const form = document.forms['loginForm'];
        const username = form.elements['username'];
        const password = form.elements['password'];
        form.onsubmit = function(event) {
            const output = document.getElementById('output');
            output.textContent = 'Username: ' + username.value + ' Password: ' + password.value;
            event.preventDefault(); // Prevent form submission
        }
    </script>
</body>
</html>

Попробуйте сами »

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

Чтение и запись значений элементов управления

Каждый тип элемента управления предоставляет своё текущее состояние через немного отличающееся свойство — знать, какое именно читать, уже полдела:

Элемент управления	Чтение / запись через	Примечания
`text`, `password`, `email`, `textarea`	`.value`	Всегда string
`checkbox`	`.checked` (boolean)	`.value` — значение атрибута, а не состояние флажка
`radio` (группа)	`form.elements.groupName.value`	Значение выбранной кнопки или `""`
`<select>`	`.value`	Значение выбранного `<option>`; `.options[i]` и `.selectedIndex` обеспечивают более точный доступ

input.value = 'hello';            // text-like fields
checkbox.checked = true;          // tick a checkbox
select.value = 'medium';          // selects the matching <option>
const chosen = select.options[select.selectedIndex].text; // visible label

Типичная ошибка начинающих — читать checkbox.value, чтобы узнать, установлен ли флажок. Это возвращает статическую строку атрибута (по умолчанию "on"), а не состояние флажка. Используйте .checked.

Работа со значениями полей ввода

Управлять значениями полей ввода в JavaScript несложно. Вот как можно динамически задавать значения полей и отображать их на странице:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Input Value Example</title>
</head>
<body>
    <form name="userForm">
        <input type="text" name="firstName" placeholder="First Name" />
        <input type="text" name="lastName" placeholder="Last Name" />
        <input type="submit" value="Submit" />
    </form>
    <div id="welcomeMessage"></div>

    <script>
        const form = document.forms['userForm'];
        const firstName = form.elements['firstName'];
        const lastName = form.elements['lastName'];
        firstName.value = 'John';
        lastName.value = 'Doe';

        form.onsubmit = function(event) {
            const welcomeMessage = document.getElementById('welcomeMessage');
            welcomeMessage.textContent = 'Hello, ' + firstName.value + ' ' + lastName.value + '!';
            event.preventDefault(); // Prevents the form from submitting to a server
        }
    </script>
</body>
</html>

Попробуйте сами »

В этом примере имя и фамилия заранее заданы как 'John' и 'Doe'. При отправке формы на странице отображается приветствие, что демонстрирует как установку, так и получение значений полей. Для более сложных форм рассмотрите использование FormData API, который позволяет легко сериализовать данные формы в пары ключ-значение без ручного обращения к каждому элементу.

Продвинутые техники работы с формами

Валидация формы

Проверка формы в реальном времени крайне важна для пользовательского опыта. Вот пример валидации email-адреса перед отправкой формы. Обратите внимание, что встроенная в HTML5 проверка email носит базовый характер и в продакшне часто дополняется кастомными регулярными выражениями или библиотеками, поскольку может ошибочно принимать неполные адреса вида 'w3docs@gmail' (если хотите узнать, как это исправить, читайте JavaScript Validation API):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Form Validation Example</title>
</head>
<body>
    <form name="registrationForm">
        <input type="email" name="email" placeholder="Enter your email" required />
        <input type="submit" value="Register" />
    </form>
    <div id="message"></div>

    <script>
        const form = document.forms['registrationForm'];
        const email = form.elements['email'];

        form.onsubmit = function(event) {
            // Note: HTML5 email validation is basic and often supplemented by custom regex or libraries for production.
            // It may incorrectly accept incomplete addresses like 'w3docs@gmail'.
            if (!email.checkValidity()) {
                document.getElementById('message').textContent = "Please enter a valid email address.";
                event.preventDefault();
                return;
            }
            document.getElementById('message').textContent = "Registration successful!";
            event.preventDefault(); // Prevents actual form submission
        }
    </script>
</body>
</html>

Попробуйте сами »

В этом скрипте форма проверяет поле email при отправке. Отображается сообщение о том, успешна ли регистрация или есть ошибка — и всё это без отправки данных на сервер. Пример также демонстрирует ограничение HTML5-валидации email, которая не обеспечивает полноценную проверку правильности формата домена.

Реагирование на события `input` и `change`

Два события охватывают большинство взаимодействий с формами:

input срабатывает при каждом нажатии клавиши или изменении значения — идеально для предпросмотра в реальном времени, счётчиков символов и валидации по мере ввода.
change срабатывает только когда пользователь фиксирует изменение: когда текстовое поле теряет фокус после редактирования, или сразу же при переключении чекбокса, радиокнопки или <select>. Используйте его, когда реагировать на каждое нажатие клавиши было бы избыточно.

search.addEventListener('input', () => console.log(search.value)); // every keystroke
country.addEventListener('change', () => console.log(country.value)); // on selection

Следующий пример использует input для отображения счётчика символов в реальном времени по мере ввода пользователем:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Input Event Example</title>
</head>
<body>
  <form name="bioForm">
    <textarea name="bio" maxlength="100" placeholder="Tell us about yourself"></textarea>
  </form>
  <div id="counter">0 / 100</div>

  <script>
    const bio = document.forms.bioForm.elements.bio;
    const counter = document.getElementById('counter');
    bio.addEventListener('input', function () {
      counter.textContent = bio.value.length + ' / 100';
    });
  </script>
</body>
</html>

Подробнее о механике отправки формы — включая разницу между событием submit и методом form.submit() — смотрите в разделе Формы: событие и метод submit.

Методы форм: `submit()`, `reset()` и `focus()`

Формы и элементы управления также предоставляют императивные методы:

form.submit() отправляет форму программным способом. Важный нюанс: метод не вызывает событие submit, поэтому любая валидация, привязанная к этому событию, будет пропущена. Предпочтительнее использовать form.requestSubmit(), если нужно, чтобы сработали валидация и событие.
form.reset() восстанавливает все элементы управления к начальным значениям.
element.focus() перемещает курсор клавиатуры в элемент управления — удобно для выделения первого невалидного поля. Противоположный метод — blur(). Подробности смотрите в разделе Фокус: focus / blur.

const form = document.forms.signup;
if (!form.email.value) {
  form.email.focus();   // send the user straight to the empty field
} else {
  form.requestSubmit(); // submit AND run the submit event + validation
}
form.reset();           // clear the form back to defaults

Обработка событий формы

Вот как можно динамически обрабатывать события формы:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Events Example</title>
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center">
      <form
        style="display: flex; flex-direction: column; gap: 5px"
        name="contactForm"
      >
        <input type="text" name="fullName" placeholder="Full Name" required />
        <textarea name="message" placeholder="Your Message"></textarea>
        <input type="submit" value="Send" />
      </form>
    </div>
    <div
      style="display: flex; justify-content: center; align-items: center"
      id="confirmation"
    ></div>

    <script>
      const form = document.forms["contactForm"];

      form.onsubmit = function (event) {
        const name = form.elements["fullName"].value;
        const message = form.elements["message"].value;
        document.getElementById("confirmation").textContent =
          "Thank you, " + name + ", we received your message!";
        event.preventDefault(); // Prevents form from submitting to a server
      };
    </script>
  </body>
</html>

Попробуйте сами »

Этот пример обеспечивает мгновенную обратную связь с пользователем, отображая сообщение-подтверждение при отправке формы. Он наглядно показывает, как JavaScript может управлять событиями формы для улучшения взаимодействия без обращения к серверу.

Заключение

Освоение свойств и методов форм JavaScript расширяет функциональность веб-приложений и улучшает взаимодействие с пользователем. Получайте доступ к формам через document.forms, обращайтесь к их элементам по имени с помощью form.elements, читайте состояние через подходящее свойство (value, checked, selectedIndex), реагируйте на события input и change, а также управляйте формой с помощью submit(), reset() и focus().

Для дальнейшего изучения продолжайте со связанными главами:

Практика

Какие из следующих утверждений верны относительно форм и их методов в JavaScript?

Коллекция `document.forms` позволяет получить доступ к формам в документе как по имени, так и по числовому индексу.С помощью `form.elements` можно получить доступ к отдельным элементам формы по их атрибуту name.`form.submit()` вызывает событие submit формы и используется для валидации данных перед отправкой на сервер.Элемент `fieldset` в форме действует как подформа и содержит собственное свойство `elements`.Изменение атрибута name элемента input через JavaScript немедленно обновляет коллекцию `form.elements`, отражая новое имя.

Введение в работу с формами в JavaScript

Доступ к формам и их элементам

document.forms и form.elements

Чтение и запись значений элементов управления

Работа со значениями полей ввода

Продвинутые техники работы с формами

Валидация формы

Реагирование на события input и change

Методы форм: submit(), reset() и focus()

Обработка событий формы

Заключение

Практика

`document.forms` и `form.elements`

Реагирование на события `input` и `change`

Методы форм: `submit()`, `reset()` и `focus()`