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

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

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

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

Зачем нам нужна проверка входных данных

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

1. Полезно

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

2. Безопасный

Когда речь идет о безопасности, это означает, что нам нужно предотвратить внедрение вредоносного контента - умышленно или случайно.

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

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

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

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

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

Проверка ограничений HTML5

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

Чтобы сделать оценку, алгоритм использует связанные с проверкой атрибуты входных элементов, такие как , </code>, а также <code><select></code>. Если вы хотите узнать, как происходит проверка ограничений шаг за шагом в браузере, ознакомьтесь с документом WhatWG..</p> <p>Благодаря функции проверки ограничений HTML5 мы можем выполнить все <strong>стандартные задачи проверки ввода</strong> на стороне клиента <strong>без JavaScript, исключительно с HTML5</strong>.</p> <p>Для выполнения более сложных задач, связанных с проверкой, HTML5 предоставляет нам <strong>JavaScript API для проверки ограничений</strong> мы можем использовать для настройки наших пользовательских сценариев проверки.</p> <h4>Проверка с семантическими типами ввода</h4> <p>HTML5 ввел <strong>семантические типы ввода</strong> что - помимо указания значения элемента для пользовательских агентов - также может использоваться для <strong>подтвердить ввод пользователя</strong> ограничивая пользователей определенным форматом ввода.</p> <p>Помимо типов ввода, которые уже существовали до HTML5 (<code>текст</code>, <code>пароль</code>, <code>Отправить</code>, <code>сброс</code>, <code>радио</code>, <code>флажок</code>, <code>кнопка</code>, <code>скрытый</code>), мы также можем использовать следующее <strong>семантические типы ввода HTML5</strong>: <code>Эл. адрес</code>,<code>телефон</code>,<code>URL</code>,<code>число</code>,<code>время</code>,<code>Дата</code>,<code>Дата и время</code>,<code>Дата и время-местный</code>, <code>месяц</code>,<code>неделю</code>, <code>спектр</code>, <code>поиск</code>,<code>цвет</code>.</p> <p>Мы можем безопасно использовать типы ввода HTML5 в старых браузерах, так как они будут вести себя как <code><input type="text"></code> поле в браузерах, которые их не поддерживают.</p> <p>Давайте посмотрим, что происходит, когда пользователь вводит неправильный тип ввода. Допустим, мы создали поле ввода электронной почты со следующим кодом:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Ваш адрес электронной почты:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Когда пользователь вводит строку, которая не использует формат электронной почты, алгоритм проверки ограничения <strong>не отправляет форму</strong>, а также <strong>возвращает сообщение об ошибке</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>То же правило применяется и к другим типам ввода, например, для <code>тип = "URL"</code> пользователи могут отправлять только входные данные, соответствующие формату URL (начинается с протокола, такого как <code>Http: //</code> или же <code>FTP: //</code>).</p> <p>Некоторые типы ввода используют дизайн, который <strong>даже не позволяет пользователям вводить неправильный формат ввода</strong>, например <code>цвет</code> а также <code>спектр</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Фоновый цвет:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Если мы используем <code>цвет</code> В качестве типа ввода пользователь должен либо выбрать цвет из палитры цветов, либо выбрать черный по умолчанию. Поле ввода <strong>ограничено дизайном</strong>, поэтому это не оставляет много шансов на ошибку пользователя.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Когда это уместно, стоит рассмотреть возможность использования <code><select></code> HTML-тег, который работает аналогично этим типам ввода с ограничениями; это позволяет пользователям выбирать из выпадающего списка.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Ваш любимый фрукт:</label> <select name="fruit"> <option value="apple">яблоко</option> <option value="pear">Груша</option> <option value="orange">оранжевый</option> <option value="raspberry">Малина</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Используйте атрибуты проверки HTML5</h4> <p>Использование семантических типов ввода устанавливает определенные ограничения на то, что пользователям разрешено отправлять, но во многих случаях мы хотим пойти немного дальше. Это когда <strong>атрибуты, связанные с проверкой</strong> из <code><input></code> тег может помочь нам.</p> <p>Связанные с проверкой атрибуты относятся к определенным типам ввода (их нельзя использовать на <em>все</em> типы), на которые они накладывают дополнительные ограничения.</p> <h5>1. <code>требуется</code> для получения правильного ввода всеми средствами</h5> <p> <code>требуется</code> Атрибут является наиболее известным атрибутом проверки HTML. Это <strong>логический атрибут</strong> что значит <strong>не имеет никакого значения</strong>, мы просто должны поместить его в <code><input></code> отметьте, если мы хотим использовать это:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Если пользователь забывает ввести значение в обязательное поле ввода, браузер <strong>возвращает сообщение об ошибке</strong> который предупреждает их, чтобы заполнить поле, и они <strong>не могу отправить форму</strong> пока они не предоставили действительный вклад. Вот почему важно всегда <strong>отметить визуально</strong> обязательные поля для пользователей.</p> <p> <code>требуется</code> атрибут может быть <strong>используется вместе со следующими типами ввода</strong>: <code>текст</code>, <code>поиск</code>, <code>URL</code>, <code>телефон</code>, <code>Эл. адрес</code>, <code>пароль</code>, <code>Дата</code>, <code>Дата и время</code>, <code>Дата и время-местный</code>, <code>месяц</code>, <code>неделю</code>,<code>время</code>, <code>число</code>, <code>флажок</code>, <code>радио</code>, <code>файл</code>, плюс с <code><textarea></code>а также <code><select></code> HTML-теги.</p> <h5>2. <code>мин</code>, <code>Максимум</code> а также <code>шаг</code> для проверки номера</h5> <p> <code>мин</code>, <code>Максимум</code> а также <code>шаг</code> атрибуты позволяют нам <strong>накладывать ограничения на поля ввода чисел</strong>. Их можно использовать вместе с <code>спектр</code>, <code>число</code>, <code>Дата</code>, <code>месяц</code>, <code>неделю</code>, <code>Дата и время</code>, <code>Дата и время-местный</code>, а также <code>время</code> типы ввода.</p> <p> <code>мин</code> а также <code>Максимум</code> атрибуты обеспечивают отличный способ легко <strong>исключить необоснованные данные</strong>. Например, приведенный ниже пример заставляет пользователей указывать возраст от 18 до 120 лет..</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Ваш возраст:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Когда алгоритм проверки ограничений сталкивается с пользовательским вводом, меньшим, чем <code>мин</code>, или больше, чем <code>Максимум</code> значение, оно не позволяет ему достичь бэкэнда и возвращает сообщение об ошибке.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>шаг</code> атрибут <strong>указывает числовой интервал</strong> между допустимыми значениями числового поля ввода. Например, если мы хотим, чтобы пользователи выбирали только високосные годы, мы можем добавить <code>шаг = "4"</code> приписать к полю. В приведенном ниже примере я использовал <code>число</code> тип ввода, так как нет <code>тип = «год»</code> в HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Ваш любимый високосный год:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>С заранее установленными ограничениями пользователи могут выбирать високосные годы только между 1972 и 2016 годами, если они используют маленькую стрелку вверх, которая идет с <code>число</code> тип ввода. Они также могут ввести значение вручную в поле ввода, но если оно не соответствует ограничениям, браузер вернет сообщение об ошибке..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>максимальная длина</code> для проверки длины текста</h5> <p> <code>максимальная длина</code> атрибут позволяет <strong>установить максимальную длину символа</strong> для текстовых полей ввода. Может использоваться вместе с <code>текст</code>, <code>поиск</code>, <code>URL</code>, <code>телефон</code>, <code>Эл. адрес</code> а также <code>пароль</code> типы ввода, а также с <code><textarea></code> HTML-тег.</p> <p> <code>максимальная длина</code> Атрибут может быть отличным решением для полей телефонных номеров, которые не могут содержать более определенного количества символов, или для контактных форм, где мы не хотим, чтобы пользователи писали более определенной длины.</p> <p>Фрагмент кода ниже показывает пример для последнего, он ограничивает сообщения пользователя до 500 символов. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Сообщение (не более 500 символов):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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

 
 * Ваш пароль: