Рекомендации по формам входа в систему

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

Jun 29, 2020 — Обновлено Sep 27, 2021

Available in: English, Español, Português, 中文, and 日本語

Appears in: Identity

Sam Dutton

Twitter GitHub

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

Вот пример простой формы входа в систему, в дизайне которой реализованы все рекомендации:

Контрольный список #

• Используйте понятные элементы HTML: <form>, <input>, <label> и <button>.
• Для каждого поля ввода данных создайте соответствующую подпись <label>.
• Для доступа к встроенным функциям браузера используйте атрибуты элементов: type, name, autocomplete и required.
• Присвойте атрибутам name и id стабильные значения, которые не будут изменяться между загрузками страницы или развертываниями веб-сайта.
• Поместите форму входа в систему в отдельный элемент
  .
• Примите все меры для успешной отправки формы.
• Для ввода пароля в форме регистрации и для ввода нового пароля в форме сброса пароля используйте параметры autocomplete="new-password" и id="new-password".
• Для ввода пароля при входе в систему используйте параметры autocomplete="current-password" и id="current-password".
• Реализуйте функцию «Показать пароль».
• Для ввода пароля используйте элементы aria-label и aria-describedby.
• Не дублируйте вводимые данные.
• Разрабатывайте формы таким образом, чтобы мобильная клавиатура не закрывала собой поля ввода данных и кнопки.
• Проверьте, удобно ли работать с формами на мобильных устройствах: используйте хорошо читаемый текст и убедитесь, что поля ввода данных и кнопки достаточно велики, чтобы использовать их в качестве сенсорных элементов управления.
• Используйте фирменные оформление и стиль на страницах регистрации и входа в систему.
• Выполните тестирование как в «полевых», так и в лабораторных условиях: добавьте в потоки регистрации и входа в систему средства аналитики страниц, аналитики взаимодействия и ориентированного на пользователей измерения производительности.
• Выполните тестирование в разных браузерах и на разных устройствах: поведение формы может значительно отличаться на разных платформах.

Используйте понятный HTML #

Используйте элементы, созданные для форм: <form>, <label> и <button>. Они позволяют использовать встроенные функции браузера, лучше поддерживать специальные возможности и делают разметку понятной.

Используйте элемент <form> #

У вас может возникнуть соблазн вложить поля ввода данных в элементы <div> и отправлять входные данные исключительно с помощью JavaScript. В общем случае лучше использовать старый простой элемент <form>. Благодаря этому ваш сайт будет доступен для программ чтения с экрана и других устройств, обеспечивающих специальные возможности, вы сможете использовать ряд встроенных функций браузера, вам будет проще создавать базовые функциональные средства для входа в систему для старых браузеров, и это все будет работать даже в случае сбоя JavaScript.

Используйте элемент <label> #

Создать подпись для поля ввода данных можно с помощью элемента <label>.

<label for="email">Адрес электронной почты</label>
<input id="email" …>

Вот две причины, по которым нужно делать это.

• При касании подписи или щелчку по ней фокус будет перемещен на поле ввода данных, с которым связана подпись. Свяжите подпись с полем ввода данных, используя атрибут for подписи с параметром name или id поля ввода данных.
• Программы чтения с экрана воспроизводят текст подписи, когда фокус перемещается на подпись или на поле ввода данных, связанное с подписью.

Не используйте заполнители в качестве подписей, связанных с полями ввода данных. Люди склонны забывать, что было указано в поле ввода данных, как только они начинают вводить текст, особенно если они отвлеклись («Что нужно было ввести? Адрес электронной почты, номер телефона или идентификатор учетной записи?»). Есть много других потенциальных проблем с заполнителями: если вы до сих пор не согласны с этим, см. статьи «Не используйте атрибут заполнителя» и «Заполнители в полях формы вредны».

Вероятно, самый лучший вариант — размещать подписи над полями ввода данных. Это позволяет создать единообразный дизайн для мобильных устройств и ПК и (согласно исследованиям ИИ Google) ускоряет «сканирование» элементов управления пользователями. Подписи и поля ввода данных будут иметь полную ширину, и вам не придется ее корректировать, чтобы подписи и поля ввода данных соответствовали тексту подписей.

Откройте Glitch label-position на мобильном устройстве и убедитесь в этом сами.

Используйте элемент <button> #

Используйте элемент <button> для кнопок. Элементы кнопок поддерживают специальные возможности и встроенные функции отправки форм. Кроме того, к ним можно легко применять стили. Нет смысла использовать в качестве кнопки элемент <div> или какой-нибудь другой элемент.

Убедитесь, что на кнопке отправки написано, что она делает. Примеры: Создать учетную запись или Войти, но не Отправить или Начать.

Что нужно сделать для успешной отправки формы #

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

• Перейти на другую страницу.
• Имитировать переход с помощью метода History.pushState() или History.replaceState() и удалить форму ввода пароля.

Выполнив запрос XMLHttpRequest или fetch, убедитесь, что в ответе сообщается об успешном входе в систему и выполняется обработка входа в систему путем извлечения формы из DOM, а также имеется информация об успешном выполнении для пользователя.

Рассмотрите возможность отключения кнопки Войти после того как пользователь нажмет ее. Многие пользователи нажимают кнопки несколько раз даже на быстро реагирующих сайтах. Такие действия замедляют взаимодействие и увеличивают нагрузку на сервер.

И наоборот, не отключайте функцию отправки формы, ожидающую ввод данных пользователем. Например, не отключайте кнопку Войти, если пользователь не ввел PIN-код клиента. Пользователь может что-то пропустить в форме, а затем попытаться несколько раз нажать (отключенную) кнопку Войти и подумать, что она не работает. Если необходимо отключить функцию отправки формы, объясните пользователю, каких данных не хватает, когда он нажимает отключенную кнопку.

Не дублируйте поля ввода данных #

На некоторых сайтах пользователям необходимо дважды вводить адрес электронной почты или пароль. Это позволяет уменьшить количество ошибок для небольшого числа пользователей, но при этом всем пользователям нужно выполнять дополнительную работу, что увеличивает показатель отказов. Кроме того, нет смысла просить пользователя дважды вводить данные, когда браузеры автоматически вводят адреса электронной почты или предлагают надежные пароли. Лучше разрешить пользователям подтверждать свой адрес электронной почты (вам все равно нужно это сделать) и при необходимости упростить для них процедуру сброса пароля.

Максимально полно используйте возможности, предоставляемые атрибутами элементов #

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

Скрывайте пароли, но позволяйте пользователям просматривать их при необходимости #

Поля ввода паролей должны иметь тип type="password", чтобы можно было скрыть текст пароля и сообщить браузеру, что то или иное поле ввода данных предназначено для паролей. (Обратите внимание, что в браузерах используются различные методы определения ролей полей ввода данных и принятия решений о том, предлагать или не предлагать пользователям сохранять пароли.)

Добавьте значок или кнопку Показать пароль, чтобы пользователь мог проверить введенный текст. Кроме того, обязательно добавьте ссылку Забыли пароль?. См. раздел «Включение функции отображения пароля».

Предоставьте пользователям мобильных устройств подходящую клавиатуру #

Используя элемент <input type="email">, можно предоставить пользователям мобильных устройств подходящую клавиатуру и включить базовую встроенную функцию проверки адреса электронной почты в браузере. При этом не потребуется использовать JavaScript.

Если вам нужно использовать номер телефона вместо адреса электронной почты, элемент <input type="tel"> позволяет активировать клавиатуру для ввода номера телефона на мобильном телефоне. При необходимости также можно использовать атрибут inputmode: элемент inputmode="numeric" идеально подойдет для ввода числовых PIN-кодов. Подробные сведения см. в статье «Все, что вы хотели знать о режиме ввода».

Клавиатура на экране мобильного устройства не должна закрывать собой кнопку «Войти» #

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

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

Выполните тестирование на разных устройствах #

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

Попробуйте использовать две страницы #

Некоторые сайты (в том числе Amazon и eBay) избегают этой проблемы, запрашивая адрес электронной почты или номер телефона и пароль на двух страницах. Кроме того, этот подход упрощает взаимодействие с пользователем: пользователю требуется выполнять только по одной задаче за раз.

В идеальном случае следует реализовать этот подход с помощью одного элемента . С помощью JavaScript можно сначала отобразить только поле ввода адреса электронной почты, затем скрыть его и отобразить поле ввода пароля. Если необходимо заставить пользователя перейти на новую страницу между вводом адреса электронной почты и вводом пароля, в форме на второй странице должен быть скрытый элемент поля ввода данных со значением адреса электронной почты, чтобы диспетчеры паролей могли сохранять правильные значения. Пример кода см. в статье «Стили форм ввода паролей, которые понимает Chromium».

Избавьте пользователей от необходимости повторно вводить данные #

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

Этот процесс включает две указанные ниже части.

1. Благодаря атрибутам autocomplete, name, id и type браузер «понимает» роль полей ввода данных. Это позволяет сохранять данные и впоследствии использовать их для автозаполнения полей. Чтобы можно было хранить данные для автозаполнения, в современных браузерах также требуется, чтобы поля ввода данных имели стабильные значения атрибутов name или id (а не создаваемые случайным образом при каждой загрузке страницы или развертывании сайта) и присутствовали в форме наряду с кнопкой submit.

2. Атрибут autocomplete помогает браузерам правильно автоматически заполнять поля ввода данных ранее сохраненными данными.

Для ввода адресов электронной почты используйте параметр autocomplete="username", так как в современных браузерах диспетчеры паролей распознают параметр username даже в тех случаях, когда следует использовать параметр type="email". Кроме того, вам, возможно, потребуется использовать параметры id="email" и name="email".

Для полей ввода паролей используйте соответствующие значения атрибутов autocomplete и id, чтобы браузеры могли различать новые и текущие пароли.

Используйте атрибуты autocomplete="new-password" и id="new-password" для нового пароля #

• Используйте атрибуты autocomplete="new-password" и id="new-password" для полей ввода паролей в форме регистрации или новых паролей в форме изменения пароля.

Используйте атрибуты autocomplete="current-password" и id="current-password" для текущего пароля #

• Используйте атрибуты autocomplete="current-password" и id="current-password" для поля ввода пароля в форме входа в систему или поля ввода старого пароля пользователя в форме изменения пароля. Таким образом вы сообщите браузеру, что нужно использовать текущий пароль, который он сохранил для данного сайта.

Для формы регистрации:

<input type="password" autocomplete="new-password" id="new-password" …>

Для формы входа в систему:

<input type="password" autocomplete="current-password" id="current-password" …>

Поддержка диспетчеров паролей #

В разных браузерах функции автозаполнения адреса электронной почты и предложения пароля работают по-разному, но результаты во многом одинаковы. Например, в Safari 11 и более поздних версий на настольных компьютерах отображается диспетчер паролей, а затем используется биометрическая проверка подлинности (проверка отпечатка пальца или распознавание лица), если она доступна.

Chrome для настольных компьютеров предлагает варианты адресов электронной почты, отображает диспетчер паролей и автоматически вводит пароль.

Системы работы с паролями и автозаполнения в браузерах не просты. Алгоритмы прогнозирования, хранения и отображения значений не стандартизированы и зависят от конкретной платформы. Например, Хидде де Фрис (Hidde de Vries) говорит следующее: «В Firefox эвристические функции диспетчера паролей дополнены системой рецептов».

В статье «Автозаполнение: что должны знать, но не знают веб-разработчики» содержится намного больше информации об использовании атрибутов name и autocomplete. В спецификации HTML перечислены все 59 возможных значений.

Предоставьте браузеру возможность предлагать надежные пароли #

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

Вот как это работает в Safari для настольных компьютеров.

(Функция предложения надежных уникальных паролей доступна в Safari, начиная с версии 12.0.)

Благодаря встроенным генераторам паролей в браузерах пользователям и разработчикам не нужно продумывать, что такое «надежный пароль». Так как браузеры могут безопасно хранить пароли и при необходимости автоматически вводить их, пользователям не нужно запоминать или вводить пароли. Если поощрять пользователей применять встроенные генераторы паролей в браузерах, они с большей вероятностью будут использовать уникальные надежные пароли на вашем сайте и с меньшей вероятностью будут повторно использовать пароли, которые, возможно, скомпрометированы на других сайтах.

Сделайте так, чтобы пользователи не пропускали поля ввода данных #

Добавляйте атрибут required в поля ввода адреса электронной почты и пароля. Современные браузеры автоматически запрашивают недостающие данные и перемещают фокус на них. В этом случае не потребуется использовать JavaScript.

