Красивая форма с использованием HTML5 и CSS3
5-07-2010Стандартные формы обычно выглядят не очень, если не использовать 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. Это позволит нам более легко стилизавать форму. В итоге должно получиться следующее:
А вот его разметка, с которой мы будем дальше работать:
<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;
}
Вот и все. Форма будет выглядеть одинаково не во всех браузерах так не все браузеры поддерживают все своиства которые мы здесь использовали.
