Специализированные языки разметки документов HTML (стр. 14 из 16)

cols ="целое число"

wrap =значение

disabled

readonly >

Текст, выводимый в текстовом поле по умолчанию

</ TEXTAREA >

Атрибуты тега:

rows и cols указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки.

wrap управляет переносом слов и имеет следующие значения:

wrap = off – запрет автоматического переноса; при этом сохраняются переносы, определенные пользователем;

wrap = virtual – перенос слов при отображении броузером, а серверу введенные данные передаются одной строкой;

wrap = physical – сохраняется перенос слов как при отображении броузером, так и при передаче серверу.

disabled – блокирует доступ и изменение текстового поля. Поле отображается серым цветом, недоступно для активации пользователем, и не может получить фокус. Состояние этого поля можно изменять с помощью скриптов.

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

Пример:

< TEXTAREA name =" message "

rows =25

cols =40>

Введите сюда текст сообщения

</ TEXTAREA >

Поле выбора файлов. Генерирует на экране кнопку, при нажатии на которую на экране появляется Проводник Windows , позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске. Поле выбора файлов работает корректно лишь при методе пересылки Post и формате кодировки multipart / form - data . Формат задания:

< INPUT type = file

n а me ="имя"

size ="ширина поля"

maxlength ="максимальная длина текста">

Пример:

<FORM enctype="multipart/form-data"

action="URL"

method=POST>

Введите имя файла : <BR>

</ FORM

Флажки. Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Элемент представляет собой простую форму выбора, принимающую одно из двух состояний: "отмечено" – "не отмечено". Несколько флажков могут объединяться в группу, которая будет отвечать набору параметров выбора. Данный элемент оперирует с булевыми переменными, то есть переменными, каждая из которых может принимать значение true или false . Формат задания:

< INPUT type = checkbox

n а me ="имя флажка или группы флажков"

value ="значение установленного флажка"

checked

title ="всплывающая подсказка">

По умолчанию начальное положение флажка считается не установленным. Чтобы задать начальное положение установленного флажка, надо дополнить его атрибутом checked .

Значением установленного флажка является строка, заданная атрибутом value .

Пример задания группы флажков:

< INPUT type = checkbox

name=system

value="WXP" checked> Windows XP<BR>

<INPUT type=checkbox

name=system

value="W2000"> Windows 2000<BR>

<INPUT type=checkbox

name=system

value="W98"> Windows 98<BR>

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

Пример связывания надписи с флажком:

<INPUT type=checkbox

id=WindowsXP

name=system

value="WXP" checked>

<LABEL for=WindowsXP>Windows XP</LABEL><BR>

<INPUT type=checkbox

id=Windows2000

name=system

value="W2000">

<LABEL for=Windows2000> Windows 2000</LABEL><BR>

<INPUT type=checkbox

id=Windows98

name=system

value="W98">

<LABEL for=Windows98> Windows 98</LABEL><BR>

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

< INPUT type = radio

n а me ="имя переключателя или группы"

value ="значение установленного переключателя"

checked

title ="всплывающая подсказка">

Все элементы radio одной группы обозначаются одним и тем же значением атрибута name . Использование радиокнопок требует явного указания значений атрибута value , одна из кнопок должна быть выделена атрибутом checked . Если атрибут checked не присвоен ни одному из переключателей группы, браузер при загрузке установит по умолчанию первый переключатель. При обработке формы на сервере будет отправлено значение установленного переключателя.

Пример использования:

< INPUT type = radio

name = DVD

value="DVDR" checked> DVD-R<BR>

<INPUT type=radio

name=DVD

value="DVDRW" checked> DVD-RW<BR>

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

Пример связывания надписи с переключателем:

<INPUT type=radio

id=disk1

name=DVD

value="DVDR" checked>

<INPUT type=radio

id=disk2

name=DVD

value="DVDRW" checked>

