Сайты - строим сами
Сайты - строим сами

Главная	Введение	Основы HТМЛ	Формат и цвет	Картинки и ссылки	Таблицы	Фреймы	Основы CSS

Вёрстка сайта	Формы в html

Формы в html

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

Ладно, давайте ещё проще. Представьте, вы разместили свой сайт на интернет сервере (это такой мощный компьютер на котором находятся сайты). Посетители находясь дома в своём компьютере вводят адрес вашего сайта. После этого копия вашего сайта загружается к ним на компьютер. Это называется зайти на сайт. Хотя на самом деле сайт, вернее его копия заходит на компьютер посетителя.

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

Посетитель заполняет форму, нажимает кнопку и данные передаются на Интернет сервер. Дальше их нужно обработать. К примеру, занести в базу данных. И вот для этого уже нужна специальная программа, написанная на программном языке, например PHP. Но это очень объёмная тема и мы её сейчас касаться не будем, а рассмотрим только форму и её элементы. Форма задаётся тегом <form>

Атрибуты тега <form>

action - указывает адрес на который должны быть переданы данные из формы для обработки. Это может быть специальная страница, но может быть и та на которой находится форма. Тогда action=" ";
name - содержит имя формы, которое может понадобиться в дальнейшем, особенно если на странице несколько форм;
method - определяет метод передачи данных. Может принимать значение GET, когда данные передаются в адресной строке и ограничены объёмом 4 Kb, или POST, данные передаются запросом браузера и могут иметь большой объём;
target - указывает куда будет загружаться результат после обработки значение _blank новое окно браузера, _self текущее окно браузера;
accept-charset - определяет кодировку, в которой будут передаваться данные. Может быть Windows-1251, UTF-8 и т.д.;
engtype - определяет способ кодировки;

Ест ещё несколько необязательных атрибутов, но они не столь важны.

Элементы формы

Основным тегом определяющим элементы формы является <input>. Обычно его помещают между тегами <form> и </form>Он имеет множество атрибутов, но интерес для нас в данный момент представляет атрибут type, который может принимать следующие значения:

text текстовое поле для ввода текста с клавиатуры.

Код html:<input type="text">

password поле для ввода пароля, вместо символов будут видны звёздочки

Код html:<input type="password">

file поле для выбора файла

Код html:<input type="file">

button кнопка.

Код html:<input type="button" value="Кнопка">

checkbox туфли ботинки сапоги
можно выбрать одно или несколько предложенных значений.

Код html:
<input type="checkbox" name="checkbox1" value="ch1">туфли
<input type="checkbox" name="checkbox2" value="ch2">ботинки
<input type="checkbox" name="checkbox3" value="ch3">сапоги

radio туфли ботинки сапоги
можно выбрать только одно из нескольких предложенных значений.

Код html:
<input type="radio" name="shoes" value="rad1">туфли
<input type="radio" name="shoes" value="rad2">ботинки
<input type="radio" name="shoes" value="rad3">сапоги

image
при нажатии на изображение данные отправляются на сервер.

Код html:
<input type="image" src="picture/press.jpg">

reset возвращение значений элементов формы в исходное состояние

Код html:<input type="reset" value="Сброс">

submit кнопка отправки данных введённых в форму на сервер.

Код html:<input type="submit" value="Отправить">

hidden скрытое поле, содержит данные но на странице не отображается.

Код html:<input type="hidden" value="данные">

Ещё одним элементом формы может служить тег <textarea> вставляющий в форму текстовое поле. Он также имеет множество атрибутов, наиболее часто используемые:
rows - высота поля в строках; cols - ширина поля в символах. Текст содержащийся в текстовом поле

Код html:<textarea rows="5" cols="50">Текст содержащийся в текстовом поле</textarea>

Пример простейшей формы

Код html:<div id="test">
<form action="mailto:province15@mail.ru" method="post" enctype = "text/plain"> Подпишитесь на рассылку моего (вашего) сайта <br>
Введите логин <input type="text" name="login"> <br> <br>
Введите e-mail <input type="text" name="e-mail">
<input type="submit" value="Отправить данные">
</form> </div>

После заполнения формы и нажатия кнопки отправки на компьютере посетителя будет запущена почтовая программа и сформировано письмо на адрес указанный в атрибуте action, содержащее данные из текстовых полей. Если посетитель нажмёт в своей почтовой программе кнопку отправить, то письмо будет отправлено на указанный в форме адрес. Русский текст без искажений, передаётся только в связке Internet Explorer - Outlook Express. В других программах он кодируется и при получении такого письма нужно будет искать способ его декодировать.

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

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

Поделиться с друзьями На главную