Стиль контактної форми CSS

59

Всім доброго дня чи ночі, це вже кого як вставило.

Сьогодні, ми разом з вами, шановні читачі, розглянемо спосіб створення контактної форми для сайту. Звичайно, цього добра валом навалено, на будь-який смак і колір, варто лише не полінуватися і гарненько пошукати, але мене насамперед цікавить сам процес, нові і цікаві рішення.

Контактна форма є невід’ємною частиною практично будь-якого веб-сайту, будь то маленький бложок нагадує міжсобойчик, або ж наворочений різними прибамбасами, монстроподобный інтернет — ресурс типу Яші.
Нічого радикального не пропоную, всього лише ще один варіант оформлення контактної форми. Ґрунтуючись на ідеях буржуинского веб-дизайнера Олена Гракалика, я постарався розкласти по поличках механізм побудови форми, простий у виконанні, і в той же час має цілком пристойний вигляд.

HTML-Розмітка

В розмітці використаний елемент FIELDSET для групування елементів всередині самої форми, це дуже корисно, коли присутній додатковий елемент, тобто можна об’єднати form і fildset для досягнення горизонтального розміщення додаткового об’єкта (у нашому випадку текстового поля), а так само розмістити всі елементи вертикально.

<form id="form1" action="/" method="post">
<fieldset>
<label for="name">Ім'я *</label>
<input id="name" name="name" size="30" type="text" />
<label for="email">Email *</label>
<input id="email" name="email" size="30" type="text" />
<label for="web">Вебсайт (не обов'язково)</label>
<input id="web" name="web" size="30" type="text" /></fieldset>
<fieldset>
<label for="message">Повідомлення:</label>
<textarea id="message" cols="30" rows="10" name="message"></textarea></fieldset>
<button>Надіслати</button>
</form>

Ім’я *
Email *
Вебсайт (не обов’язково)
Повідомлення:
Відправити

CSS

При оформленні зовнішнього вигляду форми через CSS, щоб домогтися коректного відображення у всіх браузерах, використовував метод оформлення блоків із застосуванням зображень для основного фону для кнопки «відправити». Ну, а за нестримної любові до нових функцій і технікам CSS3, не втримався і додав до оформлення полів вводу закруглені кути (border-radius), ІЕшка в цьому випадку нехай іде …оппу.

#form1 {
margin:1em 0;
padding-top:10px;
background:url(../images/form/form_top.gif) no-repeat 0 0;
}
#form1 fieldset {
margin:0;
padding:0;
border:none;
float:left;
display:inline;
width:260px;
margin-left:25px;
}
#form1 p {margin:.5em 0;}
#form1 label {display:block;}
#form1 input, #form1 textarea {
width:252px;
border:1px solid #ddd;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
background:#fff url(../images/form/form_input.gif) repeat-x;
padding:3px;
}
#form1 textarea {
height:125px;
overflow:auto;
}
#form1 p.submit {
clear:both;
background:url(../images/form/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
}
#form1 button {
width:150px;
height:37px;
line-height:37px;
border:none;
background:url(../images/form/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}

#form1 {
margin:1em 0;
padding-top:10px;
background:url(../images/form/form_top.gif) no-repeat 0 0;
}
#form1 fieldset {
margin:0;
padding:0;
border:none;
float:left;
display:inline;
width:260px;
margin-left:25px;
}
#form1 p {margin:.5em 0;}
#form1 label {display:block;}
#form1 input, #form1 textarea {
width:252px;
border:1px solid #ddd;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
background:#fff url(../images/form/form_input.gif) repeat-x;
padding:3px;
}
#form1 textarea {
height:125px;
overflow:auto;
}
#form1 p.submit {
clear:both;
background:url(../images/form/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
}
#form1 button {
width:150px;
height:37px;
line-height:37px;
border:none;
background:url(../images/form/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}

Ось і все, ваша контактна форма готова до використання. Існує безліч готових рішень в шаблонах HTML, в темах і плагінах для WordPress. Ця стаття лише приклад того, як можна самому швидко і просто створити або змінити існуючу форму контактів.

Джерело: http://grakalic.com/