Лекция: Урок 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 используется для передачи различных переменных, или очень коротких сообщений. Информация передается в явном виде через строку браузера, т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде 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 не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке, как значение переменной в обработчик полетит текст который написан рядом с галочкой.
Остальные элементы формы мы разберем в следующем уроке. Пока поэксперементируйте и придумайте свои формы.