CSS псевдокласс :required
CSS псевдокласс :required позволяет выделять поля, обязательные к заполнению перед отправкой формы.
Правила написания CSS-псевдокласса :required
input:required { ... }
Пример применения псевдокласса :required
Проиллюстрируем работу псевдокласса :required на примере формы регистрации. В ней обязательным будет поле для ввода имени. Выделим его красной рамкой с помощью :required.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласс :require</title>
<style>
.comment div {
/* Отступ снизу */
margin-bottom: 5px;
}
.comment label {
/* Ширина текста */
width: 50px;
/* Выстраиваем по горизонтали */
float: left;
/* Поле справа */
padding-right: 10px;
}
input:required {
/* Красная рамка для обязательных полей */
border: 1px solid red;
}
</style>
</head>
<body>
<form class="comment">
<div>
<label>Имя</label>
<input name="user" type="text" required>
</div>
<div>
<label>E-mail</label>
<input name="email" type="email">
</div>
<div>
<input type="submit" value="Регистрирация">
</div>
</form>
</body>
</html>