Теги и атрибуты для пользовательских форм

Окончание табл. 6.1

Тег INPUT является наиболее распространенным и способен отображать широкий набор элементов управления пользовательской формой с использованием атрибута TYPE.

TYPE=" text" – предполагает создание одной строки для ввода данных. Для этого типа поля ввода данных употребляется атрибуты: NAME, SIZE, MAXLENGTH и VALUE.

< HTML>

< HEAD>

< TITLE> Использование элемента текстовой строки< /TITLE>

< /HEAD>

< BODY TEXT=" blue" >

< FORM>

ФИО< BR>

< INPUT TYPE=" text" NAME=" pokup" SIZE=" 30"

VALUE=" Иванов Петр Николаевич" > < BR> < BR>

Адрес почтового ящика< BR>

< INPUT TYPE=" text " NAME=" email" SIZE=" 30"

value=" Ivanov@sch62.nsk.ru" >

< /FORM>

< /BODY>

< /HTML>

В данном примере в Сеть передаются следующие данные формы: pokup=Иванов Петр Николаевич; email=Ivanov@sch62.nsk.ru (см. также рис. 6.1).

TYPE=" password" – элемент ввода пользовательского пароля, который заменяет вводимые символы пароля звездочками. В этом теге можно указать те же атрибуты (NAME, SIZE, MAXLENGTH и VALUE), что и в теге текстового поля.

< FORM>

< INPUT TYPE=" password" NAME=" password" SIZE=" 4"

MAXLENGTH=" 10" >

< /FORM>

Рис. 6.1. Варианты использования

текстовой строки

TYPE=" checkbox" – выводит поле для установки флажка в виде маленького квадратика, в котором может быть установлена отметка (галочка). Может содержать дополнительные параметры (NAME, VALUE, CHECKED). Для каждого флажка нужно ввести свой тег < INPUT> и задать его атрибуты. По умолчанию начальное положение флажка считается не установленным, чтобы его задать, надо использовать атрибут CHECKED. При представлении данных формы на сервер считываются данные только установленных флажков согласно атрибуту VALUE, значением которого является текстовая строка, заданная в этом атрибуте.

Например, из представленного списка нужно галочками отметить выбранные строки (см. также рис. 6.2).

< HTML>

< HEAD>

< TITLE> Использование флажков< /TITLE>

< /HEAD>

< BODY>

< P>

Отметьте нужные книги:

< /P>

< FORM>

< INPUT TYPE=" checkbox" NAME=" html" > & nbsp;

HTML – конструирование

< BR>

< INPUT TYPE=" checkbox" NAME=" js" > & nbsp;

Java Script– конструирование

< BR>

< INPUT TYPE=" checkbox" NAME=" dhtml" CHEKED> & nbsp;

DHTML – констр.

< BR>

< /FORM>

< /BODY>

< /HTML>

Рис. 6.2. Пример использования группы флажков

После загрузки формы оказывается автоматически установленным флажок DHTML-констр., поскольку для него указан атрибут CHECKED. Пользователь может снять первоначально установленный флажок и установить другие флажки либо не установить ни один из флажков. Значения всех установленных флажков (атрибут VALUE) будут переданы на сервер при представлении формы.

В HTML есть возможность установки флажка не только щелчком по квадратику флажка, но и по надписи. Для этого необходимо связать надпись и флажок с помощью элемента LABEL, который представляет собой текстовый контейнер. Например, для связи первого флажка из формы на рис. 6.2 с надписью «HTML – конструирование» нужно сделать следующую запись:

< INPUT TYPE=" checkbox" NAME=" html" ID=" html" >

< LABEL FOR=" html" > & nbsp; HTML – конструирование

< /LABEL> < BR>

В теге < LABEL > содержится ссылка на связанный элемент управления с помощью атрибута FOR. Этому атрибуту ставится в соответствие индивидуальный идентификатор ID элемента управления на web-странице.

TYPE=" radio" – позволяет выбрать переключением только одну из оставленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный атрибут), VALUE и CHECKED.

Например, использование переключателей показано в следующем HTML-коде ниже (см. также рис. 6.3).

< HTML> < HEAD>

< TITLE> Использование флажков< /TITLE> < /HEAD>

< BODY>

< P> Ваш выбор: < /P> < BR>

< FORM>

< INPUT TYPE=" radio" NAME=" autor" VALUE=" Сhykovsky" >

Корней Чуковский < BR>

< INPUT TYPE=" radio" NAME=" autor" VALUE=" Visockiy" >

Владимир Высоцкий< BR>

< /FORM>

< /BODY> < /HTML>

Рис. 6.3. Пример группы переключателей

Как и в предыдущем случае с флажками, надписи можно связывать с соответствующими переключателями. Для этого каждому переключателю должен быть присвоен индивидуальный идентификатор, а все переключатели должны образовывать группу с определенным именем.

< INPUT TYPE=" radio" NAME=" autor" ID=" r1" VALUE=" Сhykovsky" >

< LABEL FOR=" r1" > Корней Чуковский < /LABEL> < BR>

< INPUT TYPE=" radio" NAME=" autor" ID=" r2" VALUE=" Visockiy" >

< LABEL FOR=" r2" > Владимир Высоцкий< /LABEL> < BR>

