Урок 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 используется для передачи различных переменных, или очень коротких сообщений. Информация передается в явном виде через строку браузера, т.е. ее можно перехватить. Например, если вы видите в строке набора браузера нечто вроде 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> Результат: Введите свой е-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 иначе ничего работать не будет. Последний элемент в этом уроке: < 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>
Результат: Какие обучающие курсы вы хотите видеть на диске? Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP
Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type=" checkbox" означает, что тип элемента – Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и, наконец, value – определяет тот параметр, который будет отправлен при поставленной галочке. В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке, как значение переменной в обработчик полетит текст, который написан рядом с галочкой. Остальные элементы формы мы разберем в следующем уроке. Пока поэкспериментируйте и придумайте свои формы.
|
