Форми HTML5 CSS
У другій статті серії із трьох статей про форми HTML5 я збираюся познайомити вас зі стилізацією, а точніше - про селектори псевдокласів, які можна використовувати для стилізації елементів форми у різному стані.
Прибираємо стилі за замовчуванням
Як ви вже, мабуть, помітили – браузери використовують свої стилі для елементів форм за викладанням. Наприклад, більшість браузерів закруглює куточки у елементів search, а також додають непомітну фонову градієнтну заливку, які можуть виглядати трохи чужорідно в плоскому дизайні.
Для того, щоб усунути стандартні стилі, можна використовувати властивість appearance: none;, яка передбачає використання з префіксами. Але використовуйте його обережно, тому що воно може прибрати суттєво важливі стилі - наприклад, у Chrome прапорці та перемикачі взагалі зникають. Щоб не переборщити, додавайте властивості в міру потреби, і перевіряйте їхню роботу в різних браузерах.
Зауважте, що я також скинув властивості outline та box-shadow щоб прибрати негарне блакитне підсвічування навколо сфокусованого елементу, та стилізацію поля з помилкою у всіх браузерах.
Стан :focus був введений ще в CSS2.1, і він визначає стиль поточного вибраного елемента
Стилі :checked застосовуються до виділених прапорців та перемикачів, наприклад:
Не існує селектора :unchecked, але він вам і не потрібен: просто створіть стиль елемента у вихідному стані, а зміни застосовуйте при активації стану :checked. Як альтернативу можна використовувати селектор: not (: checked).
:indeterminate
Технічно стан :indeterminate немає специфікації, але він там згадано. Відповідно до специфікації, воно є станом перемикача або прапорця, коли вони"і вибрані, і не вибрані" (між двома станами)
Воно не дає ефекту на властивості .checked, яка може бути лише true чи false.
Існує кілька ситуацій, коли стан :indeterminate може бути корисним. Якщо у вас є список прапорців, ви можете використовувати прапорець "вибрати все", який вибирає або знімає виділення з усіх прапорців на кліку. Наприклад, якщо ви оберете лише кілька прапорців зі списку, то прапорець "вибрати все" може перейти в невизначений стан.
Застосовує стилі до будь-якого елемента, для якого встановлений атрибут required, і на момент відправлення форми в ньому має бути значення.
Застосовує стилі до будь-якого поля введення, яке не має атрибуту required. Я не зовсім розумію, навіщо його додали, якщо можна використовувати селектор :not(:required), який робить те саме.
Застосовує стилі до будь-якого поля, що містить правильні дані.
За аналогією з :valid, :invalid (або :not(:valid)) застосовує стилі до елементів, які містять невірні дані, тобто:
:in-range (числові поля та слайдери)
Числові поля та слайдери, що містять числа, значення яких потрапляє в діапазон, заданий мінімумом і максимумом, і відповідні кроку, можуть бути вибрані селектором :in-range. Але, взагалі-то, дуже важко вивести слайдер за межі ...
:out-of-range (числові поля та слайдери)
:out-of-range вибирає значення, які знаходяться поза заданим діапазоном значень поля введення
Поля введення з атрибутом disabled можна вибрати за допомогою псевдокласу: disabled
Запам'ятайте, що відключені поля не будуть валідуватися, і їх значення не буде надіслано на сервер. Але стилі для псевдо-класів :required і :invalid все одно будуть застосовуватись і длявимкнених елементів.
За аналогією, не відключені поля будуть схильні до впливу стилів для псевдо-класів :enabled (або :not(:disabled)). На практиці вам, швидше за все, не доведеться користуватися даним селектором, так як він є стилями для звичайного стану полів введення.
Вибрати поля з атрибутом readonly (тільки для читання) можна за допомогою псевдо-класу: read-only. Запам'ятайте, що значення полів, призначених тільки для читання, все одно будуть перевірені та відправлені на сервер, але користувач не зможе змінювати їх значення.
Звичайні поля, доступні для редагування, можуть бути вибрані за допомогою псевдо-класу :read-write (або :not(:read-only)). Загалом це не той селектор, який буде часто вам потрібен.
:default (тільки кнопки надсилання або поля введення)
І, нарешті, є селектор: default, який застосовує стилі до стандартної кнопки відправки форми.
Текстові стилі наповнювачів
Атрибут placeholder можна стилізувати за допомогою псевдоелементу ::placeholder з вендорними префіксами (у роздільних правилах), наприклад:
Специфіка CSS
Перераховані вище селектори можуть застосовуватися одночасно, так що потрібно бути обережними, визначаючи стилі, які можуть бути застосовані до одного і того ж поля введення. Уявимо:
Тут ми вказуємо, що в полі з помилкою текст повинен бути червоного кольору, але цього ніколи не відбудеться, тому що після цього правила ми задали ще одне, де вказали, що увімкнених елементів текст чорного кольору.
Намагайтеся використовувати прості селектори і використовувати мінімум коду. Наприклад, порожнє обов'язкове (:required) поле буде невалідним (:invalid), тому рідко коли потрібно стилізувати перший стан.
Спливаючий блок валідації
Принадсилання, перше поле з неправильним значенням буде виділено спливаючою блоком з повідомленням.
Його зовнішній вигляд відрізняється залежно від пристрою та браузера. Тільки браузери на движках Webkit/Blink дають можливість стилізувати цей спливающий блок за допомогою не зовсім стандартних правил CSS:
Підтримка браузерами
Наведені вище стилі застосовуються до полів негайно. Наприклад,
додасть червону межу всім полям із невірними значеннями. На жаль, при першому завантаженні сторінки багато хто може містити неправильні значення, і користувач буде збентежений великою кількістю червоних прямокутників.
- зупинити перевірку, поки форма використовується
- використовувати власні повідомлення про помилки
- використовувати заміну не підтримуваних типів полів уведення
- відкочувати валідацію та стилізацію для старих браузерів
- створювати зручніші форми
Ми розглянемо ближчі ці можливості в останній частині серії статей.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: http://www.sitepoint.com/html5-forms-css/ Переклав: Станіслав Протасевич Урок створений: 31 Травня 2014 Переглядів: 20240 Правила передруку
5 останніх уроків рубрики "HTML5"
Розширюємо можливості HTML за рахунок створення власних тегів
У цьому уроці покажу процес створення власних HTML тегів. Теги користувача вирішують безліч завдань: HTML документи стають простіше, а рядків коду стає менше.
HTML5: API роботи з вібрацією
HTML5 - ковток свіжого повітря в сучасному Інтернеті. Вона вплинула не тільки на класичний веб, яким ми знаємо його зараз. HTML5 надає розробникам ряд API для створення та покращення сайтів зорієнтацією на мобільні пристрої. У цій статті ми розглянемо API для роботи з вібрацією.
Створення форм за допомогою Webix Framework - 4 практичні приклади
Інтернет дизайнери часто стикаються з необхідністю створення форм. Це завдання не просте, і може викликати головний біль (особливо якщо ви робите щось не стандартне, наприклад, багатосторінкову форму). Для спрощення життя можна скористатися фреймворком. У цій статті я покажу вам кілька практичних прийомів для створення форм за допомогою фреймворку Webix.
Знайомство з фреймворком Webix
У цій статті ми хотіли б познайомити вас з фреймворком Webix. Для демонстрації можливостей даного інструменту ми створимо інтерфейс аудіо плеєра. Не зваблюйтеся - це лише модель інтерфейсу. Вихідний код доступний у демо та на сторінці GitHub.