Формы

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Формы применяются для опроса посетителей, отправки электронной почты и т.д.

Формы размещаются между тегами <form> и </form>

<form method="get" action="url">

action="url" - обработчик формы

method="get" или method="post" - определяет, каким образом данные из формы будут переданы обработчику.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы input.

<input type="text" name="a" size="30"> Поле для ввода данных

<input type="radio" name="help" value="Радиокнопка"> Радиокнопка

<input type="checkbox" name="help" value="A"> Флажок

<input type="password" name="pass" size="20"> Пароль

<input type="file" name="attach" size="30"> Поле для отправки файла

<input type="hidden" name="help" value="url"> Cкрытый элемент

<input type="submit" value="Отправить"> Кнопка отправки данных

<input type="image" title="Начать поиск" src="images/search.gif"> Рисунок вместо кнопки

<input type="reset" value="Очистить"> Кнопка очистки формы

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста.

<textarea rows="4" cols="40" name="text"> текст </textarea>

Параметр rows - высота текстового поля

Параметр cols - ширина текстового поля

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором

Тег <option> определяет отдельные пункты списка, создаваемого с помощью контейнера <select>.

<select name=browser>
<option selected>Ваш браузер</option>
<option value=t1>Internet Explorer</option>         Раскрывающийся список
<option value=t2>Firefox </option>
<option value=t3>Opera</option>
<option value=t4>Другой</option>
</select>

Пример

Форма для отправки писем на хостинге НАРОД.РУ

<form enctype="multipart/form-data" action= "http://narod.yandex.ru/send-poll.xhtml"  method="post">
 <fieldset>
 <legend>Сообщение на e-Mail</legend>
 <p>
 <input type="text" name="a[от: ]" class="text">
 <label class="formname">Имя</label>
 </p>
 <p>
 <input type="text" name="a[город: ]" class="text">
 <label class="formname">Город</label>
 </p>
 <p>
 <input type="text" name="a[e-mail: ]" class="text">
 <label class="formname">е-mail</label>
 </p>
 <p>
 <input type="file" name="attach" class="attachfile">
 </p>
 <label class="formmes">Сообщение</label>
 <br>
 <textarea rows="4" cols="40" name="a[текст: ]">
 </textarea>
 <p>
 <input type="submit" value="Отправить" class="formbutton">
 </p>
 <input type="hidden" name="email" value="ваша-почта@narod.ru">
 <input type="hidden" name="title" value="Сообщение со страницы">
 <input type="hidden" name="login" value="ваш-логин">
 <input type="hidden" name="backlink" value="http://ваш-сайт.narod.ru/index.html">  
 <input type="hidden" name="backtext" value="На главную страницу">
 <input type="hidden" name="separator" value="">
 <input type="hidden" name="mess" value="">
 <input type="hidden" name="yourans" value="Ваш ответ:">
 <input type="hidden" name="vari" value="4">
 <input type="hidden" name="forceforward" value="Да">
 </fieldset>
 </form>

Для того, чтобы форма для отправки писем работала на Вашем сайте, необходимо из своей мастерской пройти по ссылке "анкета" заполнить ее, отправить с ее помощью сообщение. На почтовый ящик, указанный в анкете придет письмо от Яндекса с просьбой подтвердить пересылку писем. Подтвердите пересылку. В форме надо вписать свой e-mail и указать адрес страницы, куда после отправки сообщения произойдет перенаправление посетителя Вашего сайта. Укажите свой логин, редиректную страницу и вместо "Сообщение со страницы" укажите нужный Вам текст, это будет темой письма, которую Вы будете видеть при получении писем.

В форму можно добавлять или убирать ненужные Вам поля для ввода данных, но здесь уже придется все делать самому, так как предусмотреть все нюансы невозможно, это лишь шаблон формы, который Вы можете подстраивать под свои нужды. Удачи!

fieldset {
padding: 0 1em 1em 1em;
border: double 3px #329C6B;
width: 350px;
}
legend {
padding: 1em;
font:18px Verdana;color: #64A46D;
font-weight:900;
}
.formbutton {
cursor:pointer;
font:14px Verdana;color: #64A46D;
font-weight:900;
background-color:#F1F8F2;
border:solid 1px #329C6B;
}
.text{
width: 130px;
border:solid 1px #329C6B;
background-color:#fff;
margin: 0 0 1px 0;
}
.attachfile{
width: 130px;
border:solid 1px #329C6B;
background-color:#fff;
}
.formname{
font:15px Verdana;color: #88B98F;
margin: 0 0 0 30px;
font-weight:900;
vertical-align:top;
}
.formmes{
font:18px Verdana;color: #88B98F;
font-weight:900;
}
.formfile{
width: 170px;
font:14px Verdana;color: #88B98F;
font-weight:900;
vertical-align:top;
}
textarea {
width: 90%;
border:solid 1px #329C6B;
font:12px Verdana;color: #88B98F;
background-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#fff;
scrollbar-highlight-color: #fff;
scrollbar-face-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
scrollbar-track-color: #fff;
}

Это лишь один из множества возможных вариантов оформления формы для отправки сообщений на e-mail. Изучив CSS Вы сможете оформить свою форму для контактов с посетителями, так как Вам захочется. Удачи!