Методические указания ППП. 2 часть

Переключатель -поле ввода для атрибутов типа Boolean

При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет) или (Правда/Ложь).

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

Вместе с атрибутом CHECKBOX должны использоваться следующие атрибуты:

CHECKED - инициализировать данный флаг, как отмеченный NAME - наименование поля ввода формы

VALUE - значение поля ввода

Пример (элемент "Ананас" указан как зараннее отмеченный): <P> Выберите Ваше любимый фрукт:

<FORM>

<INPUT TYPE="checkbox" NAME="fruct"

VALUE="Апельсин"> Апельсин<BR>

<INPUT TYPE="checkbox" NAME="fruct" VALUE="Яблоко ">

Яблоко<BR>

<INPUT TYPE="checkbox" NAME="fruct" VALUE="Ананас " CHECKED> Ананас <BR>

</FORM>

В окне браузера это будет выглядеть так:

Выберите Ваше любимый фрукт:

Апельсин

Яблоко

Ананас

Рисунок

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

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

Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:

ALIGN - необязательный атрибут, указывает на положение изображения на экране

NAME - наименование поля ввода формы

SRC – месторасположение источника изображения

Пример.

<P> Выберите точку на изображении:

<INPUT TYPE= "image" NAME="point" SRC=”ris.jpg">

Пример заполнения формы Следующий пример содержит большинство описанных

выше элементов.

<P> <H3 ALIGN=CENTER> Анкета пользователя </H3> <P> Ответьте, пожалуйста, на вопросы:

<FORM METHOD="POST" ACTION="http://www.ok.com/ok">

<P> Ваше имя: <INPUT NAME="name" SIZE="48"> <P> Мужчина <INPUT NAME="gender" TYPE=RADIO

VALUE="male">

<P> Женщина <INPUT NAME="gender" TYPE=RADIO

VALUE="female">

<P> Детей <INPUT NAME="family" TYPE=TEXT> <P> Страна <INPUT NAME="family" TYPE=TEXT> <UL>

<LI> Украина <INPUT NAME="country" TYPE="checkbox"

VALUE="Ukraine">

<LI> Россия <INPUT NAME="country" TYPE="checkbox"

VALUE="Russian">

<LI> Другая <TEXTAREA NAME="other" COLS=48

ROWS=3></TEXTAREA>

</UL>

<P> Электронный адрес: <INPUT NAME="email" SIZE="42"> <P> Для подтверждения ввода нажмите на кнопку Подача запроса.

<P> Для сброса введенных данных нажмите на кнопку Сброс.

<P>

<INPUT TYPE=SUBMIT><INPUT TYPE=RESET> </FORM>

В окне браузера это будет выглядеть так:

Анкета пользователя

Ответьте, пожалуйста, на вопросы:

Ваше имя:

Мужчина Женщина Детей Страна

Украина

Россия

Другая

Электронный адрес: Для подтверждения ввода нажмите на кнопку Подача запроса. Для сброса введенных данных нажмите на кнопку Сброс.

Подача запроса Сброс

Задание 1.

1. Создайте HTML документ с кодом:

<P> <H3 ALIGN=CENTER> Анкета пользователя </H3> <P> Ответьте, пожалуйста, на вопросы:

<FORM METHOD="POST" ACTION="http://www.ok.com/ok">

<P> Ваше имя: <INPUT NAME="name" SIZE="48"> <P> Мужчина <INPUT NAME="gender" TYPE=RADIO

VALUE="male">

<P> Женщина <INPUT NAME="gender" TYPE=RADIO

VALUE="female">

<P> Детей <INPUT NAME="family" TYPE=TEXT> <P> Страна

<UL>

<LI> Украина <INPUT NAME="country" TYPE="checkbox"

VALUE="Ukraine">

<LI> Россия <INPUT NAME="country" TYPE="checkbox"

VALUE="Russian">

<LI> Другая <TEXTAREA NAME="other" COLS=48

ROWS=1></TEXTAREA>

</UL>

<P> Электронный адрес: <INPUT NAME="email" SIZE="42"> <P> Для подтверждения ввода нажмите на кнопку <b>Отправить</b>

<P> Для сброса введенных данных нажмите на кнопку <b>Очистить</b>

<P>

<INPUT TYPE=SUBMIT value=Отправить><INPUT TYPE=RESET value=Очистить>

</FORM>

2.Самостоятельно добавьте после поля «Имя» поле для ввода фамилии.

3.Создайте выпадающее меню с выбором из 7 городов.

4.Создайте вокруг формы рамку толщиной 3 пикселя.

5.Измените цвета фона формы на желтый.

6.Разместите кнопки «Отправить» и «Очистить» по центру формы.

7.Переименуйте кнопку «Отправить» в «Готово».

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

9.Самостоятельно создайте форму для регистрации почтового ящика (образец приведен ниже), используя табличную структуру.

10. Создайте форму по образцу любым из известных вам способов.

Контрольные вопросы:

1.Для чего нужны формы?

2.Каким образом происходит обработка данных из заполненной формы?

3.Какой тэг используется для создания html-формы?

4.Какие элементы может содержать форма?

5.С помощью какой команды создается поле ввода для пароля?

6.Какое поле будет создано в результате выполнения команды <TEXTAREA NAME="avtor" COLS=100 ROWS=30></TEXTAREA>?

Литература

1.Леонтьев Б. К. Web – дизайн: руководство пользователя / Б. К. Леонтьев. – М. : Познавательная книга плюс, 2001. – 320 с.

2.Петровский А.И. Adobe Photoshop 6 / А. И. Петровский. –

М. : Майор, 2001. – 176 с.

3.Романычева Э. Т. Инженерная и компьютерная графика / Э. Т.Романычева, Т. Ю Соколова, Т. Ф. Шандурина. – М. :

ДНК Пресс, 2001. – 592 с., ил.

4.Тайц А. Эффективная работа с Photoshop 6 / А. Тайц, А.

Тайц. – СПб. : Питер, 2002. – 736 с.: ил.

Учебное издание

ОСНОВЫ WEB-ДИЗАЙНА

методические рекомендации по выполнению лабораторных работ № 1- 6

по дисциплине «Пакеты прикладных программ» для студентов специальности 230101 «Вычислительные машины, комплексы, системы и сети» очной формы обучения

Составитель-разработчик: Тюрина Светлана Сергеевна

Компьютерный набор Тюриной С. С.

Подписано в печать --.04.2008 г. Формат 60×84/16. Бумага для множительных аппаратов.

Усл. печ. л. --,--. Тираж -- экз. Заказ № --.

Международный институт компьютерных технологий 394026, Воронеж, ул. Солнечная, 29 б