Захист від дурня
«Захистом від дурня» називається комплекс заходів щодо припинення введення неправильної інформації в формі. Наприклад, якщо в поле потрібно ввести позитивне число від 0 до 10, то слід перевірити, щоб користувач не ввів текст або число, яке не лежить в зазначеному діапазоні, тобто число не повинно бути менше нуля і більше десяти.
- Користувач помилився випадково, наприклад, неуважно прочитав, що йому потрібно вказати.
- На веб-сторінці неоднозначно просять ввести дані, тому користувачеві доводиться гадати і робити припущення, що ж насправді від нього хочуть. При цьому не завжди відбувається збіг думок розробника і користувача.
- Є ряд людей, які сприймають інструкції як виклик і намагаються вчинити навпаки. Такі користувачі міркують приблизно так: «Ага, мене просять ввести число. А що буде, якщо я вкажу літери? ». Після чого задають явно неправильну інформацію і дивляться, до чого це призведе.
Слід розуміти, що точні і правильні формулювання хоча і знижують ймовірність виникнення помилок, але ніяк не рятують від них. Тільки технічні засоби на стороні сервера дозволяють отримати необхідний результат і уникнути введення неправильної інформації. Проте, ревізія або, як її ще називають, валідація на стороні клієнта дозволяє швидко перевірити дані, що вводяться користувачем, на коректність, без відправки форми на сервер. Таким чином економиться час користувача і знижується навантаження на сервер. З позиції юзабіліті теж є плюси - користувач відразу отримує повідомлення про те, яку інформацію він вказав невірно і може виправити свою помилку.
Обов'язкове поле
Деякі поля форми повинні бути обов'язково заповнені перед їх відправкою на сервер. Це, наприклад, відноситься до форми реєстрації, де потрібно ввести логін і пароль. Для вказівки обов'язкових полів використовується атрибут required, як показано в прикладі 1.
Приклад 1. Атрибут required
HTML5 IE 10+ Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Обов'язкове поле </ title> </ head> <body> <form> <p> Логін: <input name = " login "required> </ p> <p> Пароль: <input type =" password "name =" login "required> </ p> <p> <input type =" submit "value =" Вхід "> </ p > </ form> </ body> </ html>Обов'язкові поля повинні бути заповнені перед відправкою форми, інакше форма на сервер не відправиться і браузер видасть про це попередження. Вид повідомлення залежить від браузера, наприклад Chrome виводить підказку, як показано на рис. 1.
Мал. 1. Обов'язкове поле не заповнено
коректність даних
Початково є два поля, в якому вводяться користувачем дані перевіряються автоматично. Це веб-адреса і адреса електронної пошти. Браузер Chrome також перевіряє на коректність поле з календарними даними, але тільки тому, що у нього не передбачений інтерфейс вибору календаря клацанням миші. Для цих елементів характерні наступні правила.
- Веб-адреса (<input type = "url">) повинен містити протокол (http: //, https: //, ftp: //).
- Адреса електронної пошти (<input type = "email">) повинен містити букви або цифри до символу @, після нього, потім точку і домен першого рівня.
У браузерів дещо різниться політика щодо перевірки даних користувача. Наприклад, Opera підставляє протокол http: // перед введеним текстом автоматично, тоді як інші браузери чекають його від користувача. Chrome і Opera вимагають, щоб в поштовій адресі була точка, для Firefox вона не обов'язкова.
У прикладі 2 показана форма з обов'язковими полями, в якій два поля перевіряється браузером.
Приклад 2. Коректність даних
HTML5 IE 10+ Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Коректність даних </ title> </ head> <body> <form> <p> Заповніть форму (всі поля обов'язкові) </ p> <p> Ім'я: <input name = "name" required> </ p> <p> Email: <input type = "email" name = "email" required> </ p> <p> Сайт: <input type = "url" name = "site" required> </ p> <p> <input type = "submit" value = "Відправити"> </ p> </ form> </ body> </ html>Opera перевіряє елемент форми тільки при наявності атрибута name.
Що відбувається в Opera при введенні невірних даних показано на рис. 2.
Мал. 2. Попередження про неправильних даних
шаблон введення
Деякі дані можна віднести до одного з видів елементів форми, тому для них доводиться використовувати текстове поле. При цьому їх введення відбувається за певним стандартом. Так, IP-адреса містить чотири числа розділених крапкою (192.168.0.1), поштовий індекс Росії обмежений шістьма цифрами (124007), телефон містить код міста і конкретну кількість цифр часто поділюваних дефісом (391 555-341-42) і ін. Браузеру необхідно вказати шаблон введення, щоб він згідно з ним перевіряв вводяться користувачем дані. Для цього використовується атрибут pattern, а його значенням виступає регулярний вираз . Деякі типові значення перераховані в табл. 1.
Табл. 1. Регулярні вирази Шаблон Опис ^ [a-zA-Z] + $ Будь-які латинські букви. ^ [0-9] + $ Будь-яка кількість цифр. \ D {1,3} \. \ D {1,3} \. \ D {1,3} \. \ D {1,3} IP-адресу. [0-9] {6} Поштовий індекс. \ D + (, \ d {2})? Ціна в форматі 1,34 (роздільник кома). \ D + (\. \ D {2})? Ціна в форматі 2.10 (роздільник точка).У прикладі 3 просять ввести шістнадцяткове значення кольору (# ffcc00) і якщо воно не лежить в цьому діапазоні, браузер виводить повідомлення про помилку.
Приклад 3. Шаблон введення
HTML5 IE 10+ Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Введення кольору </ title> </ head> <body> <form> <p> Введіть шістнадцяткове значення кольору (повинно починатися з #) </ p> <p> <input name = "digit" required pattern = "# [0-9A-Fa-f] {6}"> </ p> <p> <input type = "submit" value = "Відправити"> </ p> </ form> </ body> </ html>На рис. 3 показано попередження в браузері Chrome.
Мал. 3. Введені дані не відповідають шаблону
скасування валідації
Валідація не завжди потрібно для форми, наприклад, розробник побажає використовувати універсальне рішення на JavaScript і дублююча перевірка браузером йому вже ні до чого. У подібних випадках необхідно відключити вбудовану валідацію. Для цього застосовується атрибут novalidate тега <form>. У прикладі 4 показано використання цього атрибута.
Приклад 4. Скасування валідації
HTML5 IE 10+ Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Атрибут novalidate </ title> </ head> <body> <form novalidate> <p> <input name = "user "required placeholder =" Ваше ім'я "> </ p> <p> <input type =" submit "value =" Відправити "> </ p> </ form> </ body> </ html>Для аналогічної мети застосовується і атрибут formnovalidate, який додається до кнопки для відправки форми, в даному випадку до тегу <input type = "submit">. У цьому випадку форма з прикладу 4 буде мати наступний вигляд.
<Form> <p> <input name = "user" required placeholder = "Ваше ім'я"> </ p> <p> <input type = "submit" value = "Відправити" formnovalidate> </ p> </ form>Чому відбувається введення неправильної інформації?А що буде, якщо я вкажу літери?
D + (, \ d {2})?
D + (\. \ D {2})?