JavaScript

Реагировать на события формы

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

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

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

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

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

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

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

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

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

Поддержка браузера

  • Хром: 42.
  • Край: 14.
  • Фаерфокс: 39.
  • Сафари: 10.1.

Источник

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

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

Всегда уведомляйте пользователей программ чтения с экрана об изменениях динамического содержимого. Добавьте элемент с атрибутом aria-live="polite" в свой HTML и обновите содержимое элемента после изменения. Например, обновите текст на «Ваш комментарий был успешно опубликован» после того, как пользователь отправит комментарий.

Узнайте больше о живых регионах ARIA .

Проверка с помощью JavaScript

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

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

Убедитесь, что пользователи уведомляются об ошибках в режиме реального времени.

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

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

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

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

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

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

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

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

Узнайте больше о реализации опции показа пароля .

Ресурсы