Задание 1. Набрать все предложенные выше коды и проверить их отображение в браузере.

ПРАКТИЧЕСКАЯ РАБОТА № 10

ТЕМА: Выпадающие списки

Цель работы: научиться создавать выпадающие списки.

Оборудование: персональный компьютер, Celeron, Windows 2000.

Теоретическая часть:

Для создания выпадающих списков (Pull Down List) вводим тег <SELECT> вместо <INPUT>. Тег <SELECT> в отличии от <INPUT> имеет закрывающий тег. Давайте введем его в HTML-документ, созданный в предыдущей работе.

<SELECT> </SELECT> Начало формы

Конец формы

Конечно, не забываем обязательные html-теги (HTML, HEAD, TITLE, BODY) и тег для введения форм в документ (FORM) и его атрибуты.
Не забудьте дать ему имя (NAME).

<SELECT NAME="BEST FRIEND"> </SELECT> Начало формы

Конец формы

Теперь добавим несколько опций (пунктов):

<SELECT NAME="BEST FRIEND"> <OPTION> Эд <OPTION> Рик <OPTION> Том <OPTION> Гвидо </SELECT> Начало формы

Конец формы

Зададим для каждой опции (OPTION) значение (VALUE):

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Эд <OPTION VALUE="Rick">Рик <OPTION VALUE="Tom">Том <OPTION VALUE="Guido">Гвидо </SELECT> Начало формы

Конец формы

По умолчанию вначале списка отображается тот пункт (опция), который мы ввели первым. Однако, мы можем сами установить, какой пункт (опцию) будет видеть наш посетитель первым в списке.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Эд <OPTION VALUE="Rick">Рик <OPTION VALUE="Tom" SELECTED>Том <OPTION VALUE="Guido">Гвидо </SELECT> Начало формы

Конец формы

Кроме выпадающего списка есть еще и прокручивающийся список (Scrolling List), они весьма схожи. Но прежде, чем вводить прокручивающийся список мы добавим еще несколько пунктов в наш выпадающий список.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Эд <OPTION VALUE="Rick">Рик <OPTION VALUE="Tom">Том <OPTION VALUE="Guido">Гвидо <OPTION VALUE="Horace">Горацио <OPTION VALUE="Reggie">Режди <OPTION VALUE="Myron">Мирон </SELECT> Начало формы

Конец формы

Теперь мы превратим выпадающий список в прокручивающийся, добавив лишь один атрибут SIZE для тега <SELECT>.

<SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Ed">Эд <OPTION VALUE="Rick">Рик <OPTION VALUE="Tom">Том <OPTION VALUE="Guido">Гвидо <OPTION VALUE="Horace">Горацио <OPTION VALUE="Reggie">Режди <OPTION VALUE="Myron">Мирон </SELECT> Начало формы

Конец формы

SIZE указывает сколько пунктов (опций) должно быть видно в окошке. Все очень просто. И, конечно же, для прокручивающихся списков мы тоже можем установить сами, какой пункт должен быть выбран.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Эд <OPTION VALUE="Rick">Рик <OPTION VALUE="Tom" SELECTED>Том <OPTION VALUE="Guido">Гвидо <OPTION VALUE="Horace">Горацио <OPTION VALUE="Reggie">Режди <OPTION VALUE="Myron">Мирон </SELECT> Начало формы

Конец формы

Кроме изученных нами полей существует еще одно очень полезное поле <TEXTAREA> - поле для ввода комментариев, нескольких строк какого-либо текста.

<TEXTAREA NAME="COMMENTS"> </TEXTAREA> Начало формы

Конец формы

Мы можем контролировать размер этого поля. <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50></TEXTAREA>

ROWS - высота поля (количество строк текста), COLS - ширина поля (количество печатных символов в одной строке).

Если вы напечатаете что-то между тегами TEXTAREA, то это будет отображено, как комментарий по умолчанию.

Для <TEXTAREA> есть очень хороший атрибут WRAP. Некоторые браузеры его не понимают, но это ничего страшного. В этом случае, они его проигнорируют, что не повлияет на работоспособность формы.

Введем его: <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL></TEXTAREA>

WRAP=VIRTUAL обозначает, что текст в поле формы будет автоматически переноситься на другую строку, когда ваш посетитель будет что-то печатать в поле формы, однако, данные из формы к вам придут в виде одной большой строки (без переносов).

WRAP=PHYSICAL обозначает, что текст будет переноситься на другую строку не только, когда ваш посетитель печатает его в поле формы, текст в таком же отформатированном виде придет к вам (на почту, допустим).

WRAP=OFF - это значение стоит по умолчанию.

WRAP=OFF - обозначает, что текст в поле формы автоматически не переносится на другую строку (если пользователь сам не перенесет его посредством нажатия кнопки ENTER), кроме того, текст из формы посылается вам в таком виде, как он был напечатан вашим посетителем в поле формы со всеми пробелами и переносами строки.

Существуют так же поля, которые не отображаются на экране монитора. Это спрятанные (HIDDEN) поля. <INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1">

Содержание поля HIDDEN посылается вам в виде пары name/value (имя/значение) вместе с остальной информацией формы, вашему же посетителю эти поля, когда он заполняет форму, не видны.

Если на разных сайтах размещается несколько чуть видоизмененных вариантов формы и вам нужно знать, что и откуда пришло. Можно использовать скрытые поля формы.

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE =" Version 1"> ...для первой версии

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...для второй версии

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...для третьей версии

И так далее (для четвертого, пятого, шестого)...

Для <INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...Результат вам придет ввиде: E=Mc^2

Скрытые поля полезны, как в работе с e-mail формами, так и с формами, которые обращаются в cgi-скриптам. Они могут говорить скриптам, кто вы, куда отсылать ваш запрос, и т.д.

Теперь у нас по плану кнопки отправки (SUBMIT) и сброса (RESET) информации. Ввести их в ваш документ очень легко:

<INPUT TYPE=SUBMIT> Начало формы

Конец формы

При нажатии на эту кнопку данные из формы отсылаются к вам.

А при нажатии на RESET, данные из формы сбрасываются (стираются).

<INPUT TYPE=RESET> Начало формы

Конец формы

Разумеется, мы легко можем изменить надписи на кнопках:

<INPUT TYPE=SUBMIT VALUE="Отослать данные из формы к Джо"> <INPUT TYPE=RESET VALUE=" Очистить форму "> Начало формы

Конец формы

Если это необходимо, то вы можете задать имя (NAME) для кнопки ОТПРАВИТЬ (SUBMIT). Это нужно, если у вас две и больше кнопок отправки (SUBMIT).

Кроме своего адреса вы можете указать в форме, например, с каким заголовком будет отправлено вам письмо. <FORM METHOD=POST ACTION="mailto:michael@corleone.com?subject=Заказ на убийство" ENCTYPE="application/x-www-form-urlencoded">

Порядок выполнения работы:

Задание 1. Набрать все предложенные выше коды и проверить их отображение в браузере.

Дата добавления: 2019-02-12; просмотров: 121; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!