Параметр type

Параметр TYPE позволяет указывать один из перечисленных элементов формы, каждому из которых соответствует отдельное значение.

Текстовые строки. TYPE="TEXT"

Это элемент текстовой строки. Строки для ввода текста на HTML-страницах встречаются сплошь и рядом.

Тому, кто хоть раз пользовался поисковым Internet-сервером, не надо объяснять, что это такое: узкий вытянутый прямоугольник, внутри которого можно ввести с клавиатуры одну строку текста Может содержать ряд дополнительных параметров, описанных в табл.

Параметр	Описание
SIZE	Определение максимального количества символов, видимых в текстовой строке без перемещения курсора
MAXLENGTH	Определение максимального количества символов, допустимых для ввода в текстовой строке. По умолчанию количество вводимых символов не ограничено
NAME	Присвоение идентификационного имени для программы-обработчика
VALUE	Указание значения текстовой строки (при просмотре в браузере выводится в виде обычного текста в самой строке)
READONLY	Позволяет создать элемент, недоступный для редактирования

Рассмотрим несколько вариантов использования элемента текстовой строки

<FORM NAME="mail" ACTION="/cgi-bin/mail.cgi" METHOD="post">

Ваше имя:<BR>

<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" NAME="name">

<BR><BR>

Ваш E-mail:<BR>

<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="email">

<BR><BR>

Ваш сайт:<BR>

<INPUT TYPE="text" SIZE="40" MAXLENGTH="60" NAME="www">

<BR><BR>

Комментарий:<BR>

</FORM>

TYPE="PASSWORD"

Это элемент ввода пользовательского пароля. Ничем не отличается от обыкновенной текстовой строки, за исключением того, что набранный текст отображается в виде звездочек:

<INPUT TYPE="password" SIZE="30" NAME="password">

Такая мера связана с сохранением конфиденциальности пользовательских данных (однако не стоит забывать, что данные, вводимые в это поле, при использовании типа передачи GET будут отображаться в ссылке запроса браузера).

TYPE="FILE"

Это элемент выбора файла, расположенного на локальном компьютере пользователя, предназначенного для загрузки на Web-сервер. Из дополнительных параметров действуют только SIZE и MAXLENGTH. Для корректной передачи файла необходима конструкция enctype="multipart/form-data" и указание типа передачи данных POST в теге <FORM>. В противном случае браузер передаст не выбранный файл, а путь к нему на компьютере пользователя.

Следует добавить, что средств HTML, способных изменять название кнопки просмотра содержимого локального компьютера, не существует. Значение может быть только одно и зависит от модели браузера: "Browse" или "Обзор".

Списки

Элемент выбора локального файла ранними версиями популярных браузеров поддерживается не полностью. Например, Internet Explorer 3.x отображает только строку пути для файла, не давая возможности поиска файла на компьютере прямо из браузера(в этом случае на локальном компьютере пользователя приходится вручную вписывать полный путь к нужному файлу).

В электронных формах существует два типа списков, из которых посетителю страницы предлагается что-то выбрать. В первом случае допускается выбор нескольких вариантов, во втором — только одного. Мы будем называть список первого типа списком вариантов, а список второго типа — списком-переключателем.

Списки вариантов. TУРЕ=”CHEСKBOХ”

Обычно пункты списков вариантов снабжены квадратными "окошками", в которых при выборе появляются "птички" (checkbox). Для создания такого списка используется уже знакомый нам дескриптор <INPUT> с параметром type=checkbox.

Для создания списка вариантов нужно столько дескрипторов <INPUT>, сколько в нем есть вариантов. Однако имена у них должны быть разные — у каждого варианта свое. Зачем это нужно? Дело в том, что, хотя логически список является цельным элементом формы, с точки зрения кода это всего лишь набор разрозненных, несвязанных дескрипторов. У каждого — свое имя и значение. А для того чтобы стало ясно, что именно нам предлагают выбрать, нужно снабдить эти квадратики пояснениями. Пользователь может выбирать несколько вариантов поля CHECKBOX, значение каждого из которых будет передано программой-обработчиком на Web-сервер.

Тег может содержать ряд дополнительных параметров.

Параметр	Описание
NAME	Указание общего для всех вариантов выбора идентификационного имени
VALUE	Определение значения для конкретного варианта выбора (обязательный параметр). Не должен повторяться, т. к. при установке флажка передается на Web-сервер
CHECKED	Данный вариант является выбранным по умолчанию Значений он не имеет.

<FORM NAME="select_hobby" ACTION="/cgi-bin/hobby.cgi" METHOD="get">

<INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" СНЕСКЕD>Компьютеры и Интернет

<BR><BR>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="art"> Литература и искусство

<BR><BR>

<INPUT TYPE="checkbox" NAME="hobby" VALUE ="music"> Музыка и танцы

<BR><BR>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="auto"> Автомобили

<BR><BR>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="sport"> Спорт и активный отдых

</FORM>

Заполняя различные Internet-анкеты, вы могли обратить внимание на то, что такие списки, "заполненные" по умолчанию, встречаются достаточно часто — чаще, чем хотелось бы. Обычно в конце длинной-предлинной формы мелким шрифтом стоит что-то вроде "Я хочу регулярно получать по почте рекламу продукции", а рядом — незаметная "птичка". И кто обвинит владельца сайта в распространении спама? Ведь вы сами его "попросили", не дочитав до конца и поторопившись щелкнуть на кнопке...

Списки-переключатели. TYPE="RADIO"

В списках-переключателях слева от пунктов имеются кружки, причем в центре кружка, соответствующего выбранному пункту, появляется жирная точка (radiobutton).

Для создания таких списков используется тот же дескриптор <INPUT>, что и для списка вариантов, но параметру type присваивается значение radio. Как и в списке вариантов, каждому элементу списка-переключателя соответствует отдельный дескриптор <INPUT>. Однако, в отличие от списка вариантов, все элементы списка-переключателя имеют одно имя. Иначе и не может быть: ведь мы хотим получить только одно значение из всего перечня. Наконец, здесь, как и в списке вариантов, для выбора одного из пунктов по умолчанию используется параметр checked — это элемент опции переключения между различными вариантами выбора. В отличие от CHECKBOX, вариант выбора может быть только один. Также имеет дополнительные параметры NAME, VALUE и CHECKED, действие которых аналогично опции выбора CHECKBOX.

<FORM NAME="select_age" ACTION="/cgi-bin/age.cgi" METHOD="get">

<INPUT TYPE="radio" NAME="age" VALUE="baby" CHECKED>0-5 лет

<BR><BR>

<INPUT TYPE="radio" NAME="age" VALUE="child">5-12 лет

<BR><BR>

<INPUT TYPE="radio" NAME="age" VALUE="junior">12-20 лет

<BRXBR>

<INPUT TYPE="radio" NAME="age" VALUE="adult">OT 20 лет

</FORM>

Кнопки

Кнопки — главный элемент любой электронной формы. До сих пор мы действительно обходились без кнопок: пока дело касалось лишь текстовых строк, для ввода данных достаточно нажать клавишу <Enter>.

Однако с другими элементами форм такой "фокус" не удастся. Поэтому, прежде чем обогатить нашу форму этими элементами, мы снабдим ее средствами управления в виде кнопок.

Как это ни странно, кнопки создаются с помощью того же дескриптора <INPUT>, что и текстовые строки. Однако значение параметра type в этом случае другое — в зависимости от назначения кнопки.

TYPE="SUBMIT"

Это кнопка отправления пользовательских данных на Web-сервер. При нажатии на нее запускается программа-обработчик, которая анализирует введенные пользователем данные и отправляет результат на сервер.

В принципе, необязательный элемент. Отправление данных может быть выполнено нажатием клавиши <Enter> на клавиатуре пользователя при размещении курсора мыши на любом поле формы. Однако подобный подход не приветствуется, т. к. отсутствие кнопки подтверждения может запутать неопытного пользователя.

По умолчанию отображается в виде прямоугольной кнопки с надписью "Submit" ("Submit Query" и пр., в зависимости от браузера).

Для элемента отправления данных на сервер также могут использоваться дополнительные (необязательные) параметры — NAME (имя кнопки отправления, значение которого также будет передано на сервер) и VALUE (присвоение собственного имени кнопке).

TYPE="IMAGE"

Это графический аналог стандартной кнопки отправления данных формы на Web-сервер. В этом случае автор электронного документа не ограничен средствами HTML и может применить всю свою фантазию на создание оригинальной, привлекательной кнопки передачи данных.

