Формы, что это и зачем они нужны в html.

Html формы – является самой сложной частью в языке html. Тут придется хорошенько вникнуть и набраться терпения.
Что вообще такое html формы? Чуть ниже я приведу вам в пример html форму заказа обучающего диска. После окончания занятия вы так же легко сможете такую сделать.

Все отлично работает, кроме отправки данных. Проверьте сами.

Получается? А теперь давайте разберемся по подробнее:

html форма – это так называемый каркас, который создается при помощи языка html, т.е. мы можем указать браузеру, где и какое поле будет располагаться, и что написано, будет на той или иной кнопке. Только вот что бы данные на заказ ушли в офис – нужно применять немного другую технологию – программа, скрипт, который привязывается к форме. Такие программы зачастую делают на php . Но не стоит унывать раньше времени, я дам Вам простейший обработчик для тренировки, а более сложные можно найти в интернете или самому написать.

Давайте рассмотрим все элементы формы из примера выше по-порядку:

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

Пример 1:

1
2
3

<form>
<!-- сюда вставляют различные элементы -->
</form>

Тут можно наблюдать два базовых тега: открывающий <form> и обязательный закрывающий тег </form>.

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

1
2
3

<form name="forma zakaza" method="post" action="obrabotchik.php">
<!-- сюда вставляют различные элементы -->
</form>

Полезные атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется только, если в документе присутствует несколько форм.
ACTION – обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму.
METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.

Немного поговорим о методах передачи:

Метод GET применяется при передаче различных переменных, или же очень коротких сообщений. Информация передается в явном виде через строку браузера, а это значит, что ее можно перехватить. К примеру, если же вы наблюдаете в строке набора браузера что то типа adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется.

Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Информация передается в скрытом виде.

Тут все ясно вам? Давайте теперь начнем разбирать элементы формы:

1
2
3
4
5
6
7

<form name="primer1" method="post" action="obrabotchik.php">
Введите ФИО: <br>
<input type="text" name="fio" size="30">
<br>
Введите пароль:<br>
<input type="password" name ="pass">
</form>

Готовый результат будет выглядеть так:

В исходном коде мы можем наблюдать следующее:

Элемент INPUT – создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), данный элемент не имеет конечного тега.

Основные атрибуты:

TYPE – определяет тип поля для ввода данных. По умолчанию – это «text». В данном примере еще используется тип «password» который указывает на то, чтоб информация показывалась звездочками.
NAME – определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.
SIZE – определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать, то длина будет равна 24 символа.

Еще хотелось бы рассказать про такой атрибут как MAXLENGTH , который определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

Теперь рассмотрим пример:

1
2
3
4

<form name="primer2" method="post" action="obrabotchik.php">
Введите пароль(максимум шесть символов):<br>
<input type="password" name ="pass" maxlength="8">
</form>

В результате мы видим:

Получилось? А теперь для проверки попробуйте ввести больше 8 символов

Так же есть атрибут VALUE определяющий текст, по умолчанию написанный в поле для ввода.

Рассмотрим пример:

1
2
3
4

<form name="primer3" method="post" action="obrabotchik.php">
Введите свой e-mail: <br>
<input type="text" name="e-mail" size="35" value="пример: admin@primer.com">
</form>

Результат:

У нас осталось еще несколько элементов формы, давайте рассмотрим и их:

1
2
3
4
5
6
7

<form name="primer4" method="post" action="obrabotchik.php">
<p> Какой диск вы хотите получить?</p>
<p>
<input name="disc" type="radio" value="cd" checked>
CD<br>
<input name="disc" type="radio" value="dvd">
DVD </p></form>

Результат:

Такой тип элемента html формы называется радиопереключатель (переключает: либо одно значение, либо другое – два одновременно ни как не может быть). Поэтому атрибут type имеет значение type=»radio» . Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое имя – name=»disc» и разные значения value. Теперь давайте рассмотрим, почему так:

Для нас важно знать, какой диск желает получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name=»disc» и разные значение ( value=»cd» и value=»dvd» ). Следовательно, если же мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Другого варианта и быть не может.

Если же вы хотите сделать так, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked (включен).

Важно: в радиопереключателе обязательно должен присутствовать атрибут value, без него просто работать ничего не будет.

Последний элемент в этом уроке:

1
2
3
4
5
6
7
8

<form name="primer5" method="post" action="obrabotchik.php">
<p>Какие обучающие курсы вы хотите видеть на диске?</p>
<input type="checkbox" name="fotoshop" value="yes" checked>
Курсы по Фотошопу <br>
<input type="checkbox" name="dreamweaver" value="yes">
Курсы по Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes">Курсы по PHP
</form>

Результат:

Такой тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type=»checkbox» означает что тип элемента – Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и наконец value – определяет тот параметр, который будет отправлен при поставленной галочке.
В этом элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке, как значение переменной в обработчике полетит текст, который написан рядом с галочкой.

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