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

5-07-2010

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

final-form

HTML

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

alpha-form

А вот его разметка, с которой мы будем дальше работать:

  <form id=payment>
  <fieldset>
	  <legend>Your details</legend>
	  <ol>
		  <li>
			  <label for=name>Name</label>
			  <input id=name name=name type=text placeholder="First and last name" required autofocus>
		  </li>
		  <li>
			  <label for=email>Email</label>
			  <input id=email name=email type=email placeholder="example@domain.com" required>
		  </li>
		  <li>
			  <label for=phone>Phone</label>
			  <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
		  </li>
	  </ol>
  </fieldset>
  <fieldset>
	  <legend>Delivery address</legend>
	  <ol>
		  <li>
			  <label for=address>Address</label>
			  <textarea id=address name=address rows=5 required></textarea>
		  </li>
		  <li>
			  <label for=postcode>Post code</label>
			  <input id=postcode name=postcode type=text required>
		  </li>
		  <li>
			  <label for=country>Country</label>
			  <input id=country name=country type=text required>
		  </li>
	  </ol>
  </fieldset>
  <fieldset>
	  <legend>Card details</legend>
	  <ol>
			  <li>
			  <fieldset>
				  <legend>Card type</legend>
				  <ol>
					  <li>
						  <input id=visa name=cardtype type=radio>
						  <label for=visa>VISA</label>
					  </li>
					  <li>
						  <input id=amex name=cardtype type=radio>
						  <label for=amex>AmEx</label>
					  </li>
					  <li>
						  <input id=mastercard name=cardtype type=radio>
						  <label for=mastercard>Mastercard</label>
					  </li>
				  </ol>
			  </fieldset>
		  </li>
		  <li>
			  <label for=cardnumber>Card number</label>
			  <input id=cardnumber name=cardnumber type=number required>
		  </li>
		  <li>
			  <label for=secure>Security code</label>
			  <input id=secure name=secure type=number required>
		  </li>
		  <li>
			  <label for=namecard>Name on card</label>
			  <input id=namecard name=namecard type=text placeholder="Exact name as on the card" required>
		  </li>
	  </ol>
  </fieldset>
  <fieldset>
	<button type=submit>Buy it!</button>
  </fieldset>
  </form>

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;
	}

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

Пётр7.5.2010 02:07
Мне кажется, что слишком громоздкое меню будет. Надо все поуже сделать. А так ничего, нормуль.
Pepper7.5.2010 05:07
Я как-то про HTML5 и CSS3 даже не думаю, хоть вебсайтам я посвящаю 99% своего времени. Года через 2-3 можно будет про этого говорить всерьез, а пока это из области фантастики в плане поддержки браузерами. Если бы кто-то написал вирус, который уничтожил бы все копии IE по всему миру и сжег все сервера Мелкофта - вот это был бы шаг в будушее. А так как обычно: одна версия сайта для нормальных людей и еще 200% кода для тех, кто пользуется IE.
    admin7.5.2010 05:07
    так если не использовать новшества на новые браузеры никто и не перейдет... а зачем? если никто не будет использовать HTML5 и CSS3 сегодня то и завтра и в следующем году никто не будет... и новые браузеры не нужны.. и вообще кто из нормальных людей IE пользуется? :) я свой сайт для нормальных делаю)
Mak7.8.2010 05:07
Очёнь клёва! Особенно кнопка понравилась. Но всё таки фокусированные поля серым наверное делать не стоит. Лучше бордер к ним применять какого-нибудь яркого цвета. В нашем случае я думаю, что синий отлично бы смотрелся. То что вы используете новшества это конечно громадный плюс. Иначе бы мы все до сих пор на лошадях ездили и жили бы в хижинах. И вообще пора плюнуть на IE6, да и 7 тоже, и делать всё современно.
lukmus12.18.2010 04:12
форма красивая действительно и я поддерживаю мнение, что если будет много сайтов на HTML5 не пиленных под IE, то люди наконец одумаются и забросят осла подальше. Но пишу я тут этот коммент потому как меня поразила безграмотность, ладно вы не видите опечаток и ошибок в тексте поста т.к. там текста много и не всегда их можно заметить, но как можно было написать Twetter и следом поставить ссылку на это слово - _http://twitter.com/axel_ru, я в восторге )))
    admin12.18.2010 08:12
    Вот епт)))) спасибоооо)) что заметил))
Andrey1.11.2011 08:01
А как же SELECT ? почему нет примера? С ним гораздо все унылей, особенно в Опере
    admin1.11.2011 09:01
    скоро будет статья про селекты, очень скоро
      Andrey1.12.2011 06:01
      очень просим, очень! Я уже запарился со списком - эти уголки в Опере ну просто жизни не дают и сон пропал.. ))
    admin1.15.2011 08:01
    А вот и пост, может поможет http://prootime.ru/select-css
Дима8.1.2011 09:08
А по-моему, форма не красивая
Илья8.25.2011 10:08
Посмотрел этот пример в IE 7 - даже без CSS3 форма выглядит достойно) автору большое спасибо за статью!
artemeff9.5.2011 10:09
Зачем прописывать имена тэгов в css? Это замедляет работу компиляции стилей в браузере, ибо он сначала ищет все элементы form, а подом выбирает из них нужный с заданным айдишником. Если бы писали так в JS, вас бы покарали. И да, выглядит оно ужасно, без обид.
    dzantiev9.5.2011 06:09
    насчет имен тегов ты прав, но это было сделанно просто для наглядности чтобы понятней было, а на счет красоты кому как мне нравится, не супер конечно, но сойдет.
Вадимка радиоман9.25.2011 05:09
а можно форму минимизировать? т.е сделать поменьше на более маленький участок на странице? Это в CSS надо делать? )
    dzantiev9.25.2011 06:09
    Ну смотря что и как минимизировать.
      Вадимка радиоман2.3.2012 06:02
      Минимизировать до 240*360px блока. Спасибо!
Alex10.7.2011 12:10
Круто ... мне очень нарваться!!! спасибо
Коко11.17.2011 05:11
Цвет наверно специальная разработка для гомиков. Ужас прямо! Голубой!
Коко11.17.2011 05:11
Мда, оттуда спиздили 24ways.org/2009/have-a-field-day-with-html5-forms
    dzantiev11.17.2011 05:11
    я бы сказал перевел=))) ну можно и спиздил сказать=))))
Сергей12.2.2011 06:12
Спасибо! Классная форма.
Тимур2.28.2012 07:02
Камрад, не сочти за оскорбление, но заморочься с грамотным русским в статьях. Я про запятые, дефисы и прочую пунктуацию. Пишешь интересное, а читать тяжело. "Недодрочено", как говорится. =)))
louis vutiton11.26.2012 03:11
Informative Site?Hello guys here are some links that contains data that you may discover beneficial yourselves. It's Worth Checking out? louis vutiton http://daocrot127.skyrock.com/3123026655-henryg-dance-toms-sneakers-are-known-to-deliver-alluring-models-in-the.html
Tapo4ek3.29.2013 01:03
А можно такую же статейку про вашу форму добавления комментариев. С появляющейся при наведении кнопочкой :)
ОСТАВИТЬ КОММЕНТАРИЙ