Создание стильной формы с применением HTML5 и CSS3
Все современные браузеры уже давно поддерживают HTML5 и CSS3. Однако, почему-то, не все веб-дизайнеры внедряют новые технологии. Зря, ведь, с ними создание красивых и интерактивных страниц становится намного проще. Ниже приведён пример создания красивой юзабельной формы с использованием современных технологий, написанный веб-дизайнером Inayaili de León для 24ways.org.
Вот что должно в результате получиться:
Форма с применением HTML5 и CSS3
Это форма платежей для сервиса Chalwork. Это довольно-таки простая форма, но, согласитесь, очень эффектная. В данной веб-форме имеются 3 структурных компонента:
- расширенные данные о пользователе;
- данные о его адресе;
- данные о кредитной карте (о форме оплаты, которой желает воспользоваться пользователь).
Для создания этой формы используются новые, появившиеся в HTML5 типы ввода пользовательской информации:
- email — для поля электронной почты;
- tel — для поля телефона;
- number — для поля введения номера кредитной карты;
- required — для тех полей, которые обязательны для ввода;
- placeholder — для размещения подсказок пользователям в самих полях ввода;
- autofocus — для автофокуса — автоматического появления курсора в первом поле формы.
Это далеко не все типы полей ввода input, которые нам предлагает HTML5, ознакомьтесь со всеми возможными вариантами в официальной спецификации — узнайте что нового на сайте W3C.
Начало построения веб-формы
Сначала пишем html-код нашей формы. Каждый раздел формы будет помещён в собственный блок fieldset. Кроме того, каждое поле формы будет оформляться тегами label / input, как это, в общем-то и полагается делать. Затем ко всем элементам применим стили, чтобы всё выглядело современно и стильно.
Вот что у нас получится на начальном этапе:
Вид html-формы без применения css
Это форма без применения стилей. А вот код этой самой формы:
<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 оформления нашей страницы, на которой будет расположена форма:
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 20px;
}
А вот css-код стилей, применяемых к элементам формы:
background: #9cbc2c;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type {
margin-bottom: 0;
}
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment > fieldset > legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-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;
}
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;
}
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;
}
form#payment button {
background: #384313;
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 #000000;
text-transform: uppercase;
}
form#payment button:hover {
background: #1e2506;
cursor: pointer;
}
Существующие проблемы с отображением этой формы в разных браузерах. Как говорилось в самом начале, HTML5 и CSS3 поддерживают только современные браузеры. Поэтому, эта форма будет отображаться некорректно в таких браузерах, как IE6 и IE7. И ещё одно обстоятельство: Opera не поддерживает css-инструкций по скруглению углов — border-radius, поэтому все поля в Опере будут с прямыми углами.
Посмотрите, что у нас в результате получилось.
»Все современные браузеры уже давно
»поддерживают HTML5 и CSS3….
Нет не все. в опере 10 круглые уголки – квадратные, в ie 8 (вполне современный) вообще не похоже на то, что задумано. видать html 4.0/4.01 еще долго будет стандартом.
p.s.
-moz-border-radius, -webkit-border-radius и -khtml-border-radius— тоже самое, что filter и expression в IE. Это не стандарт, а браузеро-зависимые стили.лучше уж jQuery использовать – так оно надежнее