Введення в перевірку обмежень HTML5

Інтерактивні веб-сайти та програми не можна уявити без форм, які дозволяють нам зв’яжіться з нашими користувачами, і до отримати дані нам потрібно для того, щоб забезпечити безперебійну взаємодію з ними. Ми потребуємо дійсний вхід користувача, однак нам треба її придбати таким чином не заважає наші користувачі занадто багато.

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

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

Чому нам потрібна перевірка вхідних даних

Перевірка вхідних даних має дві основні цілі. Вміст, який ми отримуємо, має бути:

1. Корисно

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

2. Безпечний

Посилаючись на безпеку, це означає, що нам потрібно запобігти ін'єкції шкідливого вмісту - навмисне чи навмисне.

Корисність (отримання розумних даних) може бути досягнута тільки на стороні клієнта, Команда backend не може допомогти занадто багато з цим. Для досягнення безпеки, розробникам front-і backend необхідно працювати разом.

Якщо розробники інтерфейсу належним чином перевіряють введення на стороні клієнта, команді бекенда доведеться мати справу з набагато меншою вразливістю. Хакінг (сайт) часто тягне за собою надання додаткових даних, або дані в неправильному форматі. Розробники можуть боротися з отворами безпеки, як вони, успішно боротися з інтерфейсом.

Наприклад, цей посібник з безпеки PHP рекомендує перевірити все, що ми можемо на стороні клієнта. Вони підкреслюють важливість перевірки вхідних даних інтерфейсу, надаючи багато прикладів, таких як:

"Перевірка вхідних даних найкраще працює з дуже обмеженими значеннями, наприклад, коли щось має бути цілим чи алфавітно-цифровим рядком або URL-адресою HTTP."

У валідації вхідного інтерфейсу, наша робота полягає в тому, щоб накладають обґрунтовані обмеження на вхід користувача. Функція перевірки обмежень HTML5 надає нам засоби для цього.

Перевірка обмежень HTML5

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

Щоб зробити оцінку, алгоритм використовує атрибути вхідних елементів, пов'язані з перевіркою, як от , </code>, і <code><select></code>. Якщо ви хочете знати, як перевірка обмежень відбувається крок за кроком в браузері, перевірте цей документ WhatWG.</p> <p>Завдяки функції перевірки обмежень HTML5, ми можемо виконати всі <strong>стандартні завдання перевірки введення</strong> на стороні клієнта <strong>без JavaScript, виключно з HTML5</strong>.</p> <p>Щоб виконати більш складні завдання, пов'язані з перевіркою, HTML5 надає нам a <strong>API JavaScript для перевірки обмежень</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>datetime-local</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>type = "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">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>The <code>вимагається</code> атрибут є найбільш відомим атрибутом перевірки HTML. Це <strong>boolean атрибут</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>The <code>вимагається</code> атрибут може бути <strong>використовуються разом з наступними типами входів</strong>: <code>текст</code>, <code>пошук</code>, <code>url</code>, <code>тел</code>, <code>електронною поштою</code>, <code>пароль</code>, <code>дата</code>, <code>дата, час</code>, <code>datetime-local</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>The <code>хв</code>, <code>макс</code> і <code>крок</code> атрибути дозволяють нам <strong>покласти обмеження на поля введення чисел</strong>. Їх можна використовувати разом з <code>діапазон</code>, <code>номер</code>, <code>дата</code>, <code>місяць</code>, <code>тиждень</code>, <code>дата, час</code>, <code>datetime-local</code>, і <code>час</code> типи вхідних даних.</p> <p>The <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> значення, воно запобігає його досягненню в backend і повертає повідомлення про помилку.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>крок</code> атрибут <strong>вказує числовий інтервал</strong> між правовими значеннями числового поля введення. Наприклад, якщо ми хочемо, щоб користувачі обирали тільки з високосних років, ми можемо додати <code>step = "4"</code> атрибут поля. У наведеному нижче прикладі я використав <code>номер</code> тип введення, так як немає <code>type = "year"</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>maxlength</code> для перевірки довжини тексту</h5> <p>The <code>maxlength</code> Атрибут дозволяє <strong>встановити максимальну довжину символу</strong> для текстових полів введення. Його можна використовувати разом з <code>текст</code>, <code>пошук</code>, <code>url</code>, <code>тел</code>, <code>електронною поштою</code> і <code>пароль</code> типів вхідних даних і з <code><textarea></code> Тег HTML.</p> <p>The <code>maxlength</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">

The maxlength атрибут не повертає повідомлення про помилку, але браузер просто не дозволяє користувачам вводити більше, ніж вказаний номер символу. Тому дуже важливо інформувати користувачів про обмеження, інакше вони не зрозуміють, чому вони не можуть продовжувати друкувати.

 
 * Ваш пароль: