Введение в проверку ограничений HTML5
Интерактивные веб-сайты и приложения невозможно представить без форм, которые позволяют нам соединяться с нашими пользователями и получать необходимые нам данные для обеспечения бесперебойной работы с ними. Нам действительно нужен действительный пользовательский ввод, однако нам нужно приобретать его таким образом, чтобы он не слишком расстраивал наших пользователей.
Хотя мы можем улучшить удобство использования наших форм с помощью грамотно выбранных шаблонов проектирования UX, в HTML5 также есть собственный механизм проверка ограничений что позволяет нам отлавливать ошибки ввода прямо в интерфейсе.
В этом посте мы сосредоточимся на проверке ограничений, предоставляемых браузером, и рассмотрим, как разработчики веб-интерфейса могут обеспечить надежный ввод данных пользователем с помощью HTML5.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)
Зачем нам нужна проверка входных данных
Проверка ввода имеет две основные цели. Контент, который мы получаем, должен быть:
1. Полезно
Нам нужны полезные данные, с которыми мы можем работать. Мы должны заставить людей вводить реалистичные данные в правильном формате. Например, никто, кто жив сегодня, не родился 200 лет назад. На первый взгляд получение таких данных может показаться смешным, но в долгосрочной перспективе это раздражает и наполняет нашу базу данных бесполезными данными.
2. Безопасный
Когда речь идет о безопасности, это означает, что мы должны предотвратить внедрение вредоносного контента – преднамеренного или случайного.
Полезность (получение разумных данных) может быть достигнута только на стороне клиента, бэкэнд-команда не может помочь в этом. Чтобы обеспечить безопасность, разработчики как переднего, так и внутреннего интерфейса должны работать вместе.
Если разработчики веб-интерфейса правильно проверяют входные данные на стороне клиента, бэкэнд-команде придется иметь дело с гораздо меньшим количеством уязвимостей. Взлом (сайт) часто влечет за собой предоставление дополнительных данных или данных в неправильном формате. Разработчики могут бороться с дырами в безопасности, такими как эти, успешно сражаться с внешнего интерфейса.
Например, это руководство по безопасности PHP рекомендует проверить все, что мы можем на стороне клиента. Они подчеркивают важность проверки входных данных внешнего интерфейса, приводя множество примеров, таких как:
«Проверка ввода лучше всего работает с чрезвычайно ограниченными значениями, например, когда что-то должно быть целым числом, или буквенно-цифровой строкой, или URL-адресом HTTP».
В проверке входных данных в интерфейсе наша работа заключается в том, чтобы наложить разумные ограничения на ввод данных пользователем. Функция проверки ограничений в HTML5 предоставляет нам средства для этого.
Читайте также: Учебное пособие по HTML5: Страница входа с формами HTML5
Проверка ограничений HTML5
До HTML5 разработчики внешнего интерфейса ограничивались проверкой пользовательского ввода с помощью JavaScript, что было утомительным и подверженным ошибкам процессом. Чтобы улучшить проверку формы на стороне клиента, HTML5 ввел проверка ограничений алгоритм, который работает в современных браузерахи проверяет достоверность представленного ввода.
Чтобы выполнить оценку, алгоритм использует связанные с проверкой атрибуты входных элементов, такие как ,
Благодаря функции проверки ограничений HTML5 мы можем выполнять все стандартные задачи проверки ввода на стороне клиента без JavaScript, только с HTML5.
Для выполнения более сложных задач, связанных с проверкой, HTML5 предоставляет нам JavaScript API для проверки ограничений мы можем использовать для настройки наших пользовательских сценариев проверки.
Проверка с семантическими типами ввода
HTML5 ввел семантические типы ввода, которые – помимо указания значения элемента для пользовательских агентов – также могут использоваться для проверки ввода пользователя путем ограничения пользователей определенным форматом ввода.
Помимо типов ввода, которые уже существовали до HTML5 (текст, пароль, отправка, сброс, радио, флажок, кнопка, скрытый), мы также можем использовать следующие семантические типы ввода HTML5: электронное письмо,телефон,URL,число,время,свидание,Дата и время,Дата и время-местный, месяц,неделя, спектр, поиск,цвет,
Мы можем безопасно использовать типы ввода HTML5 в старых браузерах, так как они будут вести себя как поле в браузерах, которые их не поддерживают.
Рекомендуемое чтение: типы ввода в HTML5-формах: дата, цвет и диапазон
Давайте посмотрим, что происходит, когда пользователь вводит неправильный тип ввода. Скажем, мы создали поле ввода электронной почты со следующим кодом:
Когда пользователь вводит строку, которая не использует формат электронной почты, алгоритм проверки ограничений не отправляет форму и возвращает сообщение об ошибке:
Это же правило применяется и к другим типам ввода, например, для type = “url” пользователи могут отправлять только вход, который соответствует формату URL (начинается с протокола, такого как http: // или ftp: //).
Некоторые типы ввода используют дизайн, который даже не позволяет пользователям вводить неправильный формат ввода, например, цвет и диапазон.
Если мы используем тип ввода цвета, пользователь будет вынужден либо выбрать цвет из палитры цветов, либо выбрать черный цвет по умолчанию. Поле ввода ограничено дизайном, поэтому оно не оставляет много шансов на ошибку пользователя.
Когда это уместно, стоит рассмотреть возможность использования HTML-тег, который работает аналогично этим типам ввода с ограничениями; это позволяет пользователям выбирать из выпадающего списка.
Используйте атрибуты проверки HTML5
Использование семантических типов ввода устанавливает определенные ограничения на то, что пользователям разрешено отправлять, но во многих случаях мы хотим пойти немного дальше. Это когда атрибуты, связанные с проверкой тег может помочь нам.
Связанные с проверкой атрибуты относятся к определенным типам ввода (их нельзя использовать на все типы), на которые они накладывают дополнительные ограничения.
1. требуется для получения правильного ввода всеми средствами
Обязательный атрибут – самый известный атрибут проверки HTML. Это логический атрибут, который означает, что он не принимает никакого значения, мы просто должны поместить его в отметьте, если мы хотим использовать это:
Если пользователь забывает ввести значение в обязательное поле ввода, браузер возвращает сообщение об ошибке, предупреждающее его о необходимости заполнить поле, и они не могут отправить форму, пока не предоставят действительный ввод. Вот почему важно всегда отмечать визуально обязательные поля для пользователей.
Обязательный атрибут может использоваться вместе со следующими типами ввода: текст, поиск, URL, телефон, электронная почта, пароль, дата, дата-время, дата-время-местный, месяц, неделя, время, число, флажок, радио, файл, а также с
Атрибуты min и max предоставляют отличный способ легко исключить необоснованные данные. Например, приведенный ниже пример заставляет пользователей указывать возраст от 18 до 120 лет.
Когда алгоритм проверки ограничения сталкивается с пользовательским вводом, меньшим, чем min, или большим, чем максимальное значение, он предотвращает его достижение бэкэнда и возвращает сообщение об ошибке.
Атрибут шага указывает числовой интервал между допустимыми значениями числового поля ввода. Например, если мы хотим, чтобы пользователи выбирали только високосные годы, мы можем добавить в поле атрибут step = “4”. В приведенном ниже примере я использовал тип ввода чисел, так как в HTML5 нет type = “year”.
С предварительно установленными ограничениями пользователи могут выбирать високосные годы только между 1972 и 2016 годами, если они используют маленькую стрелку вверх, которая идет с типом ввода чисел. Они также могут ввести значение вручную в поле ввода, но в случае, если оно не соответствует ограничениям, браузер выдаст сообщение об ошибке.
3. максимальная длина для проверки длины текста
Атрибут maxlength позволяет установить максимальную длину символа для текстовых полей ввода. Его можно использовать вместе с типами ввода текста, поиска, URL, телефона, электронной почты и пароля, а также с
Атрибут maxlength может быть отличным решением для полей телефонных номеров, которые не могут содержать более определенного числа символов, или для контактных форм, где мы не хотим, чтобы пользователи писали больше определенной длины.
Фрагмент кода ниже показывает пример для последнего, он ограничивает сообщения пользователя до 500 символов.
Атрибут maxlength не возвращает сообщение об ошибке, но браузер просто не позволяет пользователям печатать больше, чем указанный номер символа. Вот почему так важно информировать пользователей об ограничениях, иначе они не поймут, почему они не могут продолжать печатать.
4. шаблон для проверки Regex
Атрибут pattern позволяет нам использовать Регулярные выражения в нашем процессе проверки ввода. Регулярное выражение – это заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для принудительного применения определенного формата, определенного шаблоном.
С помощью атрибута pattern мы можем сделать последнее – ограничить пользователей в отправке их входных данных в формате, который соответствует заданному регулярному выражению.
Рекомендуемое чтение: Руководство для начинающих по регулярным выражениям (Regex)
Атрибут pattern имеет много вариантов использования, но он может быть особенно полезен, когда мы хотим проверить поле пароля.
В приведенном ниже примере требуется, чтобы пользователи вводили пароль длиной не менее 8 символов и содержали как минимум одну букву и одну цифру (источник регулярного выражения, которое я использовал).
Еще несколько вещей
В этой статье мы рассмотрели, как использовать предоставляемую браузером проверку форм, предоставляемую собственным алгоритмом проверки ограничений HTML5. Для создания наших пользовательских сценариев проверки нам нужно использовать API проверки ограничений это может быть следующим шагом в совершенствовании навыков проверки формы.
HTML5 формы доступны с помощью вспомогательных технологийпоэтому нам не обязательно использовать ария-требуется Атрибут ARIA для пометки обязательных полей ввода для программ чтения с экрана. Однако все еще может быть полезно добавить поддержку специальных возможностей для старых браузеров. Также можно отказаться от проверки ограничений, добавив NOVALIDATE логический атрибут к
<
form> элемент.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)