Начинаем с кнопки отправки. Текущий CSS-стандарт должен выглядеть следующим образом:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Этот синтаксис приведет к следующему результату:
Это обычная кнопка. Она выглядит довольно скучно, но вполне выполняет свою функцию. Тем не менее, ее нужно немного украсить. Конечный результат будет выглядеть так:
Также добавлен эффект при наведении курсора. Кнопка изменит свой цвет, когда на нее наведется указатель мыши.
Если вы внимательно посмотрите на кнопку, вы заметите скругленные углы. Вероятно, это одно из нововведений CSS, которое веб-дизайнеры долго ждали. Ведь раньше такой возможности не было (за исключением, конечно, элементов button, где можно было работать с изображениями).
Теперь скругленные углы можно применять не только к обычным элементам веб-страниц, но и к кнопкам.
В черновике CSS3 для этого существует свойство border-radius. Браузеры Mozilla и WebKit предлагают альтернативные способы поддержки этого свойства для экспериментов.
• -moz-border-radius
• -webkit-border-radius
В настоящее время все современные браузеры поддерживают скругленные углы.
Основываясь на этом, определение border-radius может выглядеть следующим образом:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Также при более внимательном рассмотрении вы заметите, что кнопке был назначен градиент цвета.
Такой эффект теперь можно реализовать с помощью CSS. Для этого используются различные свойства gradient. Значения присваиваются свойству background. В настоящее время существует множество инструментов, с помощью которых можно создавать градиенты цвета.
Один из них можно найти, например, на сайте http://www.css3factory.com/linear-gradients/. В следующем синтаксисе определен градиент цвета и известные скругленные углы.
В текущем примере синтаксис кнопки будет следующим:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Я уже намекнул, что кнопки должны реагировать на наведение указателя мыши. Для этого используется известное :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Кнопка также будет реагировать на другое событие. Для этого используется псевдокласс :active. Это позволяет реагировать на нажатие кнопки.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
В текущем примере при нажатии кнопки изменяются цвет верхней границы и фон кнопки.
Скругленные углы для полей
Такие скругленные углы, разумеется, можно применить не только к кнопке, но и к полям ввода. Результат может выглядеть следующим образом:
А вот соответствующий синтаксис:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Вы уже знаете необходимые свойства для определения таких скругленных углов.
Проверка формы с помощью CSS3
В настоящее время посетители могут вводить в поля ввода все, что им угодно. Проверка введенных значений не выполняется. Это должно измениться. Поля будут проверяться по следующим критериям:
• Поле Имя должно быть заполнено.
• Поле Электронной почты должно содержать синтаксически корректный адрес электронной почты.
• Многострочное поле также должно быть заполнено.
Только после выполнения этих критериев можно действительно отправить форму.
Чтобы обозначить поле как обязательное для заполнения, ему присваивается атрибут required. Поле, отмеченное таким образом, должно быть заполнено, то есть не может быть пустым.
Соответствующее приложение будет выглядеть следующим образом:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Здесь браузер проверяет, было ли поле заполнено. Если поле пусто, но все же пытаются отправить форму, браузер должен выдать сообщение об ошибке.
Кстати, еще дальше дело идет с полем электронной почты. Это поле назначается как type="email" и имеет атрибут required. Теперь в поле нужно ввести не просто значение, а действительный адрес электронной почты, в противном случае также будет сообщение об ошибке при отправке формы.
Таким образом, форма может выглядеть примерно так:
<ol>
<li>
<label for="name">Имя:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">Адрес электронной почты:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Комментарий:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Отправить" />
</li>
</ol>
Особенно в случае более обширных форм может быть, что есть обязательные поля, но также поля, которые не обязательно заполнять. В таких случаях вы можете выделить обязательные поля особым образом. Доступ к обязательным полям осуществляется в CSS через :required.
:required {
background-color: #ff0000;
}Таким образом, обязательные поля будут иметь красный фон.
Другой вариант представления обязательных полей - следующий синтаксис:
input:required:focus {
border: 1px solid red;
outline: none;
}
При попытке отправить форму первое поле получает красную рамку и фокус, если оно не было заполнено или не удовлетворяет условиям проверки.
Когда пользователь правильно заполнит это поле, а другое поле останется пустым, оно также будет сфокусировано и будет иметь красную рамку при следующей попытке отправки формы.