Кнопки. Это элементы управления, которые используются для представления формы (кнопка submit ), сброса данных формы (кнопка reset ), создания эффектов для кнопки (кнопка button ). Кнопку можно создать двумя способами:

1. Использование тега INPUT . Формат задания:

<INPUT type=button

n а me=" имя кнопки "

value ="надпись на кнопке">

2. Использование тега BUTTON . На таких кнопках можно размещать любые элементы HTML , в том числе изображения и таблицы и изменять вид кнопки. Формат задания:

< BUTTON >

Надпись или изображение

</ BUTTON >

В HTML предусмотрены два типа кнопок, которые создаются без использования значения button . Это кнопки специального назначения: Подача запроса ( submit ) и Сброс ( reset ).

Кнопка submit предназначена для запуска процедуры передачи формы на сервер. Формат задания:

< INPUT type = submit

n а me ="имя кнопки"

value ="надпись на кнопке">

или

< BUTTON type = submit >

Надпись на кнопке

</ BUTTON >

Если атрибут value отсутствует, то кнопка по умолчанию имеет надпись "Подача запроса". В версиях Internet Explorer 4.0 и выше кнопка submit может работать как кнопка по умолчанию, то есть она активизируется при нажатии клавиши Enter . В форме можно применять несколько кнопок submit .

Кнопка reset предназначена для приведения формы в начальное положение (сброс всех введенных данных). Формат задания:

< INPUT type = reset

n а me ="имя кнопки"

value ="надпись на кнопке">

или

< BUTTON type = reset >

Надпись на кнопке

</ BUTTON >

Если атрибут value отсутствует, то кнопка по умолчанию имеет надпись "Сброс".

Кнопка с изображением. Создает кнопку отсылки, аналогичную элементу submit , но с использованием графического изображения. Обычно применяется в случаях, когда стандартная серая прямоугольная кнопка "не вписывается" в дизайн сайта. Формат записи:

< INPUT type = image

n а me ="имя кнопки"

scr =" URL изображения"

value ="надпись на кнопке">

В этом случае тег INPUT может содержать все атрибуты тега IMG .

Пример задания кнопок:

1. Обычная кнопка<INPUT type=buttonname=pressvalue=" Нажми меня ! ">
2. Обычная кнопка< Button >Кнопка с текстом</ Button >
3. Кнопка с рисунком< Button >< IMG src =" tips . gif "align = absmiddle >Кнопка с рисунком </ Button >
4. Кнопка submit<INPUT type=submitvalue="Отправить">
5. Кнопка reset<INPUT type=resetvalue="Очистить">
6. Кнопка с изображением< INPUT type = imagesrc="tips. gif">

Списки. Эти элементы представляют пользователю список вариантов для выбора. Существует три типа списков:

раскрывающийся список, представляющий собой однострочное поле т треугольной стрелкой, которая раскрывает список;

поле-список, в котором на экран выводится заданное число строк; для просмотра всех срок список может быть снабжен полосой прокрутки;

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

Формат записи:

< SELECT name ="имя списка"

size=" целое число "

multiple>

Пункт 1

</OPTION>

</SELECT>

Атрибуты тега :

multiple включает режим выбора нескольких элементов из списка, т.е. определяет список со множественным выбором;

size устанавливает высоту списка. Если значение size =1, то список становится раскрывающимся. При добавлении параметра multiple список отображается как "крутилка";

selected делает текущий элемент списка выделенным.

Примеры задания списка:

1. Раскрывающийся список< SELECT name =С D ><OPTION value=1>CD-R</OPTION><OPTION value=2>CD-RW</OPTION></SELECT>
2. Список множественного выбора< SELECT multiple size =1><OPTION value=1>CD-R</OPTION><OPTION value=2>CD-RW</OPTION></SELECT>
3. Список единственного выбора< SELECT size =2><OPTION value=1>CD-R</OPTION><OPTION value=2>CD-RW</OPTION></SELECT>

Группирование элементов управления. Чтобы страница имела законченный вид, элементы формы должны быть распределены по группам. Формат задания группы: