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

Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать.

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую.

Введите ФИО:

Введите пароль:

Какой диск вы хотите получить?

CD
DVD

Какие обучающие курсы вы хотите видеть на диске?

Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP

Выберите способ доставки:

Срочная Не срочная Курьером

Введите адрес для доставки:

Здесь все работает, кроме отправки данных, можете поклацать:)

Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся:

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

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

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

Пример 1:

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

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

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

Пример 2:

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

Атрибуты:

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

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

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

Пару слов о методах передачи:

Метод GET используется для передачи различных переменных, или очень коротких сообщений. Информация передается в явном виде через строку браузера, т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде https://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>

Результат:

Введите свой е-mail:

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

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

Результат:

Какой диск вы хотите получить?

CD
DVD

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

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

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

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

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