Дизайн для пальцев и больших пальцев #

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

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

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

Согласно руководству по специальным возможностям в ОС Android рекомендуемый целевой размер объектов на сенсорных экранах равен 7–10 мм. В рекомендациях компании Apple по интерфейсу рекомендуется размер 48 x 48 пикселей, а организация W3C рекомендует использовать элементы с размером не менее 44 x 44 пикселя CSS. Исходя из этого, добавьте отступ размером приблизительно 15 пикселей (как минимум) для элементов ввода данных и кнопок для мобильных устройств и приблизительно 10 пикселей для настольных компьютеров. Попробуйте использовать такие элементы управления на реальном мобильном устройстве и с помощью реальных пальцев или большого пальца. Вам должно быть удобно нажимать каждое поле ввода данных и каждую кнопку.

С помощью аудита Lighthouse Tap targets are not sized appropriately можно автоматизировать процесс обнаружения слишком маленьких элементов ввода данных.

Дизайн для больших пальцев #

Если выполнить поиск по ключевым словам touch target (цель касания), отобразится множество изображений указательных пальцев. Тем не менее в реальной жизни для взаимодействия с телефоном многие люди используют большие пальцы. Большие пальцы имеют больший размер, чем указательные, и управлять с их помощью устройствами менее удобно. Это еще одна причина создавать элементы управления правильного размера для сенсорных экранов.

Сделайте шрифт текста достаточно большим #

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

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

Это означает, что для мобильных устройств следует использовать больший размер шрифта в пикселях: шрифт размером 16 пикселей в Chrome для настольных компьютеров вполне разборчив, но даже при хорошем зрении трудно читать шрифт размером 16 пикселей в Chrome для ОС Android. Можно настроить разные размеры шрифтов в пикселях для разных размеров областей просмотра с помощью медиа-запросов. Шрифт размером 20 пикселей практически идеально подходит для мобильных устройств, но вам следует проверить его на друзьях или коллегах с плохим зрением.

С помощью аудита Lighthouse Document doesn't use legible font sizes можно автоматизировать процесс обнаружения слишком мелкого текста.

Оставьте достаточно места между полями ввода данных #

Оставьте достаточно места вокруг элементов управления, чтобы полями ввода данных было удобно пользоваться на сенсорных экранах. Другими словами, размер свободного места должен быть примерно равен ширине пальца.

Убедитесь, что поля ввода данных хорошо видны #

Стиль границ полей ввода данных, используемый по умолчанию, делает их трудноразличимыми. Они почти невидимы на некоторых платформах, например в Chrome для ОС Android.

Помимо отступов, добавьте границу: на белом фоне хорошим стандартным правилом считается использовать цвет #ccc или более темный.

Предупреждайте пользователей о вводе недопустимых значений с помощью встроенных функций браузера #

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

С помощью селектора CSS :invalid можно выделять недопустимые данные. Используйте конструкцию :not(:placeholder-shown), чтобы не допустить выбор полей ввода данных без содержимого.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

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

При необходимости используйте JavaScript #

Включение и выключение отображения пароля #

Вам следует добавить значок или кнопку Показать пароль, чтобы пользователь мог проверить вводимый текст. Если у пользователя нет возможности просмотреть введенный текст, это снижает удобство использования сайта. В настоящее время нет встроенного способа сделать это, хотя есть планы по его реализации. Вместо этого вам потребуется использовать JavaScript.

В приведенном ниже коде для добавления функции Показать пароль используется текстовая кнопка.

HTML:

<section>
  <label for="password">Пароль</label>
  <button id="toggle-password" type="button" aria-label="Показать пароль в виде простого текста. Предупреждение: в этом случае ваш пароль будет отображен на экране.">Показать пароль</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

С помощью этого кода CSS можно сделать так, чтобы кнопка выглядела как простой текст:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Медиа-запрос не показан здесь. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Отображение в верхней правой части контейнера */
  position: absolute;
  top: 0;
  right: 0;
}

И JavaScript для отображения пароля:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Скрыть пароль';
    togglePasswordButton.setAttribute('aria-label',
      'Скрытие пароля.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Показать пароль';
    togglePasswordButton.setAttribute('aria-label',
      'Показать пароль в виде простого текста. ' +
      'Предупреждение: если нажать эту кнопку, ваш пароль будет отображен на экране.');
  }
}

