Шаг 57.
Тэг <INPUT>

    На этом шаге мы расмотрим параметры и значения тега <INPUT>.

    Приведем его общий вид:


    Имя компонента задается по тем же правилам, что и в других языках программирования. Все остальные параметры и их возможные значения перечислены в таблице 1.

Таблица 1.Параметры и их значения тэга <INPUT>
Параметр Значение
TYPE=TEXT – поле редактирования.
MAXLENGTH=число Максимальное количество символов, которое можно задавать в этом поле (по умолчанию – не ограничено).
SIZE=число Ширина поля редактирования (в символах). По умолчанию ширина выбирается достаточной для отображения около 20 символов.
VALUE=строка Первоначальное значение поля редактирования.
TYPE=PASSWORD – поле редактирования, только все вводимые символы представляются символом “*”.
TYPE=CHECKBOX – кнопка с независимой фиксацией, используется для установки/отмены опции. Можно объединить несколько кнопок в одну группу, путем задания одинакового значения в параметре NAME.
VALUE=строка Значение, которое будет передано серверу, если кнопка выбрана (опция включена). В противном случае ничего передано не будет. Обязательный параметр.
Если кнопки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра VALUE всех выбранных кнопок.
CHECKED Если указан этот параметр, то по умолчанию кнопка выбрана.
TYPE=RADIO – кнопка с зависимой фиксацией (радиокнопка). Используется в составе группы (одинаковое значение параметра NAME), из которой можно выбрать только одно значение.
VALUE=строка Обязательный параметр, значение которого передается серверу при выборе данной кнопки. В пределах группы значения этого параметра должны быть уникальными!
CHECKED Устанавливает элемент выбранным по умолчанию. В группе это значение должен иметь только один элемент!
TYPE=SUBMIT – кнопка передачи, нажатие на которую вызывает пересылку на сервер всего содержимого формы.
VALUE=строка Задает надпись на кнопке (по умолчанию – Submit).
TYPE=RESET – кнопка сброса, нажатие на которую отменяет все сделанные изменения, восстанавливая значения полей формы по умолчанию. Значение этой кнопки никогда не отсылается на сервер, поэтому у нее нет параметра NAME.
VALUE=строка Задает надпись на кнопке (по умолчанию – Reset).
TYPE=IMAGE – графическое изображение, действующее аналогично кнопке Submit.
SRC=имя графического файла Задает адрес файла с графическим изображением.
ALIGN=тип выравнивания Задает тип выравнивания изображения относительно текущей строки текста. Возможные значения совпадают со значениями одноименного параметра тэга <IMG>.
TYPE=BUTTON – стандартная кнопка, для которой нужно написать реакцию на ее нажатие, то есть указать последовательность операторов, которые должны выполниться при ее нажатии.
VALUE=строка Задает надпись на кнопке.
TYPE=FILE – поле для ввода имени локального файла, сопровождаемое кнопкой Обзор (Browse). Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или, воспользовавшись кнопкой Browse, выбрать его из диалогового окна. Для корректной передачи файла следует установить следующие параметры:
METHOD=POST и ENCTYPE=”multipart/form-data”.
MAXLENGTH=число Максимальное количество символов, которое можно задавать в этом поле (по умолчанию – не ограничено).
SIZE=число Ширина поля редактирования (в символах). По умолчанию ширина выбирается достаточной для отображения около 20 символов.
TYPE=HIDDEN – скрытое поле, не отображаемое пользователю. Информация, находящаяся в этом поле, всегда отправляется на сервер и не может быть изменена ни пользователем, ни браузером.
VALUE=строка Значение скрытого поля.

    Проиллюстрируем материал этой таблицы на примере создания регистрационной формы, например, члена клуба любителей книги. HTML-документ, реализующий эту форму, может быть таким:


<HTML>
<HEAD>
<TITLE> Регистрационная страница клуба любителей книги </TITLE>
</HEAD>
<BODY>
<H2> Страница регистрации члена клуба.</H2>
Заполнив следующую анкету, Вы получите доступ к нашей электронной библиотеке.<BR>
<FORM>
Укажите регистрационное имя: 
<!-- Создание поля редактирования REGNAME. -->
<INPUT TYPE=TEXT NAME=REGNAME><BR>
Введите пароль: 
<!-- Создание поля ввода пароля. -->
<INPUT TYPE=PASSWORD NAME=password1 MAXLENGTH=8>
<BR>Повторите введенный пароль: 
<!-- Создание поля для повтора ввода пароля. -->
<INPUT TYPE=PASSWORD NAME=password2 MAXLENGTH=8>
<BR><BR><BR>
Ваш возраст: 
<!-- Набор радиокнопок для выбора возраста.-->
<!—Первая кнопка выбрана по умолчанию.-->
<INPUT TYPE=RADIO NAME=VOZR VALUE=lt20 CHECKED> Меньше 20
<INPUT TYPE=RADIO NAME=VOZR VALUE=20_30>От 20 до 30
<INPUT TYPE=RADIO NAME=VOZR VALUE=30_50>От 30 до 50
<INPUT TYPE=RADIO NAME=VOZR VALUE=gt50>Больше 50
<BR><BR><BR>
На каких языках читаете:
<!-- Набор кнопок с независимой фиксацией.-->
<!—Первая кнопка выбрана по умолчанию.-->
<INPUT TYPE=CHECKBOX NAME=LANG VALUE=russian CHECKED> Русский
<INPUT TYPE=CHECKBOX NAME=LANG VALUE=english> Английский
<INPUT TYPE=CHECKBOX NAME=LANG VALUE=french> Французский
<INPUT TYPE=CHECKBOX NAME=LANG VALUE=german> Немецкий
<BR><BR><BR>
<!—Скрытое поле.-->
<INPUT TYPE=HIDDEN NAME=HDN VALUE=”Привет всем!!!”>
<!-- Кнопки завершения ввода.-->
<INPUT TYPE=SUBMIT NAME=But_OK VALUE=ОТПРАВИТЬ>
<INPUT TYPE=RESET VALUE=ОЧИСТИТЬ>
</FORM> <!--Конец формы.-->
</BODY>
</HTML>

Текст этого HTML-документа можно взять здесь.

    Результат просмотра в браузере этого HTML-документа приведен на рисунке 1.

    Понятно, что результат работы кнопки увидеть нельзя, так как у тэга <FORM> отсутствуют параметры ACTION, METOD и ENCTYPE. Если имеется доступ в Интернет, то можно попробовать отправить данные из формы по электронной почте. Для этого задайте перечисленным параметрам следующие значения:

    Таким образом, тэг <FORM> может иметь, например, такой вид:


<FORM METHOD=POST ENCTYPE=”text/plain” ACTION=”mailto:ivanov@mail.ru”>.

    Теперь нажатие кнопки приведет к отправке данных из формы по указанному электронному адресу ivanov@mail.ru.


Рис.1. Пример регистрационной формы

    На следующем шаге мы рассмотрим создание области ввода многострочного текста.




Предыдущий шаг Содержание Следующий шаг