1. Видалити стиль за замовчуванням
2. Видалення стилів за замовчуванням:
3. результат:
4. Застосувати селектори для веб-форми
5. розмітка HTML
6. CSS
7. Селектор: indeterminate
8. Селектори для перевірки
9. Регулярні вирази для веб-форми
10. Регулярні вирази для номера телефону
11. Регулярний вираз для e-mail
12. підказки користувачеві
13. висновок

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

Видалити стиль за замовчуванням

Кожен браузер застосовує для полів веб-форми вбудовані в браузер властивості форматування. Наприклад, більшість браузерів заокруглення кути для полів пошуку, входу або додає градієнти, які ну не як не підходять до дизайну сайту.

Щоб видалити стилі за замовчуванням, Ви можете використовувати властивість appearance: none; яке вимагає префікси. Примітка, використовуйте ці властивості з обережністю, тому що вони можуть видалити основні стилі так, що зникнуть чекбокси і радиокнопки. Тому застосовуйте властивості тільки тоді, коли це дійсно потрібно. Після застосування властивостей для веб-форми бажано у міру можливості протестувати результат в різних браузерах.

Видалення стилів за замовчуванням:

input [type = "text"], input [type = "email"], input [type = "tel"] textarea {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; }

Властивість також видаляє тінь кордон щоб повністю позбавити від незрозумілих блакитних тіней і помилок стилю у всіх браузерах.

результат:

type = "text"
type = "email"
type = "tel"

Застосувати селектори для веб-форми

Селектор: focus працює в браузерах починаючи з CSS 2.1 і додає стилі для елемента який активується, наприклад.

input: focus, textarea: focus, select: focus {background-color: #eef; }

Ось не поганий спосіб застосувати селектори + псевдокласи + Веб-технології WAI-ARIA для веб-форми. Це підказка для форми входу в систему за допомогою властивостей CSS.

розмітка HTML

<Form id = "demo-aria" action = ""> <fieldset> <legend> Форма входу в систему </ legend> <div> <label for = "username"> Логін: </ label> <input type = " text "id =" username "aria-describedby =" username-tip "required /> <div role =" tooltip "id =" username-tip "> Логін - це ваше ім'я користувача в системі або електронну адресу </ div> < / div> <div> <label for = "password"> Пароль: </ label> <input type = "text" id = "password" aria-describedby = "password-tip" required /> <div role = "tooltip "id =" password-tip "> Пароль для входу був відправлений на Вашу електронну адресу </ div> </ div> </ fieldset> </ form>

CSS

legend {padding: 2px 8px; white-space: normal; } Fieldset> div {position: relative; height: 68px; } Div label {display: inline-block; width: 70px; } Input: focus + [role = "tooltip"] {display: block; } [Role = "tooltip"] {background: #eee; padding: 2px 4px; position: relative; display: none; z-index: 2; }

Селектор: checked застосовує стилі прапорцям або перемикачів, наприклад.

перевіряти input: checked ~ label {font-weight: bold; }

Якщо потрібен стиль за замовчуванням, натисніть застосувати зміни, коли активується: checked (перевірка). Крім того, ви можете використовувати: not (: checked).

Селектор: indeterminate

У специфікації W3C про селекторі: indeterminate є тільки згадка, таким чином, щоб він призначений для checkbox або radio кнопок.

Секрет цього селектора полягає в тому, що він застосовує стилі тільки, коли встановлено прапорець (пташка) в .indeterminate властивостей через JavaScript, наприклад.

document.getElementById ( "mycheckbox"). indeterminate = true;

Скрипт не має ніякого ефекту на властивість .checked, яке може тільки бути true або false.

Є кілька ситуацій, коли селектор: indeterminate може бути корисний. Якщо у вас є цілий ряд радіо кнопок, можна застосувати «відзначити все» але позначки будуть в невизначеному стані.

Селектори для перевірки

Селектор: required застосовуються для порожнього поля, якщо було відправлено порожнє поле буде упередження, подробиці на цій сторінці HTML5 перевірка даних веб-форм . Селектор: optional застосовується якщо немає: required, але можна і без нього, досить в CSS додати псевдоклас: not (: required)

Селектори: valid і: invalid застосовуються для перевірки або для скасування перевірки достовірності введених даних в веб-форму.

Аналогічно як і з: required, селектор: invalid або псевдоклас: not (: valid) застосовує стилі для вступних даних, які містить неприпустимі дані, наприклад.

input: invalid {border-color: red; }

У цьому прикладі неприпустимі дані будуть виділені червоною кордоном.

Регулярні вирази для веб-форми

Буквено-цифрові значення

Буквено-цифрові значення - це поєднання букв з латинського алфавіту і цифр.

<Form> <label for = "username"> Логін: </ label> <input type = "text" pattern = "[a-zA-Z0-9] +"> <input type = "submit" value = "Відправити "> </ form>

це не обов'язково повинен бути Логін.

Регулярні вирази для номера телефону

Справа в тому що type = "tel" в повному обсязі підтримуються веб-браузермі через розбіжності формату телефонних номерів в різних країнах.

Наприклад, на півострові Крим формат мобільного номера (050) XXX-XX-XX щось на зразок (050) 555-55-55.

Регулярний вираз ^ \ (\ d {3} \) \ d {3} - \ d {2} - \ d {2} $ відповідає формату, отже елемент введення буде виглядати так:

<Form> <label for = "phonenum"> Телефон: </ label> <input type = "tel" pattern = "^ \ (\ d {3} \) \ d {3} - \ d {2} - \ d {2} $ "> <input type =" submit "value =" Відправити "> </ form>

Для старих браузерів можна спробувати застосувати JavaScript:

function validphone (Phone) {return /^\(\d{3}\)\d{3}-\d{2}-\d{2}$/.test(Phone); }

Регулярний вираз для e-mail

Це регулярний вираз з відповідним символом @. Наприклад для електронної адреси виду [email protected]

<Form> <label for = "email"> E-mail: </ label> <input type = "email" pattern = "^ ([a-z0-9 _-] + \.) * [A-z0-9_ -] + @ [a-z0-9 _-] + (\. [a-z0-9 _-] +) * \. [az] {2,6} $ "> <input type =" submit "value =" Надіслати "> </ form>

Регулярний вираз з символом @ може відповідати імені користувача Twitter, наприклад @ sky4man, але вже в type = "text";

<Form> <label for = "twitter"> Користувач Twitter: </ label> <input type = "text" pattern = "^ @ [A-Za-z0-9 _] {1,15} $"> <input type = "submit" value = "Відправити"> </ form>

підказки користувачеві

Щоб надати користувачеві опис про помилки введення в поле веб-форми можна використовувати атрибут title:

Опис про помилку введення телефонного номера <form> <label for = "phonenum"> Телефон: </ label> <input type = "tel" name = "tel" pattern = "^ \ (\ d {3} \) \ d {3} - \ d {2} - \ d {2} $ "title =" Ви не вірно ввели номер мобільного телефону, повторіть введення в форматі (050) XXX-XX-XX "/> <input type =" submit " value = "Відправити"> </ form>

висновок

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

Підтримка браузерами перевірки введених даних в веб-форму

Не можна на стороні клієнта покладатися тільки на перевірку введених даних одним браузером, перевірка може не спрацювати для зловмисника (Хакер) або комп'ютерного бота. Крім того не всі браузери підтримують HTML5, це означає, що на стороні сервера також повинна бути перевірка даних веб-форм перед відправкою їх для обробки що б уникнути злому сайту або MITM атаки .