Вот конечный результат:

Включите поддержку специальных возможностей для полей ввода данных #

С помощью атрибута aria-describedby можно указать правила работы с паролями, присвоив ему значение идентификатора элемента, в котором описаны ограничения. Программы чтения с экрана произносят текст подписи, тип поля ввода данных (пароль), а затем описание.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Не менее восьми знаков, включая буквы, цифры и специальные символы.</div>

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

<button id="toggle-password"
        aria-label="Показать пароль в виде простого текста.
                    Предупреждение: в результате этого действия ваш пароль будет отображен на экране.">
  Показать пароль
</button>

Посмотреть обе функции ARIA в действии можно в следующем Glitch:

В статье «Создание форм с поддержкой специальных возможностей» есть дополнительные советы по использованию специальных возможностей в формах.

Выполняйте проверку в режиме реального времени и перед отправкой #

Для элементов и атрибутов форм HTML имеются встроенные функции базовой проверки. Тем не менее следует выполнять более надежную проверку с использованием JavaScript, когда пользователи вводят данные и когда они пытаются отправить форму.

В действии 5 codelab, посвященного форме входа в систему, используется Constraint Validation API (широко поддерживаемый), который позволяет добавлять пользовательскую проверку с помощью встроенного пользовательского интерфейса браузера для перемещения фокуса на нужный элемент и отображения подсказок.

См. дополнительные сведения в статье «Использование JavaScript для сложной проверки в режиме реального времени».

Аналитика и RUM #

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

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

• Аналитика страницы: количество просмотров страниц регистрации и входа в систему, показатели отказов и количество выходов.
• Аналитика взаимодействия: воронки целей (в каких местах пользователи прерывают процесс регистрации или входа в систему?) и события (какие действия выполняют пользователи при взаимодействии с формами?).
• Производительность веб-сайта: метрики, ориентированные на пользователей (медленно ли работают ваши формы регистрации и входа в систему? Если да, то в чем причина?).

Кроме того, прежде чем выпускать изменения для всех пользователей, вам, возможно, потребуется реализовать тестирование A/B, чтобы опробовать различные подходы к процессам регистрации и входа в систему, а также поэтапное развертывание для проверки изменений на подмножестве пользователей.

Общие рекомендации #

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

• Не заставляйте пользователей искать функцию входа в систему. Разместите ссылку на форму входа в систему в верхней части страницы, используя понятные формулировки, например Войти, Создать учетную запись или Зарегистрироваться.
• Разместите фокус на нужных элементах. В формах регистрации не следует отвлекать пользователей предложениями и другими возможностями сайта.
• Сделайте процесс регистрации как можно проще. Собирайте другие данные пользователей (например, адреса или данные кредитных карт) только тогда, когда пользователи понимают явные преимущества от предоставления этих данных.
• Прежде чем пользователи начнут заполнять форму регистрации, объясните, в чем состоит ценностное предложение. Какие преимущества они получат, выполнив вход в систему? Предоставьте пользователям конкретные стимулы для завершения регистрации.
• Если возможно, разрешите пользователям идентифицировать себя по номеру мобильного телефона, а не по адресу электронной почты, так как некоторые пользователи могут не использовать электронную почту.
• Упростите процедуру сброса пароля для пользователей и сделайте так, чтобы ссылка Забыли пароль? была очевидна.
• Ссылка на документы с условиями обслуживания и политикой конфиденциальности: с самого начала объясните пользователям, как вы защищаете их данные.
• Добавьте логотип и название вашей компании или организации на страницы регистрации и входа в систему и убедитесь, что язык, шрифты и стили соответствуют остальной части вашего сайта. По некоторым формам трудно догадаться, что они относятся к тому или иному сайту, особенно если их URL-адреса существенно отличаются от URL-адреса сайта.

Продолжайте учиться #

• Создание потрясающих форм
• Рекомендации по разработке форм для мобильных устройств
• Функциональные элементы управления в формах
• Создание форм с поддержкой специальных возможностей
• Оптимизация процесса входа в систему с помощью Credential Management API
• Проверка номеров телефонов в Интернете с помощью WebOTP API

Фотография Меган Ширек (Meghan Schiereck) с Unsplash .