Формы JavaScript в DOM

Формы являются фундаментальными компонентами веб-приложений, обеспечивая взаимодействие с пользователем и сбор данных. В этом руководстве рассматриваются практические навыки работы с DOM, необходимые для работы с ними: доступ к элементам формы и полям ввода, чтение и запись значений полей, сбор всех данных сразу с помощью FormData, реакция на события формы и проверка пользовательского ввода перед отправкой.

Если вы только знакомитесь с DOM, начните с Выбора элементов DOM и Введения в события браузера, а затем вернитесь сюда.

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

Выбор элементов формы

Вы можете получить доступ к элементам формы с помощью тех же методов DOM, которые используете для любых других узлов: getElementById, getElementsByName, getElementsByTagName и querySelector / querySelectorAll. В большинстве случаев предпочтительнее использовать getElementById (самый быстрый, если вы контролируете разметку) или querySelector (наиболее гибкий, поддерживает любые CSS-селекторы).

<!DOCTYPE html>
<html>
<head>
    <title>Selecting Form Elements</title>
</head>
<body>
<h4>Fill the form inputs, and press 'Show Input Values' button.</h4>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
    </form>
    <button id="showInputs">Show Input Values</button>

    <script>
        // Select elements by ID
        const username = document.getElementById('username');
        const email = document.getElementById('email');
        const showInputsButton = document.getElementById('showInputs');

        // Using querySelector for selection
        const emailByQuery = document.querySelector('#email');

        showInputsButton.addEventListener('click', () => {
            alert(`Username: ${username.value}, Email: ${emailByQuery.value}`);
        });
    </script>
</body>
</html>

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

Этот пример демонстрирует выбор элементов формы с помощью различных методов и отображение их значений в диалоговом окне при нажатии кнопки «Show Input Values».

Использование коллекции document.forms

Каждая форма на странице также доступна через встроенную коллекцию document.forms, а каждое именованное поле внутри формы доступно как свойство этой формы. Это часто самый краткий способ читать значения без вызова getElementById для каждого поля.

// <form name="userForm">
//   <input name="username">
//   <input name="email">
// </form>

const form = document.forms.userForm;     // or document.forms[0]
console.log(form.username.value);          // value of the username field
console.log(form.elements['email'].value); // same via the elements collection

Коллекция form.elements содержит все элементы управления (поля ввода, выпадающие списки, текстовые области, кнопки), принадлежащие форме, индексированные как по позиции, так и по атрибуту name. Полный список см. в разделе Свойства и методы формы.

Получение и установка значений полей ввода

Доступ к значениям полей ввода и их изменение

Значения полей ввода можно получать и изменять с помощью свойства value.

<!DOCTYPE html>
<html>
<head>
    <title>Getting and Setting Input Values</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
        <button type="button" id="showValues">Show Values</button>
        <button type="button" id="setValues">Set New Values</button>
    </form>

    <script>
        const username = document.getElementById('username');
        const email = document.getElementById('email');
        const showValuesButton = document.getElementById('showValues');
        const setValuesButton = document.getElementById('setValues');

        showValuesButton.addEventListener('click', () => {
            alert(`Username: ${username.value}\nEmail: ${email.value}`);
        });

        setValuesButton.addEventListener('click', () => {
            username.value = 'newUsername';
            email.value = '[email protected]';
            alert('Values have been set to new values.');
        });
    </script>
</body>
</html>

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

Этот пример показывает, как получать и устанавливать значения полей ввода. Нажатие «Show Values» отображает текущие значения, а «Set New Values» изменяет их и показывает диалог подтверждения.

События формы

Обработка отправки и сброса формы с помощью событий submit и reset

Формы могут генерировать события submit и reset, которые можно обрабатывать для выполнения таких действий, как проверка данных или их обработка.

<!DOCTYPE html>
<html>
<head>
    <title>Form Events</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>

    <script>
        const form = document.getElementById('userForm');

        form.addEventListener('submit', (event) => {
            event.preventDefault();
            alert('Form submitted!');

            // Perform form validation or data processing here
        });

        form.addEventListener('reset', () => {
            alert('Form reset!');
        });
    </script>
</body>
</html>

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

Этот пример показывает, как обрабатывать события submit и reset формы для выполнения таких действий, как отмена поведения по умолчанию, проверка данных и их обработка.

Обработка взаимодействий с пользователем в реальном времени

Помимо submit и reset, формы часто используют события input, change, focus и blur для реакции на действия пользователя в реальном времени. Событие input срабатывает немедленно во время ввода, тогда как change срабатывает при потере фокуса элементом после изменения его значения. Подробнее см. в разделе События: change, input, cut, copy, paste.

<script>
    const inputField = document.getElementById('username');

    inputField.addEventListener('input', (e) => {
        console.log('User is typing:', e.target.value);
    });

    inputField.addEventListener('change', (e) => {
        console.log('Value changed:', e.target.value);
    });
</script>

Сбор всех данных формы с помощью FormData

Читать каждое поле вручную удобно для двух полей ввода, но для более крупных форм объект FormData позволяет собрать все именованные элементы управления сразу. Это также стандартный способ упаковки данных для запросов fetch.

const form = document.getElementById('userForm');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const formData = new FormData(form);

    // Read a single field
    console.log(formData.get('username'));

    // Iterate over every name/value pair
    for (const [name, value] of formData.entries()) {
        console.log(`${name}: ${value}`);
    }

    // Convert to a plain object (handy for JSON APIs)
    const data = Object.fromEntries(formData.entries());
    console.log(data); // { username: '...', email: '...' }

    // Send it to a server
    // fetch('/api/users', { method: 'POST', body: formData });
});

В результат включаются только элементы управления, имеющие атрибут name, что соответствует поведению браузера при нативной отправке формы.

Проверка данных и отмена поведения по умолчанию

Проверка данных формы

Клиентская проверка позволяет убедиться в корректности данных перед отправкой формы.

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" required />
        <input type="email" id="email" name="email" placeholder="Email" required />
        <button type="submit">Submit</button>
    </form>

    <script>
        const form = document.getElementById('userForm');

        form.addEventListener('submit', (event) => {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;

            if (!username || !email) {
                alert('Please fill in all fields.');
                return;
            }

            // Modern approach: use checkValidity() for built-in validation
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }

            // Fallback/custom regex validation if needed
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('Please enter a valid email address.');
                return;
            }

            alert('Form submitted successfully!');
        });
    </script>
</body>
</html>

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

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

Информация

Используйте querySelector и querySelectorAll для эффективного выбора элементов формы и всегда проверяйте значения полей перед отправкой формы, чтобы обеспечить целостность данных и удобство работы пользователя.

Внимание

Клиентская проверка улучшает пользовательский опыт, но не заменяет серверную проверку. Всегда проверяйте и очищайте данные также на стороне сервера.

Заключение

Работа с формами в JavaScript включает доступ к элементам формы, получение и установку значений полей, сбор данных с помощью FormData, обработку событий формы и проверку данных. Освоив эти техники, вы сможете создавать динамичные и отзывчивые веб-формы, улучшающие взаимодействие с пользователем и сбор данных. Для более глубокого изучения ознакомьтесь с разделами Формы: событие и метод submit и Свойства и методы формы.

Практика

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

Вы можете получить доступ к элементам формы через коллекцию document.forms.К элементам формы можно обращаться по атрибуту name.Метод submit() можно использовать для программной отправки формы.Атрибут action формы указывает, куда должны быть отправлены данные формы.Метод reset() очищает все пользовательские данные в форме.Свойство innerHTML обычно используется для получения значений формы.