:checked :disabled и псевдоклассы состояния формы
Оформляйте элементы формы в зависимости от их интерактивного состояния: отмечены, отключены или обязательны.
«:checked :disabled и псевдоклассы состояния формы» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Обзор псевдоклассов состояний формы
CSS предоставляет псевдоклассы, отражающие состояния элементов форм HTML. Они позволяют стилизовать элементы управления формами только с помощью CSS, без JavaScript.
:checked
:checked применяется к флажкам и переключателям, когда они выбраны, а также к элементам <option> внутри списков выбора, когда они выбраны.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked для пользовательских флажков
Приём с :checked: скройте стандартное поле ввода и стилизуйте пользовательский флажок с помощью селектора соседнего элемента, активируемого через :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled и :enabled
:disabled выбирает элементы формы с атрибутом disabled. :enabled выбирает элементы, с которыми можно взаимодействовать.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required и :optional
:required выбирает поля ввода с атрибутом required. :optional выбирает поля ввода без него.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid и :invalid
:valid и :invalid отражают состояние встроенной браузерной проверки формы на основе типа, шаблона, минимального и максимального значений, а также обязательности поля.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid и :user-invalid
Браузер запускает проверку сразу при загрузке страницы, ещё до взаимодействия с пользователем. :user-valid и :user-invalid применяются только после взаимодействия пользователя с полем — это значительно улучшает удобство использования.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown применяется, когда поле ввода отображает текст-заполнитель, то есть поле сейчас пусто. Используйте его, чтобы определять пустые поля без JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only и :read-write
:read-only выбирает поля ввода с атрибутом readonly. :read-write выбирает редактируемые поля ввода.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate применяется к флажкам в промежуточном состоянии (ни выбраны, ни сняты — состояние задаётся с помощью JavaScript), а также к переключателям, если в группе ещё ничего не выбрано.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range и :out-of-range
Для полей ввода type="number" или type="range" с минимальным и максимальным значениями :in-range и :out-of-range отражают действительность текущего значения относительно этих границ.
<input type="number" min="1" max="10" value="15" />
Быстрая проверка
Какой псевдокласс применяет стили проверки формы только после взаимодействия пользователя с полем ввода?
Повторение
Псевдоклассы состояний форм CSS отражают встроенную проверку форм и состояние взаимодействия без JavaScript: :checked, :disabled, :required, :valid, :invalid и другие. Для удобства использования предпочитайте :user-invalid вместо :invalid. Используйте :placeholder-shown, чтобы определять пустые поля.
Часто задаваемые вопросы
Урок «:checked :disabled и псевдоклассы состояния формы» бесплатный?
Да — полный текст урока «:checked :disabled и псевдоклассы состояния формы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «:checked :disabled и псевдоклассы состояния формы»?
Оформляйте элементы формы в зависимости от их интерактивного состояния: отмечены, отключены или обязательны. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «:checked :disabled и псевдоклассы состояния формы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- :hover :focus :active и :visited
- :nth-child и :nth-of-type
- :not() :is() и :where()
- :checked :disabled и псевдоклассы состояния формы