Введение в проверку ограничений HTML5

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

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

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

Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)

Зачем нам нужна проверка входных данных
Проверка ввода имеет две основные цели. Контент, который мы получаем, должен быть:
1. Полезно
Нам нужны полезные данные, с которыми мы можем работать. Мы должны заставить людей вводить реалистичные данные в правильном формате. Например, никто, кто жив сегодня, не родился 200 лет назад. На первый взгляд получение таких данных может показаться смешным, но в долгосрочной перспективе это раздражает и наполняет нашу базу данных бесполезными данными.
2. Безопасный
Когда речь идет о безопасности, это означает, что мы должны предотвратить внедрение вредоносного контента – преднамеренного или случайного.

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

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

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

«Проверка ввода лучше всего работает с чрезвычайно ограниченными значениями, например, когда что-то должно быть целым числом, или буквенно-цифровой строкой, или URL-адресом HTTP».

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

Читайте также: Учебное пособие по HTML5: Страница входа с формами HTML5

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

Чтобы выполнить оценку, алгоритм использует связанные с проверкой атрибуты входных элементов, такие как ,, а также <select>, Если вы хотите знать, как происходит проверка ограничений, шаг за шагом в браузере, посмотрите <a rel="nofollow noopener noreferrer" target="_blank" href="https://html.spec.whatwg.org/multipage/forms.html#constraint-validation">этот документ WhatWG</a>,</p> <p>Благодаря функции проверки ограничений HTML5 мы можем выполнять все стандартные задачи проверки ввода на стороне клиента без JavaScript, только с HTML5.</p> <p>Для выполнения более сложных задач, связанных с проверкой, HTML5 предоставляет нам <a rel="nofollow noopener noreferrer" target="_blank" href="https://html.spec.whatwg.org/multipage/forms.html#the-constraint-validation-api">JavaScript API для проверки ограничений</a> мы можем использовать для настройки наших пользовательских сценариев проверки.<br /> Проверка с семантическими типами ввода<br /> HTML5 ввел семантические типы ввода, которые – помимо указания значения элемента для пользовательских агентов – также могут использоваться для проверки ввода пользователя путем ограничения пользователей определенным форматом ввода.</p> <p>Помимо типов ввода, которые уже существовали до HTML5 (текст, пароль, отправка, сброс, радио, флажок, кнопка, скрытый), мы также можем использовать следующие семантические типы ввода HTML5: <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.email.html">электронное письмо</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.tel.html">телефон</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.url.html">URL</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.number.html">число</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.time.html">время</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.date.html">свидание</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.datetime.html">Дата и время</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.datetime-local.html">Дата и время-местный</a>, <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.month.html">месяц</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.week.html">неделя</a>, <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.range.html">спектр</a>, <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.search.html">поиск</a>,<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/html-markup/input.color.html">цвет</a>,</p> <p>Мы можем безопасно использовать типы ввода HTML5 в старых браузерах, так как они будут вести себя как <input type="text"> поле в браузерах, которые их не поддерживают.</p> <p class="recommended_top"> <p>Рекомендуемое чтение: типы ввода в HTML5-формах: дата, цвет и диапазон</p> <p>Давайте посмотрим, что происходит, когда пользователь вводит неправильный тип ввода. Скажем, мы создали поле ввода электронной почты со следующим кодом:</p> <form name="form" action="#" method="post"> <label for="youremail">Ваш адрес электронной почты:</label><br /> <input type="email" name="email" id="youremail"><br /> <input type="submit" value="Submit"><br /> </form> <p>Когда пользователь вводит строку, которая не использует формат электронной почты, алгоритм проверки ограничений не отправляет форму и возвращает сообщение об ошибке:<br /> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgNjAwIDI0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" width="600" height="240" alt="Проверка электронной почты" data-src="https://assets.hongkiat.com/uploads/html5-constraint-validation/email-validation.jpg">Это же правило применяется и к другим типам ввода, например, для type = “url” пользователи могут отправлять только вход, который соответствует формату URL (начинается с протокола, такого как http: // или ftp: //).</p> <p>Некоторые типы ввода используют дизайн, который даже не позволяет пользователям вводить неправильный формат ввода, например, цвет и диапазон.</p> <form name="form" action="#" method="post"> <label for="bgcol">Фоновый цвет:</label><br /> <input type="color" name="color" id="bgcol"><br /> <input type="submit" value="Submit"><br /> </form> <p>Если мы используем тип ввода цвета, пользователь будет вынужден либо выбрать цвет из палитры цветов, либо выбрать черный цвет по умолчанию. Поле ввода ограничено дизайном, поэтому оно не оставляет много шансов на ошибку пользователя.<br /> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjkxIiB2aWV3Qm94PSIwIDAgNjAwIDI5MSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" width="600" height="291" alt="Проверка цвета" data-src="https://assets.hongkiat.com/uploads/html5-constraint-validation/color-validation.jpg">Когда это уместно, стоит рассмотреть возможность использования <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/tag_select.asp"><select></a> HTML-тег, который работает аналогично этим типам ввода с ограничениями; это позволяет пользователям выбирать из выпадающего списка.</p> <form name="form" action="#" method="post"> <label for="favfruit">Ваш любимый фрукт:</label><br /> <select name="fruit" id="favfruit"><option value="apple">яблоко</option><option value="pear">Груша</option><option value="orange">оранжевый</option><option value="raspberry">Малина</option></select><br /> <input type="submit" value="Submit"><br /> </form> <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMzQ3IiB2aWV3Qm94PSIwIDAgNjAwIDM0NyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" width="600" height="347" alt="Проверка варианта" data-src="https://assets.hongkiat.com/uploads/html5-constraint-validation/option-validation.jpg">Используйте атрибуты проверки HTML5<br /> Использование семантических типов ввода устанавливает определенные ограничения на то, что пользователям разрешено отправлять, но во многих случаях мы хотим пойти немного дальше. Это когда атрибуты, связанные с проверкой <input> тег может помочь нам.</p> <p>Связанные с проверкой атрибуты относятся к определенным типам ввода (их нельзя использовать на <em>все</em> типы), на которые они накладывают дополнительные ограничения.<br /> 1. <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/att_input_required.asp">требуется</a> для получения правильного ввода всеми средствами<br /> Обязательный атрибут – самый известный атрибут проверки HTML. Это логический атрибут, который означает, что он не принимает никакого значения, мы просто должны поместить его в <input> отметьте, если мы хотим использовать это:</p> <p><input type="email" name="email" id="youremail" required></p> <p>Если пользователь забывает ввести значение в обязательное поле ввода, браузер возвращает сообщение об ошибке, предупреждающее его о необходимости заполнить поле, и они не могут отправить форму, пока не предоставят действительный ввод. Вот почему важно всегда отмечать визуально обязательные поля для пользователей.</p> <p>Обязательный атрибут может использоваться вместе со следующими типами ввода: текст, поиск, URL, телефон, электронная почта, пароль, дата, дата-время, дата-время-местный, месяц, неделя, время, число, флажок, радио, файл, а также с <textarea>а также <select> HTML-теги.<br /> 2. <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/att_input_min.asp">мин</a>, <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/att_input_max.asp">Максимум</a> а также <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/att_input_step.asp">шаг</a> для проверки номера<br /> Атрибуты min, max и step позволяют нам накладывать ограничения на поля ввода чисел. Их можно использовать вместе с типами ввода диапазона, числа, даты, месяца, недели, даты-времени, даты-времени и времени.</p> <p>Атрибуты min и max предоставляют отличный способ легко исключить необоснованные данные. Например, приведенный ниже пример заставляет пользователей указывать возраст от 18 до 120 лет.</p> <form name="form" action="#" method="post"> <label for="yourage">Ваш возраст:</label><br /> <input type="number" name="age" id="yourage" min="18" max="120"><br /> <input type="submit" value="Submit"><br /> </form> <p>Когда алгоритм проверки ограничения сталкивается с пользовательским вводом, меньшим, чем min, или большим, чем максимальное значение, он предотвращает его достижение бэкэнда и возвращает сообщение об ошибке.<br /> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjczIiB2aWV3Qm94PSIwIDAgNjAwIDI3MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" loading="lazy" width="600" height="273" alt="Возраст с минимальными и максимальными атрибутами" data-src="https://assets.hongkiat.com/uploads/html5-constraint-validation/age-min-max.jpg">Атрибут шага указывает числовой интервал между допустимыми значениями числового поля ввода. Например, если мы хотим, чтобы пользователи выбирали только високосные годы, мы можем добавить в поле атрибут step = “4”. В приведенном ниже примере я использовал тип ввода чисел, так как в HTML5 нет type = “year”.</p> <form name="form" action="#" method="post"> <label for="yourleapyear">Ваш любимый високосный год:</label><br /> <input type="number" name="leapyear" id="yourleapyear" min="1972" max="2016" step="4"><br /> <input type="submit" value="Submit"><br /> </form> <p>С предварительно установленными ограничениями пользователи могут выбирать високосные годы только между 1972 и 2016 годами, если они используют маленькую стрелку вверх, которая идет с типом ввода чисел. Они также могут ввести значение вручную в поле ввода, но в случае, если оно не соответствует ограничениям, браузер выдаст сообщение об ошибке.<br /> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgNjAwIDI0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" loading="lazy" width="600" height="240" alt="Проверка шага" data-src="https://assets.hongkiat.com/uploads/html5-constraint-validation/step-validation.gif">3. <a rel="nofollow noopener noreferrer" target="_blank" href="http://www.w3schools.com/tags/att_input_maxlength.asp">максимальная длина</a> для проверки длины текста<br /> Атрибут maxlength позволяет установить максимальную длину символа для текстовых полей ввода. Его можно использовать вместе с типами ввода текста, поиска, URL, телефона, электронной почты и пароля, а также с <textarea> HTML-тег</p> <p>Атрибут maxlength может быть отличным решением для полей телефонных номеров, которые не могут содержать более определенного числа символов, или для контактных форм, где мы не хотим, чтобы пользователи писали больше определенной длины.</p> <p>Фрагмент кода ниже показывает пример для последнего, он ограничивает сообщения пользователя до 500 символов.</p> <form name="form" action="#" method="post"> <label for="yourmsg">Сообщение (не более 500 символов):</label><br /> <textarea name="msg" id="yourmsg" cols="25" rows="4" maxlength="500">

Атрибут maxlength не возвращает сообщение об ошибке, но браузер просто не позволяет пользователям печатать больше, чем указанный номер символа. Вот почему так важно информировать пользователей об ограничениях, иначе они не поймут, почему они не могут продолжать печатать.
4. шаблон для проверки Regex
Атрибут pattern позволяет нам использовать Регулярные выражения в нашем процессе проверки ввода. Регулярное выражение – это заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для принудительного применения определенного формата, определенного шаблоном.

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

Рекомендуемое чтение: Руководство для начинающих по регулярным выражениям (Regex)

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

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

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

HTML5 формы доступны с помощью вспомогательных технологийпоэтому нам не обязательно использовать ария-требуется Атрибут ARIA для пометки обязательных полей ввода для программ чтения с экрана. Однако все еще может быть полезно добавить поддержку специальных возможностей для старых браузеров. Также можно отказаться от проверки ограничений, добавив NOVALIDATE логический атрибут к

<

form> элемент.