ЛАБ11_HTML_1
.pdf
Алматы, ул. Масанчи, д. 96, офис 417. Кафедра информационных систем </TEXTAREA>
</FORM>
</BODY></HTML>
При помощи атрибутов ROWS и COLS можно задать поле любого размера. Хотя эти атрибуты не являются обязатель-
ными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать явно.
Тег <SELECT>
Этот тег используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Аналогично тегу <TEXTAREA>, <SELECT> требует обязательного определения имени в атрибуте NAME. Количество опций указывается в атрибуте SIZE. Ниже перечислены атрибуты тега <SELECT>.
Атрибут |
Назначение |
NAME |
Определяет название информации |
SIZE |
Определяет вертикальный размер окна для опций выбора. Если атри- |
|
бут опущен или его значение равно 1, выводится всплывающий спи- |
|
сок опций. Если указано число больше единицы, то опции выводятся |
|
в окне с полосой прокрутки. Если значение атрибута больше, чем |
|
фактическое количество элементов списка, добавляются пустые стро- |
|
ки. При их выборе пользователем возвращаются пустые поля |
MULTIPLE |
Позволяет выбирать сразу нескольких опций |
Список опций включается в контейнер <SELECT> при помощи тега <OPTION>. Этот тег имеет два атрибута.
Атрибут |
Назначение |
VALUE |
Указывает значение, возвращаемое программе обработки (скрипту), |
|
в случае выбора опции пользователем |
SELECTED |
Указывает на опцию, выбранную по умолчанию |
Пример:
Ниже приведено содержимое двух HTMLдокументов, содержащих похожие формы. Во втором документе предварительно выбран один элемент из списка (добавлен атрибут SELECTED).
<HTML>
<BODY>
Выберите время года: <FORM>
<SELECT NAME=year>
61
<OPTION SELECTED VALUE="winter"> зима <OPTION VALUE="spring"> весна <OPTION VALUE="summer"> лето <OPTION VALUE="autumn"> осень </SELECT>
</FORM>
</BODY>
</HTML>
Если применить атрибут многостроч-
ного поля <SELECT MULTIPLE
NAME="year">, тогда результат будет как на следующем рисунке.
Тег <INPUT>
Тег <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тегом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear).
Тег <INPUT> располагает следующими атрибутами.
Атрибут |
Назначение |
NAMESIZE |
Указывает размер поля ввода в символах |
MAXLENGTH |
Определяет максимально возможное число символов, вводимых |
|
в поле |
VALUE |
Для текстового поля определяет текст, выводимый по умолча- |
|
нию. Для флажков и переключателей указывает значение, воз- |
|
вращаемое программе обработки. Для кнопок отправки и очист- |
|
ки формы определяет надпись на кнопке |
CHECKED |
Устанавливает флажок или переключатель во включенное со- |
|
стояние по умолчанию. С другими типами тегов <INPUT> не |
|
употребляется |
TYPE |
Устанавливает тип поля ввода |
Тип поля ввода, атрибут TYPE
Атрибут TYPE тега <INPUT> может принимать следующие значения.
Атрибут |
Назначение |
TEXT |
Является значением по умолчанию и предполагает создание од- |
|
ной строки для ввода данных. Для этого типа поля ввода упот- |
|
ребляются атрибуты NAME (обязательный), SIZE, VALUE и |
|
MAXLENGTH |
PASSWORD |
Позволяет заменять вводимые символы пароля звездочками. Для |
|
этого типа поля ввода используются атрибуты NAME (обяза- |
|
тельный), SIZE, MAXLENGTH и VALUE |
|
|
CHECKBOX |
Позволяет вывести поле для установки флажка в виде маленько- |
|
го квадратика, в котором может быть произведена отметка опции |
62
|
"галочкой". Может использоваться совместно с атрибутами |
|
NAME (обязательный), VALUE и CHECKED (определяет уста- |
|
новленный по умолчанию флажок). Флажки обычно употребля- |
|
ются, когда мож но выбрать сразу несколько опций из числа |
|
предложенных. |
|
Нужно быть очень осторожным в использовании флажков и пе- |
|
реключателей, если цвет фона страницы определяется не доку- |
|
ментом, а пользователем при помощи установок программы про- |
|
смотра. Не допускайте, чтобы опции сливались с фоном страни- |
|
цы. |
RADIO |
Позволяет выбрать только одну из представленного числа опций. |
|
Переключатели можно группировать, задавая одно и то же зна- |
|
чение атрибута NAME (обязательный). Так же используются ат- |
|
рибуты VALUE и CHECKED |
RESET |
Позволяет создать кнопку для очистки формы. Атрибут VALUE |
|
может быть использован здесь для наименования этой кнопки |
|
(по умолчанию кнопка имеет надпись Reset) |
SUBMIT |
Используется для создания кнопки, по нажатию которой введен- |
|
ные данные отправляются на сервер для обработки программой- |
|
скриптом. В атрибуте VALUE может быть указано название для |
|
этой кнопки (по умолчанию – Submit Query) |
Пример:
В следующей форме используется значение TEXT.
<HTML>
<BODY>
<FORM>
Введите номер телефона: <INPUT TYPE="TEXT"
NAME="phone"
SIZE="13"
MAXLENGTH="15">
</FORM>
</BODY>
</HTML>
Пример:
Использование значения PASSWORD.
<HTML> <BODY> <FORM>
Введите секретное слово: <INPUT TYPE="password"
NAME="secret_word" SIZE="30" MAXLENGTH="15">
</FORM> </BODY> </HTML>
Пример:
Использование значения CHECKBOX.
63
<HTML>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> Вариант <BR> <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED> Предварительно выбранный вариант </FORM>
</BODY>
</HTML>
Пример:
В этом примере две формы расположены в соседних ячейках таблицы.
<HTML>
<BODY>
<TABLE ALIGN=center BORDER CELLSPACING=10> <TR>
<TD> Форма 1: <FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1"> yes.
<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no.
</FORM>
</TD>
<TD> Форма 2: <FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no.
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Пример:
В следующей форме используется значение RESET.
<HTML>
<BODY>
<FORM>
<INPUT TYPE="reset"> <BR>
<INPUT TYPE="reset" VALUE="Очистить форму!">
64
</FORM>
</BODY>
</HTML>
Пример:
Использование значения SUBMIT.
<HTML>
<BODY>
<FORM>
<TEXTAREA> Какой-то текст </TEXTAREA>
<BR>
<INPUT TYPE="submit" VALUE="Отослать данные!">
</FORM>
</BODY>
</HTML>
Нестандартное использование элементов форм
Многие теги HTML используются в целях, для которых они изначально не предназначались, например, таблицы – для разметки страниц. Поэтому смело экспериментируйте и с элементами форм.
Наиболее гибкими являются меню выбора. Всплывающее меню может выполнять функцию информационной полосы, включенной в текстовый поток. Например, можно использовать меню выбора для размещения небольших рассказов (помещая фрагменты текста в элементы OPTION. Применение этих возможностей заставляет пользователя активнее взаимодействовать с содержимым вашей страницы.
Ниже приведен HTML-документ, в котором раскрывающийся список используется для размещения небольшого рассказа об авторе.
<HTML> <BODY> Немного о себе: <FORM>
<SELECT NAME="about">
<OPTION SELECTED VALUE="line0"> Автобиография
<OPTION VALUE="line1"> –––––––––––––––
<OPTION VALUE="line2"> Меня зовут Куаныш.
<OPTION VALUE="line3">
Я студент третьего курса КазНУ. <OPTION VALUE="line4">
Мои увлечения: футбол, теннис.
<OPTION VALUE="line5"> Я жду от вас писем по адресу: <OPTION VALUE="line6"> kuanish@kazsu.kz </SELECT>
65
</FORM> </BODY> </HTML>
Задание
Создайте файл form.html и разместите в нем следующую форму.
Требования к оформлению:
1)поле "Пароль" должно иметь размер 10 символов и не отображать введенные данные;
2)среди всех номеров вопроса только один может быть выбран, по умолчанию выбранным должен быть вопрос под номером один;
3)поле для ответа на вопрос должно содержать четыре строки по сорок символов, первоначальное значение – "???";
4)кнопка "Очистить форму" должна восстанавливать первоначальный вид формы.
66
INPUT
Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:
CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.
MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности.
NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
SIZE - определяет визуальный размер поля ввода на экране в символах.
SRC - URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).
TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны:
CHECKBOX
Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.
HIDDEN
Поля данного типа не отображаются броузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используетс для передачи в CGI-программу статической информации, как то ID прользователя, пароля или другой информации.
IMAGE
Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGIпрограмма. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселах ( считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным .y, будет содержать Y-координату.
67
Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.
PASSWORD
То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается броузером на экране.
RADIO
Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
RESET
Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
SUBMIT
Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
TEXT
Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).
VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)
Меню выбора в формах
Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:
Select - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Даннй вид представляется как выпадающий LISTBOX.
Select single - то же самое, что и Select, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг.
Select multiple - позволяет выбрать несколько элементов из LISTBOX. SELECT
68
Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Тэг SELECT имеет один или более параметр пежду стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <SELECT>:
<FORM>
<SELECT NAME=group> <OPTION> AT 386 <OPTION> AT 486 <OPTION> AT 586 </SELECT>
</FORM>
SELECT SINGLE
Тэг SELECT SINGLE - это то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:
<FORM>
<SELECT SINGLE NAME=group SIZE=4> <OPTION> AT 386
<OPTION> AT 486
<OPTION> AT 586 <OPTIONS> Pentium PRO </SELECT>
</FORM>
SELECT MULTIPLE
Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Пример:
<FORM>
<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2> <OPTION> AT 386
<OPTION> AT 486
<OPTION> AT 586 <OPTIONS> Pentium PRO </SELECT>
</FORM>
Если выбрано одновременно несколько значений, то серверу передаютс соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.
Отправление файлов при помощи форм
Формы можно использовать для отправки не только небольших информационных сообщений ввиде параметров, а также и для отправки файлов.
Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!
Например:
69
<FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD=POST> Отправить данный файл: <INPUT NAME="userfile" TYPE="file">
<P>
<INPUT TYPE="submit" VALUE="Отправить файл"> </FORM>
Отправить данный файл:
Отправить файл
70