:required¶
Псевдокласс :required
применяет стилевые правила к элементу <input>
, у которого установлен атрибут required
, он позволяет выделять поля обязательные к заполнению перед отправкой формы.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
input:required {
/* ... */
}
Спецификации¶
Пример¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Комментарии</title>
<style>
#comment p {
margin: 0 0 5px; /* Отступ снизу */
}
#comment label {
width: 110px; /* Ширина текста */
float: left; /* Выстраиваем по горизонтали */
text-align: right; /* Текст по правому краю */
padding-right: 10px; /* Поле справа */
}
#comment input[type='text'],
#comment textarea {
width: 320px; /* Ширина текстовых полей */
}
input:required {
border: 1px solid red; /* Красная рамка для обязательных полей */
}
</style>
</head>
<body>
<form id="comment">
<p>
<label for="user">Имя</label>
<input id="user" type="text" required />
</p>
<p>
<label for="email">E-mail</label
><input id="email" type="text" />
</p>
<p>
<label for="text">Комментарий</label>
<textarea cols="40" rows="10" id="text"></textarea>
</p>
<p>
<label> </label
><input type="submit" id="send" value="Отправить" />
</p>
</form>
</body>
</html>
В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса :required
. Результат:
См. также¶
Ссылки¶
- Псевдо-класс :required MDN (рус.)