Уникальное место! Здесь можно легко заработать реальные деньги.
К вашим услугам несколько методов заработка!
Просматривайте сайты, читайте письма рекламодателей, выполняйте несложные и интересные тесты и задания за вознаграждение.
Вы сможете получить свои первые деньги уже сразу после начала работы.
Кликайте по баннеру ниже и начинайте работать!

SEO sprint - Всё для максимальной раскрутки!

Главная » Все материалы сайта » Справочник CSS-3 » Псевдоклассы

:required | Псевдокласс CSS

Псевдокласс :required

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
	8.0+	9.5+	5.0+	4.0+	2.1+	3.0+

Краткая информация

Применяется	К <input>
Ссылка на спецификацию	http://www.w3.org/TR/css3-ui/#pseudo-required-value

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.

По иному: Псевдокласс :required устанавливает стиль для поля ввода, если оно обязательно к заполнению.Такое поле может быть модифицировано и получить фокус, оформляется значениями свойств. Псевдокласс применим к элементам управления, создан в версии CSS3 и проходит валидацию согласно версии CSS3.

Синтаксис

input:required { ... }

Значения

Нет.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Псевдокласс :required</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>&nbsp;</label><input type="submit" id="send" value="Отправить"></p>
 </form>
 </body>
</html>

В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счет применения псевдокласса :required. Результат примера показан ниже.

Результат примера. Использование псевдокласса :required

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :required</title>
<style type="text/css">
<!--
:required{
outline: 2px solid grey;
opacity:0.5;
margin-bottom:5px;
}
:optional{
outline: 3px double red;
background-color:#252525;
color:white;
margin:5px;
}
-->
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<div>
<label>Ваша фамилия</label>
<input type="text"  required="required">
</div>
<div>
<label>Ваше имя</label>
<input type="text" >
</div>
<div>
<label>Ваш пароль</label>
<input type="password">
</div>
<div>
<label>Ваше сообщение</label><br>
<textarea rows="2" cols="30"></textarea>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>

Результат примера 2.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (08.07.2013)

Просмотров: 618 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]