Урок 10: Что такое html формы и зачем они нужны.

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

<form name="forma zakaza" method="post" action="obrabotchik.php">

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

</form>

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

Атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.

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

METHOD – определяет способ отправки содержимого html формы. Возможные значения: GET (по умолчанию) и POST.

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

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

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

<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. По умолчанию количество символов не ограничено.

<form name="primer2" method="post" action="obrabotchik.php">

Введите пароль(максимум шесть символов):<br>

<input type="password" name ="pass" maxlength="6">

</form>

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

<form name="primer3" method="post" action="obrabotchik.php">

Введите свой e-mail: <br>

<input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com">

</form>

Теперь рассмотрим следующий элемент формы:

<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>

radio – радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT.

checked - атрибут-флаг для установления радиопереключателя на каком-либо варианте по умолчанию.

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

checkbox – отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов.

<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>

В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке, как значение переменной в обработчик полетит текст который написан рядом с галочкой.