Красивая форма с использованием HTML5 и CSS3

Стандартные формы обычно выглядят не очень, если не использовать CSS. Сейчас попробуем сделать форму использую новые технологии то есть HTML5 и CSS3. Обещаю вам что прочитав эту статью вы захотите украсить свои формы комментариев там или еще че нить че у вас не украшено, форму поиска например.
Вот то что мы получим в итоге:

HTML

Как видно на картинке будем делать форму для оплаты какового нибудь товара.Начнем с html разметки. Форма будет разделена на три логические секции это:
1. Личная инфомация о покупателе
2. Адрес покупателя
3. Информация о кредитной карточке
Как я уже говорил будем использовать нововведения HTML5, в данном случае будем использовать новые атрибуты для input’ов для создания более удобной формы и как меньшего использования классов и идентификаторов.:
1. email – для поля email’а
2. tel – для поля телефона
3. number – для поля кредитной карточки и капчи
4. required – для обязательных полей
5. autofocus – для автоматического фокуса после загрузки страницы
В HTML5 ввели большое число новых атрибутов для input’ов и для форм в целом, можете посмотреть их зедсь
Каждая секция будет находится в отдельном fieldset‘е. Также используем упорядоченный список для группировки всех пар label/input. Это позволит нам более легко стилизавать форму. В итоге должно получиться следующее:

Your details


  Name

  

  Email

  

  Phone

  



Delivery address


  Address
  
  

  Post code

  

  Country

  



Card details



Card type



  VISA
  


  AmEx
  


  Mastercard
  




  Card number

  

  Security code

  

  Name on card

  



  Buy it!
  

CSS

Перед началом стилизации нашей формы нужно сбросить некоторые стили что бы все браузеры открывали одинаково:

html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
	}

body {
	background: #ffffff;
	color: #111111;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 20px;
	}

Далее будем стилизовать элементы формы которые находятся вне секций fildset

form#payment {
	background: #9cbc2c;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 400px;
	}

Теперь уберем границы с fieldset‘ов и добавим снизу небольшой отступ. Используя псевдо класс :last-of-type уберем отступ с последнего fieldset‘а.

form#payment fieldset {
	border: none;
	margin-bottom: 10px;
	}

form#payment fieldset:last-of-type {
	margin-bottom: 0;
	}

Следующее что мы сделаем это стилизуем наши legend‘ы седлаем их жирными и применим к ним светло синий text-shadow :

form#payment legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #C1F7FF;
	}

Наши legend выглядят так скажем нормально, но как к ним добавить индикаторы того сколько шагов имеет наша форма? Вместо того чтобы вручную добавлять шаг к каждому legend мы можем использовать автоматически генерирующийся контент.
Чтобы добавить счетчик к элементу, мы должны использовать или :before или :after. Будем следовать следующим шагам:
1. Создадим счетчик использую свойство counter-reset для элемента form
2. Вызываем счетчик со свойством content
3. С помощью свойства counter-increment увеличиваем счетчик на 1

form#payment > fieldset > legend:before {
	content: "Шаг " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}

Сейчас нам нужно изменить стили legend которая является частью radio группы, сделаем его похожим на label:

form#payment > fieldset > legend:before {
	content: "Шаг " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}

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

form#payment ol li {
	background: #71b8ff;
	background: rgba(255,255,255,.3);
	border-color: #c6e3ff;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	}

form#payment ol ol li {
	background: none;
	border: none;
	float: left;
	}

Осталось стилизовать элементы label, input и button
Все label должны выглядеть одинаково, кроме label‘а который прописан для элементов radio. Выравняем их по левому краю и придадим ширину.
Для кнопок выбора кредитной карточки добавим иконки как фон. Для большей удобности формы добавим добавим cursor:pinter для рабио баттоонов при наведении мышки :hover то есть при наведении на радио кнопке курсор будет меняться на руку.

form#payment label {
	float: left;
	font-size: 13px;
	width: 110px;
	}

form#payment fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
	}

form#payment label[for=visa] {
	background-image: url(visa.gif);
	}
form#payment label[for=amex] {
	background-image: url(amex.gif);
	}
form#payment label[for=mastercard] {
	background-image: url(mastercard.gif);
	}

form#payment fieldset fieldset label:hover {
	cursor: pointer;
	}

Теперь стилизуем все input кроме инпутов типа radio для этого используем псевдо класс исключения :not(). С его помощью мы можем прописать стили для всех инпутов и исключить инпуты типа radio.

form#payment input:not([type=radio]),
form#payment textarea {
	background: #ffffff;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	outline: none;
	padding: 5px;
	width: 200px;
	}

form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
	background: #eaeaea;
	}

form#payment input[type=radio] {
	float: left;
	margin-right: 5px;
	}

Осталось поменять button. Добавим к его тексту тень, и сделаем какой нить эффект при наведении.

form#payment button {
	background: #62C5FF;
	border: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
	color: #ffffff;
	display: block;
	font: 18px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
	text-shadow: 0 1px 1px #C1F7FF;
	text-transform: uppercase;
	}

form#payment button:hover {
	background: #8BE0FF;
	cursor: pointer;
	}

Вот и все. Форма будет выглядеть одинаково не во всех браузерах так не все браузеры поддерживают все своиства которые мы здесь использовали.