Я предполагаю, что вы создадите дополнительный HTML-файл. В любом случае, я сохраняю его под именем kontakt.html. Kontakt.html находится на том же уровне, что и уже известный вам index.html.
В этой первой части базовые настройки формы делаются. Вещи, такие как скругленные углы, градиенты и т. д., будут добавлены в следующем уроке.
Внутри kontakt.html вы создаете форму. Форма определяется внутри области div с классом content. Затем обдумайте, какие поля вы хотите создать. Я решил запросить следующую информацию:
• Имя
• Адрес электронной почты
• Комментарий
Естественно, вам самим нужно решить, какую информацию вы хотите получить. Однако в целом я рекомендую запрашивать только фактически необходимые данные. Большинство посетителей веб-сайтов избегают обширных форм. Так что делайте это коротко.
Основная структура моей формы выглядит так:
<div class="content">
<formclass="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 вам также уже встречался в рамках этой серии. Через этот элемент 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".