TYPE=" button" – размещает на форме обычную прямоугольную кнопку. Для задания надписи на кнопке достаточно дополнить тег атрибутом VALUE. Шрифт надписей на кнопках определяется браузером.

< INPUT TYPE=" button" VALUE=" Пуск" NAME=" start" >

TYPE=" reset" – позволяет создавать кнопку для очистки формы, т. е. для приведения формы в первоначальное положение. VALUE – используется для названия кнопки. Если оно не задано, то на кнопке будет отображена надпись «Сброс».

< INPUT TYPE=" reset" VALUE=" Очистить" >

TYPE=" submit" – используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-скриптом.

< INPUT TYPE=" submit" VALUE=" отправить " NAME=" trans" >

Данный тег имеет атрибуты VALUE и NAME, однако их может и не быть. Если VALUE отсутствует, то кнопка по умолчанию имеет надпись «Подача запроса». Кнопка submitможет работать по умолчанию, то есть она активируется при нажатии клавиши Enter.

HTML предоставляет возможность создания различных пользовательских кнопок, в том числе и кнопки-изображения. Для этого нужно ввести в тег < INPUT > атрибут TYPE=" image" и задать адрес файла рисунка, используя атрибут SRC.

< INPUT TYPE=" image" SRC=" image007.gif" ALIGN=" top"

NAME=" picture" >

Здесь используются также атрибут имени NAMEи выравнивания изображения относительно текста.

Приведем пример HTML-кода с использованием этих видов кнопок на web-странице и их отображения в браузере (рис. 6.4).

< HTML> < HEAD>

< TITLE> Использование кнопок< /TITLE>

< /HEAD>

< BODY>

< P> Виды используемых кнопок< /P>

< BR>

< FORM>

button< BR>

< INPUT TYPE=" button" VALUE=" Пуск" NAME=" start" >

< BR> < BR>

reset< BR>

< INPUT TYPE=" reset" VALUE=" Очистить"

> < BR> < BR>

submit< BR>

< INPUT TYPE=" submit" VALUE=" Отправить" NAME=" trans" >

< BR> < BR>

image< BR>

< INPUT TYPE=" image" SRC=" image007.gif" ALIGN=" top"

NAME=" picture" >

< /FORM>

< /BODY> < /HTML>

Рис. 6.4. Пример использования кнопок

Тег < TEXTAREA> < /TEXTAREA > предназначен для построения поля при вводе многострочной текстовой информации. Этот тег имеет атрибуты: NAME (имя поля), ROWS (высота поля в строках), COLS (ширина поля в символах).

< TEXTAREA NAME=" adres" ROWS=" 3" COLS=" 28" >

задает поле в три строки, каждая по 28 символов.

Между тегами < TEXTAREA> и < /TEXTAREA > можно разместить текст, выводящийся в поле по умолчанию.

Приведем пример HTML-кода с применением многострочного поля и его отображением в браузере (рис. 6.5).

< HTML>

< HEAD>

< TITLE> Использование многострочного поля< /TITLE>

< /HEAD>

< BODY>

< FORM> < TEXTAREA NAME=" adres" ROWS=" 3" COLS=" 28" >

660037 Красноярск

Ул. Красноярский рабочий 31

СИБГАУ

< /TEXTAREA>

< /FORM>

< /BODY>

< /HTML>

Рис. 6.5. Пример многострочного поля

В Сеть будет передано следующее сообщение: adres=660037 Красноярск, Красноярский рабочий 31, СИБГАУ.

Тег < SELECT > < /SELECT > используется для создания на форме списков, позволяющих выбрать одно или несколько значений из множества возможных, также возможно его использование для компактной группировки большого количества элементов (таких как checkbox и radio). Он может включать в себя следующие атрибуты: NAME (имя), SIZE (определяет вертикальный размер окна в позициях, по умолчанию равен 1), MULTIPLE (позволяет производить выбор сразу нескольких позиций из списка наименований).

< SELECT NAME=" city" SIZE=" 5" >

Элемент списка создается с помощью тега < OPTION >, который включается в контейнер < SELECT >. В теге < OPTION > могут быть размещены два основных атрибута: VALUE – указывает значение, возвращаемое программе обработки (скрипту) в случае выбора опций пользователем, SELECTED – указывает на опцию, выделенную по умолчанию. Следует отметить, что тег < OPTION > не требует обязательного присутствия закрывающего тега:

< OPTION VALUE=" Moscow" > Москва

Приведем пример HTML-кода, где используется выбор фамилии автора приведенных стихов из списка и представим его отображение в браузере (рис. 6.6).

Рис. 6.6. Пример использования списков

< HTML> < HEAD>

< TITLE> Использование списка< /TITLE>

< /HEAD> < BODY> < FORM>

< H3> Укажите автора< /H3>

< P>

Лицом к лицу< BR>

Лица не увидать.< BR>

Большое видится на расстоянье.< BR>

Когда кипит морская гладь, < BR>

Корабль в плачевном состоянии.

< /P>

< SELECT Name=" autor" >

< OPTION> А.Пушкин < /OPTION>

< OPTION SELECTED> С.Есенин< /OPTION>

< OPTION> Ю.Лермонтов< /OPTION>

< OPTION> В.Высоцкий< /OPTION

< /SELECT>

< /FORM> < /BODY> < /HTML>