Я припускаю, що ви створюєте додатковий HTML-файл. Я, принаймні, зберігаю його під ім'ям kontakt.html. Файл kontakt.html знаходиться на тому ж рівні, що і вже вам відомий файл index.html.
У цій першій частині виконуються основні налаштування форми. Речі, такі як круглі кути, градієнти тощо, будуть розглянуті в наступному посібнику.
У файлі kontakt.html створюється форма. Форма визначається всередині області div з класом content. Потім подумайте, які поля вам потрібно створити. Я вирішив отримати наступну інформацію:
• Ім'я
• Адреса електронної пошти
• Коментар
Звісно, вам потрібно вирішити, яку інформацію ви хочете отримати. Принципово я раджу отримувати лише фактично необхідні дані. Більшість відвідувачів веб-сайтів уникають обширних форм. Тому тримайте це коротким.
Основна структура моєї форми виглядає наступним чином:
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Зв'язок з нами</legend>
<ol>
<li>
<label for="name">Ім'я:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Адреса електронної пошти:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comment">Коментар:</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Надіслати" />
</li>
</ol>
</fieldset>
</form>
</div>Форма на початку не містить ніяких особливостей. Навколо формних полів використовується визначення fieldset. Як створити формні поля та що означають елементи label вже було достатньо описано. Тому тут повна концентрація має бути приділена оформленню форми.
Якщо ви відкриєте результат у браузері, ви побачите, що форма ще не дуже приваблива.
Тут, звісно ж, є куди поліпшити.
Спершу робляться загальні вказівки для форми.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Тут визначені зовнішні й внутрішні відступи. Крім того, для форми встановлена ширина 550 пікселів.
Потім йдемо до оформлення fieldset.
fieldset {
padding: 10px 20px 25px;
}
Тут також визначені відступи.
Самі формні поля розміщені всередині впорядкованого списка ol.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Для того щоб цей список не виглядав як список, використовується list-style-type: none;. Крім того, встановлюються відступи з усіх сторін на 0.
У наступному кроці визначаються елементи списку. Вони вирівнюються зліва та мають внутрішній відступ у 10 пікселів.
li {
float: left;
padding: 10px;
}
Є ще одна особливість щодо кнопки, яка розташована під формою. Вона має бути вирівняна праворуч.
li.button {
float: none;
clear: both;
text-align: right;
}Заголовок форми
Тепер ми звертаємось до елементу legend. Це визначає заголовок форми.
Визначення для заголовка виглядає наступним чином:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Підписи
Елемент label вже зустрічався вам у цьому ряду. З його допомогою можна установити логічний зв'язок між описом поля та самим полем форми. Щодо визначення CSS тут є особливість.
label {
display: block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Я додаю до елементу label, серед іншого, вказівку cursor. Цим відвідувачам сигналізується, що описи полів можна клацати. Якщо вони дійсно клікають на опис поля, курсор автоматично переміщується до відповідного поля.
Оформлення полів форми
У наступному кроці розглядається оформлення саміх полів форми. Спочатку надаються загальні вказівки для input та textarea.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Тут йдеться виключно про стильові речі. Особлива увага повинна бути звернута на рамки. Як тільки курсор ставлять в поле, змінюється колір рамки. Це не лише аспект естетики. Фактично це також допомагає відвідувачам при заповненні форми. Так вони завжди знають, в якому полі знаходиться курсор.
Тепер іде кілька вказівок щодо поля введення багаторядкового тексту.
textarea {
width: 430px;
overflow: auto;
}
Ширина цього поля встановлена на 430 пікселів. Можливо, на перший погляд дивно виглядає інструкція overflow: auto у відношенні до багаторядкових полів введення. Цей рядок виник завдяки старій версії Internet Explorer. Фактично цей браузер показував панелі прокрутки в багаторядкових полях введення, навіть якщо це не було необхідно. За допомогою overflow: auto можна уникнути цю проблему краси.
Зміна кнопки для відправлення
Зараз кнопка відправлення виглядає досить скромно. Це зміниться. Результат буде таким:
На кнопці вказані різні властивості.
• Колір фону
• Вигляд шрифту
• Рамка
• Відступи
Супутній синтаксис CSS виглядає наступним чином:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Тут можливо варто відзначити вказівку input[type="submit"]. Завдяки цьому селектору ми звертаємося до елементів input, які мають комбінацію атрибуту-значення type="submit".
