Flood

Популярные HTML формы

12 December, 2011

HTMLПожалуй, сейчас не найдешь ни одного веб-сайта, на котором не используются формы. Причем, чем сайт масштабней, тем и HTML форм у него больше. Не смотря на то, что видов этих самых форм хватает, да и предназначение у каждой свое, задача у них одна: сбор и последующая передача информации на обработку программному сценарию.

Решил сделать памятку по html формам, дабы всегда под рукой было.

Возьмем самые популярные, использующиеся при верстке, формы с использованием разных функций. Разберем на конкретных примерах. Приступим.

Пожалуй, любой сайт с юзерами имеет форму авторизации. Без излишеств, возьмем самую простую:

Логин:

Пароль:
Запомнить

<form name="loginform" method="get" action="login_data.php">
<input name="link" type="hidden" value="index.php" />
Логин: <br/>
<input name="login" type="text" size="30" maxlength="35" value="BarSug" /> <br/>
Пароль: <br/>
<input name="pd" type="password" size="30" maxlength="35" value="" /> <br/>
<input name="remember" type="checkbox" value="yes" /> Запомнить <br/>
<input type="submit" name="enter" value="Войти" />
</form>
<form>...</form> – собственно, открывают\закрывают форму;
name="" – определяет имя формы;
method="" – назначает способ отправки данных;
action="" – указывает линк, на который данные будут отправляться для обработки;
<input /> – определяют кнопки, чекбоксы, текстовые поля для ввода данных;
type="text" – назначает текстовое поле для ввода;
type="password" – похоже на type="text", но данные отображаются звездочками;
type="checkbox" – определяет переключатель, или, как в народе говорят, “чекбокс”;
type="submit" – назначает кнопку;
type="hidden" – скрытый элемент формы для передачи дополнительной инфы;
size="..." – длина текстового поля в символах;
maxlength="..." – максимальное количество тех самых символов;
value="" – значение, которое будет отправлено на обработку.

Посмотрим на самую простую форму комментирования, вот такую:


Имя


E-Mail

<form action="/comments.php" method="post" name="comments-form" id="comments-form">
<p><input type="text" name="author" id="author" value="" size="30" />
<small> Имя</small>
</p>
<p><input type="text" name="email" id="email" value="" size="30" />
<small> E-Mail</small>
</p>
<p><textarea name="comment" id="comment" cols="55" rows="5"> </textarea>
</p>
<p><input name="submit" type="submit" id="submit" value="Отправить" />
</p>
</form>
<code>id="" – назначает имя, идентификатор элемента формы;
<textarea>...</textarea> – указывает текстовое поле в составе формы;
cols="" – количество колонок текстового поля формы, проще говоря – ширину;
rows="" – количество рядов текстового поля формы. Высота.

Выпадающие списки часто используются для облегчения и функционального применения выбора чего-либо. В нашем случае, пусть это будет выбор страны:


<form action="/country.php" method="post" name="dropdownbox">
<select name="menu" size="1">
<option value="ua">Украина</option>
<option selected="selected" value="ru">Россия</option>
<option value="by">Белоруссия</option>
<option value="pl">Польша</option>
</select>
</form>
<select>...</select> – назначают список с позициями для выбора;
size="1" – количество видимых позиций списка. Должно быть 1, логично;
<option>...</option> – так обрамляются все пункты списка;
selected="selected" – выделяет пункт списка по умолчанию.

Достаточно изменить значение элемента size="" на количество пунктов (в нашем случае 4) и получим уже список с полосой прокрутки:


Если необходимо выбрать более чем один пункт в списке, предыдущие формы нам не подойдут. Для этого более выгодно использовать чекбоксы:

Украина

Россия

Белоруссия

Польша



<form name="travel" action="/country.php" method="get">
<input type="checkbox" name="ua" value="airplane" checked="checked" /> Украина<br/> 
<input type="checkbox" name="ru" value="train" /> Россия<br/> 
<input type="checkbox" name="by" value="car" /> Белоруссия<br/> 
<input type="checkbox" name="pl" value="bus" /> Польша<br/> 
<input type="submit" value="Выбрать" />
<input type="reset" value="Сбросить" />
</form>
checked="checked" – выбранный пункт по умолчанию, не обязательно выставлять;
type="reset" – назначает кнопку сброса;

Есть еще, так называемые “радиобатоны”, не знаю почему так, но выглядят они интересней чекбоксов. К следующей форме, для экономии места еще всунем функцию прикрепления файла:

Выберите пол:
Мужчина
Женщина

Загрузите фото:

<form name="male_female" action="" method="post">
Выберите пол:<br />
<input type="radio" name="Sex" value="Мужской" checked="checked" /> Мужчина<br />
<input type="radio" name="Sex" value="Женский" /> Женщина<br />
Загрузите фото:<br />
<input name="send_file" type="file" size="30" maxlength="60" /> 
</form>
<input /> – создает поле для ввода данных или кнопку;
type="radio" – определяет, собственно, радиобатон;
type="file" -назначает элемент для выбора файла.

Ну, вроде как все часто используемые html формы разрисованы. Может дополню какой-нибудь, если вдруг забыл.
Я не описывал одинаковые элементы во избежание повторений и за ненадобностью.

Кстати, я думаю, вы заметили что практически во всех формах используются отсылки к .php, посему, логично и правильно предположить что знание PHP очень поможет для создания полноценных, рабочих форм.

К каждому элементу в формах можно прикрутить CSS стили, об этом как-нибудь в следующий раз.