Псевдоклассы форм

Оцените материал
(0 голосов)

В прошлом уроке мы рассмотрели псевдоклассы дочерних элементов. В этом уроке разберем псевдоклассы форм.

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него не установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
                border: 2px black solid;
                color: red;
            }
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>

Просмотреть  пример

Псевдокласс checked

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
                color: red;
                font-weight: bold;  /* выделение жирным */
            }
        </style>
    </head>
    <body>
            <h2>Выберите технологию</h2>
            <p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
             
            <h2>Укажите пол</h2>
            <p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Просмотреть  пример

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

Псевдокласс default

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Просмотреть  пример

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
                border: 2px solid red;
            }
            input:valid {
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Просмотреть  пример

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в определенный диапазон. Это в первую очередь относится к элементу <input type="number" >.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
                border: 2px solid green;
            }
            :out-of-range {
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <p>
                <label for="age">Ваш возраст:</label>
                <input type="number" min="1" max="100" value="10" id="age" name="age"/>
            </p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Просмотреть  пример

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
                border: 2px solid blue;
            }
            :required {
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <p>
                <label for="login">Логин:</label>
                <input type="text" id="login" name="login" required />
            </p>
            <p>
                <label for="password">Пароль:</label>
                <input type="password" id="password" name="password" required />
            </p>
            <p>
                <label for="name">Имя:</label>
                <input type="text" id="name" name="name"/>
            </p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>

Просмотреть  пример

Прочитано 875 раз Последнее изменение Четверг, 30 июня 2016 14:58
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+