Розуміння того, що таке перевірка форми HTML5 і плаваюча мітка введення
Реалізація перевірки форми відіграє важливу роль у запобіганні введенню зловмисними користувачами безглуздого тексту в поля форми. Крім того, це обмежує недосвідчених користувачів від помилкового введення неправильної інформації у форму.
Звичайно, ви не хочете збирати неправильні дані від користувачів у небезпечний спосіб. Отже, вам необхідно визначити правила перевірки для форм.
Роками ми використовували складний і TL;DR (тобто занадто довгий; не читав) код JavaScript для реалізації перевірки форми на стороні клієнта. На щастя, з випуском «перевірки форми HTML5» ми тепер можемо додавати перевірки до форми з мінімальною кількістю JavaScript.
Незважаючи на те, що остання версія HTML пропонує кілька переваг, найважливішою з них є те, що вона постачається з великою кількістю нових полів введення та атрибутів, необхідних для перевірки форми без необхідності писати складний код перевірки JS (скорочення від JavaScript).
Але пам’ятайте, що користувачі можуть легко розчаруватися під час заповнення форми, особливо коли вони дізнаються, що дані, які вони ввели, були неправильними, можуть ще більше посилити їхнє розчарування. Але завдяки HTML5 додавання плаваючих міток введення може підтверджувати дані форми одночасно, коли користувачі заповнюють форму. Таким чином користувачі одразу дізнаються про помилку в полях введення.
Наприклад, нижче наведено зображення, опубліковане на Dribble Меттом Смітом, яке демонструє, як працює шаблон плаваючої мітки, застосований до форми:
У цьому дописі описано, як можна застосувати плаваючі мітки введення під час додавання перевірок до форми HTML5.
Але перш ніж почати
Можливо, більшість із вас спочатку захоче дізнатися про процес перевірки форми HTML5. Зрештою, не всі з вас можуть мати досвід написання коду перевірки для форми HTML5. Крім того, можливо, ви не будете знати про нещодавно представлені поля введення та атрибути в HTML5.
Детальний огляд перевірки форми HTML5
Якщо ви плануєте перевіряти форму, радимо спочатку розпочати перевірку на сервері. І, якщо ви хороший веб-дизайнер, продовжуйте додавати перевірку на стороні клієнта, допомагаючи своїм користувачам отримувати миттєвий зворотний зв’язок незалежно від того, заповнюють вони форму правильними даними чи ні. Наприклад, надання миттєвого зворотного зв’язку користувачам, коли вони вводять дані в поле адреси електронної пошти, дозволить їм знати, що введена адреса електронної пошти була дійсною.
Однією з чудових особливостей HTML5 є те, що він допомагає реалізувати перевірку на стороні клієнта без залежності від сценаріїв. Натомість ви можете виконати таке завдання, використовуючи «атрибути перевірки» на своїх елементах форми. Найважливіше те, що вам просто потрібно додати атрибут «required» для поля введення, а про решту подбає ваш браузер.
Ось приклад, який пояснює використання обов’язкового атрибута для додавання перевірки до поля введення:
Name: <input type="text" name="yourname" required>Наведений вище рядок коду сповіщає ваш браузер про те, що поле INPUT імені слід вважати обов’язковим (тобто його не можна залишати порожнім).
Як бачите, у текстовому полі, що відповідає полі введення «Ваше ім’я», відображається червоний маркер. Але як тільки в поле введення імені буде введено певний текст, маркер перетворюється на галочку, яка вказує на те, що введене значення дійсне.
Окрім <input type="text">(тобто типів введення тексту), HTML5 тепер підтримує кілька нових параметрів введення, як-от пошук, електронна пошта, телефон, дата, час тощо. Простіше кажучи, за допомогою HTML5 ми можемо написати наведений нижче рядок коду:
<input type="text" name="email">у щось на зразок:
<input type="email" name="email">Браузери комп’ютерів відображатимуть наведений вище код так само, як і будь-яке стандартне текстове поле.
Ще одна важлива річ, на яку я хотів би звернути вашу увагу: якщо ви спробуєте ввести такі атрибути, як обов’язковий або input type="email” у демонстрації CodePen, навіть без будь-якого вмісту, ви все одно отримаєте повідомлення про помилку повідомлення після натискання кнопки «НАДІСЛАТИ» без дійсної адреси електронної пошти:
У прикладі, який ми обговорили вище, ви бачите, що браузер за замовчуванням відображає повідомлення про помилку. Але що, якщо ви хочете застосувати власне (тобто спеціальне) правило перевірки до вхідного значення? Тут стане в нагоді шаблон Regex.
Розуміння шаблонів регулярних виразів
Можливо, ви бачили шаблони під час введення електронної адреси, наприклад abc@a. Зайве говорити, що ви хотіли б, щоб ваші користувачі вводили справжню адресу електронної пошти. І, вказавши власний вибір шаблону, який збігається з вашими даними, ви допоможете перевірити введене значення. Наприклад, ви можете переконатися, що електронний лист відповідає шаблону, який містить три або більше символів у кінці. Для цього вам потрібно буде використовувати «атрибут шаблону» та регулярні вирази (RegEx).
RegEx — це в основному мова, яка використовується для аналізу або обробки тексту. Найчастіше регулярні вирази використовуються для виконання складних операцій (таких як пошук і заміна) для кращого формування текстових даних. Сьогодні ви можете знайти використання регулярних виразів майже в усіх мовах програмування та сценаріїв. RegEx можна використовувати для перевірки даних, введених у поля форми, шляхом примусового застосування їх до типів введення за допомогою атрибута шаблону таким чином:
<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">Крім того, якщо виникають будь-які помилки перевірки, ви можете визначити атрибут title разом із помилкою перевірки, щоб створити повідомлення, окрім «Неправильний формат!» використовуючи наведений нижче рядок коду:
<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">Майте на увазі, вам не потрібно писати будь-який абсурдний шаблон для кожного введення. Натомість у багатьох випадках вам потрібно просто призначити потрібний атрибут певному типу даних. Наприклад, число понад 8 буде виглядати так:
<input type="number" min="8" required>Також майте на увазі, що не всі браузери підтримують усі доступні атрибути перевірки. Взяти, наприклад, браузер Firefox несумісний із шаблоном «minlength».
Переваги використання перевірки форми HTML5
Найбільшою перевагою впровадження перевірки форм HTML5 є миттєвий зворотний зв’язок. Здебільшого під час заповнення деякого поля у формі користувачі висвітлюються певні позначки, щоб повідомити їм, чи було введене значення дійсним чи ні.
Тепер, коли ви вводите щось у текстове поле, колір рамки змінюється на зелений наступним чином:
Однак, як бачите, у такого підходу є і мінус. Навіть якщо додавати недійсне (або неповне) значення в поле «Ім’я», користувач отримує вказівку, що значення правильне. Можливо, ви можете подумати про додавання :invalid:not(:empty)в код. На жаль, така логіка не працюватиме з браузерами, оскільки вони зазвичай вважають елементи форми порожніми.
Думаєте, що робити?
Ви можете спробувати додати новий псевдоселектор під назвою “:placeholder-shown” у код таким чином:
<form>
<label>
<span>First Name</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
</label>
<button>Submit</button>
</form>Але більшість браузерів, здається, не підтримують placeholder-shown, тому вам краще написати сценарій для перемикання класу, коли поле введення порожнє чи ні. Ось код JavaScript для цього:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});ПРИМІТКА. Не забудьте видалити елемент заповнювача з наведеної вище розмітки HTML.
Тепер, коли ви запускаєте наведений вище фрагмент коду разом із розміткою HTML5, результат виглядатиме так:
Як бачите, колір текстового поля залишається червоним, доки перевірка, застосована до поля, не буде виконана. Натиснувши «Надіслати», ви побачите повідомлення про помилку, коли введете неповне ім’я.
Але, як тільки користувач вводить повний (понад 3 символи), колір межі текстового поля змінюється на зелений.
Як додати плаваючу мітку введення в HTML5?
А тепер давайте обговоримо підхід додавання плаваючої мітки введення під час перевірки вашої форми HTML5. Це допомагає покращити вигляд і відчуття форми. Ось розмітка HTML.
Щоб застосувати шаблон мітки з плаваючою речовиною, вам доведеться вставити тег прямо під <input>елементом у вашій розмітці HTML:
<form>
<label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
<span>Your Name</span>
</label>
<label>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
<span>Your Email</span>
</label>
<button>Submit</button>
</form>CSS виглядатиме приблизно так:
label {
position: relative;
display: inline-block;
}
label span {
position: absolute;
left: 20px;
top: -2em;
font-size: .75em;
cursor: text;
color: #f27853;
transition: all 150ms ease;
}
input {
border: 1px solid #f2f2f2;
outline: none;
}
input:focus {
border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
border-color: #ff8e7a;
}
input.empty {
border-color: #d9d9d9;
}
input.empty + span {
top: 50%;
transform: translateY(-50%);
font-size: 1em;
background: none;
color: #cccccc;
}
body {
display: flex;
min-height: 100vh;
background: #f1f1f1;
font-family: 'Lato', sans-serif;
font-size: 150%;
}
form {
margin: auto;
}
input, button {
padding: 15px 20px;
border-radius: 1px;
border: 2px solid #bdbdbd;
}
button {
border-color: #363636;
background: #363636;
color: #FFFFFF;
}І, нарешті, напишіть код JavaScript:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});Вихід:
За допомогою плаваючих міток вводу в HTML5 можна реалізувати кілька ефектів, наприклад:
- Додайте піктограми з ефектом поступового зникнення під час перевірки форми HTML5.
- Струсіть введення, якщо введені дані недійсні.
- Зробіть колір введених даних тьмяним, якщо вони заповнені правильно.
Що слід враховувати
Працюючи над впровадженням валідації у форму HTML5, вам потрібно знати:
- Підтримка браузера: форми HTML5 ідеально працюють у сучасних браузерах та IE10+. Хоча IE версії 9 і старіших версій не підтримують псевдоселектори перевірки, що утримує вас від стилізації форми, але він все одно функціонуватиме правильно.
- Застереження: одна річ, яку ви не можете виконати під час застосування перевірок до форми HTML5, це стиль повідомлень перевірки. Це тому, що така функція вимкнена браузерами.
Заключні слова
Впровадження валідації форми має вирішальне значення для додавання додаткового рівня безпеки на ваш сайт. Це тому, що це запобігає зловмисним користувачам додавати зловмисний текст як значення в поля вашої форми. Крім того, надання миттєвого зворотного зв’язку користувачам, коли вони вводять певні дані в поле перевіреного введення у формі, допоможе покращити їхній досвід. Зрештою, їм не доведеться витрачати час на те, щоб зрозуміти, що вони зробили помилку при заповненні форми. Але перевірка форми лише за допомогою JavaScript може бути складною. Тут вам на допомогу приходить перевірка форми HTML5.
Застосовуючи перевірки до форми за допомогою HTML5, вам не потрібно писати довгі рядки складного коду JS. Натомість ви можете реалізувати правила перевірки форми з мінімальним кодуванням JavaScript. Найважливіше те, що з перевіркою форми HTML5 доступно багато нових функцій, наприклад плаваюча мітка введення, завдяки якій форма виглядає чудово, заохочуючи користувачів надсилати форму.