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

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

• :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
• :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)
• :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
• :default: выбирает стандартный элемент на форме. Как правило, элементы по умолчанию
• :valid: выбирает элемент, если его значение проходит валидацию HTML5
• :invalid: выбирает элемент, если его значение не проходит валидацию
• :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)
• :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне
• :required: выбирает элемент, если у него установлен атрибут required
• :optional: выбирает элемент, если у него не установлен атрибут required

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

 
<style>
:enabled {
border: 2px black solid;
color: red;
}
</style>

<p><input type="text" value="Enabled" /></p>
<p><input type="text" disabled value="Disabled" /></p>

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

   
       
       <style>
       :checked + span {
       color: red;
       font-weight: bold; 	/* выделение жирным */
       }
       </style>
       
       <h4>Выберите пункт из списка</h4>
       <p>
       <input type="checkbox" checked name="html5"/>HTML5
       </p>
       <p>
       <input type="checkbox" name="dotnet"/>.NET
       </p>
       <p>
       <input type="checkbox" name="java"/>Java
       </p>
       
       <h4>Укажите пол
       <p>
       <input type="radio" value="man" checked name="gender"/>мужской
       </p>
       <p>
       <input type="radio" value="woman" name="gender"/>женский
       </p>
     

Выберите пункт из списка

HTML5

.NET

Java

Укажите пол

мужской

женский

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

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

       <style>
       :default {
       border: 2px solid red;
       }
       </style>
     
       <form>
       <input name="login"/>
       <input type="submit" value="Войти" />
       </form>
       

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

         <style>
       input:invalid {
       border: 2px solid red;
       }
       input:valid {
       border: 2px solid green;
       }
       </style>
       
       
       <form>
       <p><input type="text" name="login" placeholder="Введите логин" required /></p>
       <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
       <input type="submit" value="Войти" />
       </form>
       

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

Диапозон выбран у элемента <input type="number" >.
В нашем случае min=1 max=100:

       <style>
       :in-range {
       border: 2px solid green;
       }
       :out-of-range {
       border: 2px solid red;
       }
       </style>
       
       
       <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>
       

Ваш возраст:

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

<style>
:optional {
border: 2px solid blue;
}
:required {
border: 2px solid red;
}
</style>
</head>


<p>
<label for="login">Логин:</label> 
<input type="text" id="login" name="login" required />
</p>
<p>
<label for="password">Пароль: 
<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>
       

Логин:

Пароль:

Имя: