Создание HTML-форм: тэг INPUT
Тэг <INPUT>
Тэг <INPUT> применяется для создания большинства полей формы. Атрибут TYPE этого тэга указывает, какое именно поле создается, а остальные атрибуты определяют параметры этого поля. Существуют следующие типы полей: текстовое, поле пароля, флажок, переключатель, скрытое поле и поле файла. С помощью тэга <INPUT> создаются также кнопки Submit и Reset (Отправить и Очистить). Ниже мы рассмотрим все это подробнее.
Сейчас я хочу поговорить об атрибутах NAME и VALUE, которые есть у всех полей. Когда данные передаются серверу они организовываются в пары: имя-значение. Атрибут NAME позволяет вам идентифицировать (проименовать) каждое поле в форме. Вообще говоря, форма служит для того чтобы связать с каждым полем (именем) некоторое значение. Атрибут VALUE позволяет предварительно задать это значение. Смысл этого атрибута зависит от типа поля.
| Иногда бывает так, что поля объединяются в группы, причем все поля группы имеют одно и то же имя. Мы рассмотрим такой случай ниже. |
Быстрый переход по странице:
Текстовое поле
Поле в форме по умолчанию является текстовым. В такое поле текст можно вводить в виде одной строки. Вы можете при создании поля явно указать его тип, задав атрибут TYPE в тэге <INPUT>.
С помощью атрибута VALUE можно задать значение поля по умолчанию. Если этот атрибут указан, то его значение выводится в поле до того, как пользователь введет туда новое значение.
Атрибуты SIZE и MAXLENGTH обозначают отображаемую ширину поля и максимальное число символов, которое можно в него ввести. Вы должны указывать разумное значение атрибута MAXLENGTH, но вы не можете полагаться на его значение в своих CGI-программах. Посетитель вашей страницы может передать данные программе без использования формы, и вы должны учитывать это при программировании. Есть несколько способов передать данные программе, не соблюдая ограничений, наложенных формой. Например, пользователь может загрузить форму, модифицировать ее и передать данные. Кроме того, он может просто написать программу и передать данные вашей CGI-программе без помощи браузера вообще.
Вот пример тэга <INPUT>создающего текстовое поле:
<INPUT TYPE="TEXT" NAME="Name" SIZE="30" MAXLENGTH="60" VALUE="http://">
Вот так выполняется этот код:
Поле пароля
Поле для ввода пароля аналогично текстовому, за исключением того, что оно маскирует ввод пользователя так, что посторонний не может увидеть ваш пароль, подглядывая через ваше плечо. Но нужно иметь ввиду, что данные в этом поле никак не кодируются при передаче браузеру.
Все-таки это поле имеет два важных свойства. Во-первых, оно предохраняет ваш пароль от всеобщего обозрения, и, во-вторых, визуально сообщает пользователю, что он вводит пароль.
Вы можете создать поля для ввода пароля, указав в атрибуте TYPE значение password. Остальные атрибуты задаются так же, как и для обычного текстового поля. Вот пример кода и сразу же образец его выполнения:
<INPUT TYPE="password" NAME="password"
size="10" maxlength="10">
Флажок
Флажок служит для двоичного выбора - он или установлен или сброшен. Когда пользователь щелкает на флажке, его значение меняется на противоположное. Если флажок был установлен, он сбрасывается, и наоборот. Если флажок установлен в момент передачи данных форме, его пара имя-значение передается серверу, если он был сброшен, серверу ничего не передается.
Для того чтобы создать флажок, необходимо задать атрибуту TYPE значение checkbox. Атрибуту VALUE необходимо придать некоторое значение, иначе вы не сможете проверить состояние этого флажка так как будет недостаточно данных для формирования пары имя-значение. Неважно какое значение вы присвоит атрибуту VALUE, это просто условное значение, которое можно проверить в CGI-программе. Обычно его задают как yes или no.
У флажка может быть еще один атрибут - CHECKED. Он не имеет значения, просто если он установлен, флажок при открытии страницы будет установлен, если не указан - флажок будет сброшен. Вот пример кода и сразу же образец его выполнения:
<P>Ваши интересы:<br>
<INPUT TYPE="checkbox" NAME="books" value="yes">Книги<br>
<INPUT TYPE="checkbox" NAME="music" value="yes">Мызыка<br>
</p>
Ваши интересы:
Книги
Музыка
Переключатели
Переключатель предназначен для выбора из нескольких возможных ответов. Когда вы выбираете один из вариантов, то выбранный ранее сбрасывается. По-английски переключатель называется radio button, т.е. радиокнопка (по аналогии со старыми автомобильными приемниками, в которых при нажатии кнопки некоторой радиостанции ранее нажатая кнопка выскакивала).
Переключатель создается с помощью тэга <INPUT>, в котором атрибут имеет значение radio. Каждый тэг создает только одну кнопку переключателя, поэтому если вам нужно создать несколько связных кнопок, вы должны несколько раз применить тэг <INPUT> и каждый раз атрибуту NAME давать одно и то же имя.
Как и в случае с флажками, кнопку переключателя можно выбрать заранее с помощью атрибута CHECKED. Если в одной группе кнопок вы присвоите атрибут CHECKED сразу нескольким кнопкам, то при открытии страницы будет отмечена только последняя кнопка в группе. Вот пример кода и образец его выполнения:
<P>>Ваш месячный доход:<br>
<INPUT TYPE="radio" NAME="income" value="100">$100<br>
<INPUT TYPE="radio" NAME="income" value="250">$250<br>
<INPUT TYPE="radio" NAME="income" value="500">$500++<br>
</p>
Ваш месячный доход:
$100
$250
$500++
Скрытые поля
Существует такой тип поля, от которого, на первый взгляд нет пользы. Скрытые поля могут содержать данные которые пользователь не может изменить. Более того, скрытое поле вообще не отображается на странице. Однако данные, записанные в этом поле, существуют и передаются браузеру со всеми остальными данными. А браузер, в свою очередь, передает их серверу.
Для того чтобы создать скрытое поле, вы должны указать атрибут TYPE со значением hidden. Кроме этого атрибута у скрытого поля могут быть атрибуты NAME и VALUE. Создается скрытое поле так:
<INPUT TYPE="hidden" NAME="name" value="value">
Обычно скрытые поля применяют на страницах, с генерированных программами, если программист хочет передать на сервер некоторую информацию, которую он не хочет показывать пользователю. Например, заказ на покупку состоит из двух бланков. все данные, введенные в первый бланк, программа помещает в скрытые поля второго бланка и только после этого передает все сразу на сервер.
Файловые поля
Файловые поля предназначены для того, чтобы пользователь мог с помощью формы передать свой файл на сервер. Для создания такого поля атрибуту типа поля дается значение file. В таком поле пользователь может указать файл на своем компьютере, и при передаче данных этот файл будет отослан вместе с ними. Форма имеющая файловые поля должна применять метод передачи POST и тип кодировки multipart/form-data.
Файловое поле внешне похоже на текстовое, в котором записан путь к файлу, и рядом с пин расположена кнопка (Обзор), щелчок по которой раскрывает окно поиска файла. Если выбор файла делается с помощью окна, то путь к файлу копируется в поле.
Вот фрагмент кода, создающий файловое поле:
<P>Фотография:<br>
<INPUT TYPE="file" NAME="foto">
</p>
Кнопка сброса
Кнопка сброса (Reset) предназначена для сброса всех введенных пользователем данных. Если для некоторого поля был указан атрибут VALUE, то при щелчке на кнопке сброса в поле заносится значение этого атрибута. Если такой атрибут не был указан, то поле просто очищается. Для создание кнопки сброса атрибуту TYPE дается значение reset.
Атрибут VALUE самой кнопки определяет ее надпись. Вот пример создания кнопки сброса:
<INPUT TYPE="reset" value="Сброс данных">
Кнопка передачи
Кнопка передачи (Submit) применяется для передачи данных формы на сервер. Как именно данные будут переданы и куда, определяется в тэге <FORM> при создании формы. Для создания кнопки передачи атрибуту TYPE дается значение reset.
Атрибут VALUE определяет ее надпись. Вот пример создания кнопки передачи:
<INPUT TYPE="submit" value="передать данные">