Для данного параметра используются некоторые дополнительные параметры:

Параметр	Описание
SRC	Указание относительного или абсолютного пути на сервере к файлу графического изображения, служащего кнопкой передачи данных формы;
ALIGN	Указание типа выравнивания текста относительно графической кнопки отправления данных формы;
BORDER	Определение толщины рамки кнопки (как правило, значение равно нулю);
ALT	Указание альтернативного текста/подсказки для кнопки отправления данных.

TYPE="RESET"

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

Пример использования кнопок отправления и сброса данных приведен ниже. По умолчанию названием кнопки сброса является "Reset". Изменить наименование элемента можно с помощью дополнительного параметра VALUE.

<FORM NAME="user_data" ACTION="/cgi-bin/anketa.cgi" METHOD="post">

<Н2>Анкета пользователя:</Н2>

<Р><В>Контактные данные:</В></Р>

Ваше имя:<BR>

<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" NAME="name">

<BR>Ваш E-mail:<BR>

<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="email">

<BR>Ваш сайт:<BR>

<INPUT TYPE="text" SIZE="40" MAXLENGTH="60" NAME="www">

<Р><В>Возраст: </В></Р>

<INPUT TYPE="radio" NAME="age" VALUE="baby" CHECKED> 0-5 лет &nbsр; &nbsр;

<INPUT TYPE="radio" NAME="age" VALUE="child">5-12

лет &nbsр; &nbsр; &nbsр; &nbsр;

<INPUT TYPE="radio" NAME="age" VALUE="junior">12-20 лет &nbsр; &nbsр;

<INPUT TYPE="radio" NAME="age" VALUE="adult"> от 20 лет

<Р><В>Увлечения: </В></Р>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" СНЕСКЕD>Компьютеры и Интернет &nbsр; &nbsр;<input TYPE="checkbox" NAME="hobby" VALUE="art">Литература и искусство &nbsр;&nbsp;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="music"> Музыка и танцы &nbsр; &nbsр;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="auto"> Автомобили   

<INPUT TYPE="checkbox" NAME="hobby" VALUE="sport"> Спорт и активный отдых

<Р ALIGN ="center">

<INPUT TYPE="submit" VALUE="Отправить данные">  

<INPUT TYPE="reset" VALUE="Очистить поля формы">

</P>

</FORM>

TYPE="HIDDEN"

Это служебное поле, не видимое пользователю, не может быть изменено ни браузером, ни самим пользователем. Анализируется программой-обработчиком и отсылается на Web-сервер (отсылаемое значение варьируется специальным параметром VALUE).

Дополнительные параметры тега <INPUT>

Кроме основных параметров, в теге <INPUT> могут присутствовать некоторые дополнительные параметры, поддерживаемые не всеми браузерами и используемые с помощью вспомогательных средств по отношению к HTML.

К ним можно отнести следующие параметры:

Параметр	Описание
DISABLED	Параметр, отменяющий активность выбранного поля формы. При указании параметра DISABLED редактирование элемента формы будет недоступно. Параметр поддерживается только браузером MS IE. Используется в сложных, динамически изменяющихся HTML-формах в совокупности с такими технологическими средствами, как DHTML, CSS, JScript и др.;
TITLE	Параметр отображения всплывающей подсказки для элемента формы. Поддерживается только браузерами: MS IE(4.x и выше), Netscape (6.x и выше), Opera (6.0 и выше);
STYLE	Параметр определения стиля CSS для выбранного элемента формы;
CLASS	Параметр, устанавливающий класс стилевого шаблона CSS (ссылающийся на внешний или внутренний набор стилей).

Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра VALUE всех установленных флажков.

<BUTTON> </BUTTON>

Этот элемент позволяет создавать кнопки так же, как и элемент INPUT. Но, в отличие от последнего, он является контейнером (имеет конечный тег). Это означает, что содержимое элемента может быть достаточно сложным, например, комбинацией текста и графики.

<BUTTON name="Имя" value="submit" type="submit">

Кнопка<IMG src="Файл. gif"></BUTTON>

Атрибут type может принимать следующие значения:

Параметр	Описание
BUTTON	Кнопка, щелчок на которой вызывает запрограммированную разработчиком реакцию;
RESET	Кнопка для очистки формы.
SUBMIT	Кнопка, подтверждающая, что форма заполнена;