Давайте поглянемо на те, як можна зробити візуально привабливу валідацію форми на боці клієнта за допомогою HTML5 та CSS.
Крок 1: Функціональність
Давайте створимо форму, як б запитувала у користувача наступну інформацію:
- Ім’я
- Ел. адреса
- Веб-сайт
- Повідомлення
Нам необхідно буди впевненими, що користувач ввів коректні дані. Для цього, ми будемо використовувати перевірку за допомогою HTML5.
Крок 2: Веб-форма
Крок 3: HTML. Код
Код для створення порожньої HTML5 сторінки:
HTML5 Contact Form
Крок 4: HTML. Форма
Давайте створимо HTML форму
Крок 5: HTML. Елементи форми
Всі елементи форми будуть загорнуті в список. Давайте створимо заголовок форми та перший її елемент.
-
Contact Us
* Denotes Required Field
Підказки форми
Як видно з макету, ми маємо форматовані підказки для таких полів, як «email», «website». Важливим є додавання блоку з підказкою (надавши їй відповідний клас) прямо під input’ом, це дасть нам змогу стилізувати їх.
Решта елементів
Крок 10: Стилізація «важливих» (required) полів
Давайте змінимо фон для «важливих» полів.
input:required, textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
Тепер, замість чистого фону, ми побачимо червноу зірочку.
Що ж станеться, якщо споробувати відправити форму?
Різні браузери роблять різні речі, коли ми спробуємо відправити форму, яка використовує HTML5 елементи. Більшість браузерів відміняє відправлення форми і показує повідомлення з помилкою. Оформлення цих помилок в усіх браузерах різне. На щастя ми можемо це виправити.
Порада
Ви можете стилізувати повідомлення, які показує браузер. Для webkit, це:
::-webkit-validation-bubble-message {
padding: 1em;
}
Крок 11: Розуміння нових HTML type атрибутів
Багато років, HTML підтримував жменьку type атрибутів, наприклад, type=”text”, але HTML5 — це велика кількість нових варіантів для цього атирубуту (email, url). Деякі з них ми візьмемо для нашої форми.
Якщо, браузер користувача не підтримує нові варіанти type, то значення атрибуту автоматично стане type=”text”. І це дуже добре.
Для десктопів type=”text” та type=”email” виглядають однаково, а користувачі телефонів — бачать ці поля по іншому.
Приклад: iPhone
Крок 12: Змінюємо значення атрибуту type
Зараз, ми змінимо значення атрибуту type для полів «email» та «website» з «text» на відповідні HTML5 значення.
Крок 13: HTML5 валідація
Якщо ви хочете, щоб ваша форма не проходила перевірку, то додайте атрибут novalidate :
Поле name
Давайте поглянемо на поле, де користувач повинен ввести своє ім’я. Ми вставили значення для атрибуту type, як «text», також, додали атрибут required. Це дає змогу браузеру зрозуміти, що він, повинен перевіряти це поле, як звичайний текст. Тобто, якщо користувач введе хоча б один символ, то поле пройде перевірку успішно.
Давайте створимо CSS-стилі для полів, які не пройшли, і пройшли перевірку. Ми можемо це зробити додавши селектор :ivalid, або :valid до CSS правил.
Спочатку, давайте створимо стилі для полів, які не пройшли валідацію:
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
Тепер, стилі для тих полів, які успішно пройшли перевірку.
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
Крок 14: Атрибут HTML5 — pattern
Цей атрибут дозволяє використовувати регулярні вирази з мови JavaScript.
Тепер, наше поле може приймати значення, яке починається з “http://”, або “https://”.
Крок 15: Підказки для полів (CSS)
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
Ми встановили display:none для того, щоб користувач бачив їх тільки, коли він в даний час вводить щось у форму. Також, текст підказок — червоний, тому що, він завжди повідомляє користувача про те, що він щось зробив не так.
Використовуємо селектор ::before
Давайте додамо маленький трикутник до блоків з підказками. Для цього будемо використовувати селектор ::before
.form_hint::before {
content: "\25C0"; /* left point triangle in escaped unicode */
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
Селектор +
Використаємо цей селектор для того, щоб показати/зховати повідомлення підказки. Цей селектор відбирає елемент, який знаходиться прямо після елемента, до якого було застосовано селектор.
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
На цьому все. Якщо хочете, можете подивитися демо, або скачати файли статті.
Першоджерело — «Bring Your Forms Up to Date With CSS3 and HTML5 Validation»
