Методические указания ППП. 2 часть
.pdfПереключатель -поле ввода для атрибутов типа 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 б