inuasparwil.ru

Псевдокласи css3 для перевірки полів - valid і invalid.

Псевдокласи CSS3 для перевірки полів - valid і invalid.

Відео: JS.Валідація форм. Частина 1

Всім привіт. У цій невеликій статті я розповім про прості, але зручні псевдокласи CSS3 - valid і invalid.

Отже, як зрозуміло з назви, служать вони для того, щоб стилізувати ті поля, які заповнені вірно і невірно. Ми вже розглядали з вами всі типи полів форми в CSS3.

Відео: Перевірка полів форми використовуючи JQuery




Давайте створимо кілька.

type="Url"gt;
type="Email"gt;
type="Number"min="5"max="100"value="10"step="2"gt;

Тепер застосуємо тільки що вивчений псевдоклас invalid

Відео: Перевірка на заповнення полів php

input:invalid {
border:1px solid red-
color: red-
background:# ccc-
}


Тепер даний стиль застосується до всіх полів форми, які задані невірно.

Відео: 3 Створення модального вікна скрипт обробки полів

А щоб задати стиль для елементів, які задані вірно, - використовуйте псевдоклас valid.

input:valid {
color: green-
border:1px solid green-
background: white-
}

Отже, на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі
Як задавати градієнти в css3.Як задавати градієнти в css3.
Новий css3 псевдоклас - nth-child.Новий css3 псевдоклас - nth-child.
Як зробити просту навігацію на html5 і css3.Як зробити просту навігацію на html5 і css3.
Як зробити самостійно перегортаються текст на css3.Як зробити самостійно перегортаються текст на css3.
Перевірка підтримки нововведень html5 і css3.Перевірка підтримки нововведень html5 і css3.
Навіщо потрібен псевдоклас target в css3.Навіщо потрібен псевдоклас target в css3.
Як зробити прелоадер на чистому css3.Як зробити прелоадер на чистому css3.
Як зробити трикутники на чистому css.Як зробити трикутники на чистому css.
Html 5 атрибути для роботи з полями форми.Html 5 атрибути для роботи з полями форми.
Псевдокласи css3 - only-child і only-of-type.Псевдокласи css3 - only-child і only-of-type.
» » Псевдокласи css3 для перевірки полів - valid і invalid.