Перейти к содержанию

JavaScript

Узнайте, как использовать JavaScript для улучшения форм.

Реакция на события формы

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

Помогите пользователям заполнить дополнительные элементы управления формой

Представьте, что вы создали форму опроса. После того как пользователь выбирает один из вариантов, вы хотите показать дополнительный <input>, чтобы задать конкретный вопрос, связанный с этим выбором. Как можно показать только соответствующий элемент <input>?

С помощью JavaScript можно раскрыть <input> только в том случае, если связанный с ним <input type="radio"> выбран в данный момент.

1
2
3
4
5
if (event.target.checked) {
    // show additional field
} else {
    // hide additional field
}

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

Давайте посмотрим на JavaScript-код для демонстрации. Заметили ли вы атрибуты aria-controls и aria-expanded? Используйте эти ARIA-атрибуты, чтобы помочь пользователям программ чтения с экрана понять, когда дополнительный элемент управления формы отображается или скрывается.

Атрибут aria-expanded для <input type="radio"> не корректно объявляется всеми программами чтения с экрана.

Убедитесь, что пользователи могут отправить форму, не покидая страницу

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

Для этого необходимо прослушать событие onsubmit, затем использовать event.preventDefault() для предотвращения поведения по умолчанию и отправить FormData с помощью Fetch API.

Data on support for the fetch feature across the major browsers from caniuse.com

FormData - это набор пар ключ/значение, представляющих поля формы и их значения. Вы можете добавить все поля формы в объект FormData или передать только некоторые поля формы и их значения.

Ваш сценарий бэкенда может проверить, является ли запрос POST запросом от браузера (используя атрибут action элемента формы, где method="post") или от JavaScript, например, как запрос fetch().

1
2
3
4
5
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Всегда уведомляйте пользователей программ чтения с экрана об изменении динамического содержимого. Добавьте в HTML элемент с атрибутом aria-live="polite" и обновляйте содержимое элемента после изменения. Например, обновите текст до 'Your comment was successfully posted' после того, как пользователь отправит комментарий.

Подробнее о ARIA live regions.

Валидация с помощью JavaScript

Убедитесь, что сообщения об ошибках соответствуют стилю и тону вашего сайта

Формулировки стандартных сообщений об ошибках в разных браузерах различаются. Как сделать так, чтобы всем пользователям показывалось одно и то же сообщение и чтобы оно соответствовало стилю и тону вашего сайта? Используйте метод setCustomValidity() из Constraint Validation API для определения собственных сообщений об ошибках.

Обязательно переведите и локализуйте сообщения об ошибках, если у вас мультиязычный сайт.

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

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

Слушайте событие blur, которое срабатывает, когда элемент теряет фокус, и используйте интерфейс ValidityState, чтобы определить, является ли элемент формы недействительным.

Убедитесь, что пользователи видят введенный ими пароль

Текст, вводимый в поле <input type="password">, по умолчанию скрыт, чтобы соблюсти конфиденциальность пользователей. Помогите пользователям ввести свой пароль, показав кнопку <button> для переключения видимости введенного текста.

Попробуйте демо-версию. Переключение видимости введенного текста осуществляется с помощью Show Password <button>. Как это работает? При нажатии на кнопку Show Password атрибут type поля пароля изменяется с type="password" на type="text", а текст <button> меняется на 'Hide Password'.

Попробуйте улучшить Показать пароль <button>. Где бы вы разместили <button>? Можно ли использовать только пиктограмму и при этом обеспечить доступ к <button>?

Важно сделать кнопку Показать пароль доступной. Свяжите <button> с <input type="password"> с помощью атрибута aria-controls.

Атрибут aria-controls поддерживается не всеми программами чтения с экрана, но для тех, которые его поддерживают, он является отличным дополнением.

Чтобы уведомить пользователей, читающих с экрана, о том, показан или скрыт пароль в данный момент, используйте элемент hidden с параметром aria-live="polite" и соответствующим образом измените его текст. Важно, чтобы пользователи программ чтения с экрана знали, когда пароль отображается и виден другому человеку, смотрящему на их экран.

1
2
3
<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

В Microsoft Edge отображается встроенный элемент управления раскрытием пароля для <input type="password">. Чтобы не иметь двух кнопок раскрытия, скройте встроенный элемент управления с помощью:

1
2
3
::-ms-reveal {
    display: none;
}

Подробнее о настройке кнопки раскрытия пароля.

Подробнее о реализации опции показа пароля.

Ресурсы

Источник — JavaScript

Комментарии