Предполагам, че ще създадете допълнителен 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;. Също така рамките и отстъпа са нулирани.
След това са дефинирани елементите на списъка. Те се флоатират наляво и имат отстъп от 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 в контекста на многоредовите полета за въвеждане. Този ред е поради стари версии на Интернет Експлорър. Наистина, този браузър показваше ленти за превъртане в многоредовите полета за въвеждане, когато това не беше необходимо. Чрез 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".
