Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
Облако пометок
css Google html SEO WordPress Яндекс видео графический дизайн заработок индексация интернет ключевые слова контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт статья хостинг

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

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 стили, об этом как-нибудь в следующий раз.

Комментировать эту запись запрещено :(