- •Компоновка и дизайн html - форм
- •1. Использование дескриптора перевода строки
- •Разбиение полей на отдельные строки
- •2. Использование для выравнивания форм дескриптора отформатированного текста
- •3. Использование html-таблиц для выравнивания форм
- •4.Использование дескриптора абзаца для разделения частей формы
- •5. Использование дескрипторов списков для дизайна и компоновки форм
- •6. Использование дескрипторов упорядоченных списков для нумерации полей ввода
- •7. Компоновка и дизайн html – форм с помощью флажков и переключателей
7. Компоновка и дизайн html – форм с помощью флажков и переключателей
При компоновке и дизайне HTML – форм флажки и переключатели используются для ввода простой информации, например, в формах подтверждения или отказа. Если флажки и переключатели неправильно размещены в форме, то они могут стать одной из самых непонятных ей частей.
Для компоновки флажков и переключателей используется три способа:
размещение флажков и переключателей по горизонтали,
использование списка для их размещения по вертикали,
расположение флажков и переключателей в сетке.
Использование при компоновке и дизайне форм размещения флажков и переключателей по горизонтали позволяет упростить внешний вид, создаваемой формы при просмотре ее в броузере. В данном случае следует обращать внимание на тот факт, что размер строки при отображении создаваемого Web – документа в броузере ограничен, поэтому количество флажков и переключателей на строке не должно быть большим.
Пример 10 – горизонтальное размещение флажков и переключателей
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Флажки и переключатели</Н1>
<FORM>
Какой размер вы предпочитаете? <BR>
<INPUT NAME = “size” TYPE = “radio” VALUE = “sm”> Малый
<INPUT NAME = “size” TYPE = “radio” VALUE = “md”> Средний
<INPUT NAME = “size” TYPE = “radio” VALUE = “lg"> Большой
<INPUT NAME = “size” TYPE = “radio” VALUE = “x”> Очень большой
<INPUT NAME = “size” TYPE = “radio” VALUE = “xx”>Огромный
</FORM>
</BODY>
</HTML>
В процессе работы пользователя с HTML - документом очень часто приходится осуществлять сложный выбор, то в этом случае стоит отказаться от размещения переключателей и флажков горизонтально, а разместить их для простоты восприятия формы в виде списка.
Пример 11 –размещение флажков и переключателей в виде списка
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Флажки и переключатели</Н1>
<FORM>
<DL>
<DT> На каком ПК вы работаете?
<DD> <INPUT NAME = “mac” TYPE = “ checkbox”> Macintosh
<DD> <INPUT NAME = “pc” TYPE = “ checkbox”> IBM – совместимый компьютер
<DL>
<DD> <INPUT NAME = “sun” TYPE = “ checkbox”> Sun
<DD> <INPUT NAME = “sgi” TYPE = “ checkbox”> SGI
<DD> <INPUT NAME = “next” TYPE = “ checkbox”> NeXt
<DD> <INPUT NAME = “aix” TYPE = “ checkbox”> AIX
<DD> <INPUT NAME = “lin” TYPE = “ checkbox”> Linux
<DD> <INPUT NAME = “other” TYPE = “ checkbox”> Прочие
</DL>
</DL>
</FORM>
</BODY>
</HTML>
Самым сложным способом является размещение флажков при оформлении HTML – форм в виде сетки. Для размещения таким же образом переключателя необходимо в дескрипторе <INPUT> произвести тег флажка на тег его формирующий.
Пример 12 – создание сетки флажков, используя таблицу
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Флажки и переключатели</Н1>
<FORM>
Возможные комбинации
<TABLE>
<TR> <TD></TD> <TD>Красный</TD><TD>Голубой</TD> </TR>
<TR> <TD>Маленький</TD><TD><INPUT NAME = "sr"
TYPE = "checkbox"></TD>
<TD><INPUT NAME = "sb"
TYPE = "checkbox"></TD></TR>
<TR> <TD>Средний</TD><TD><INPUT NAME = "mr"
TYPE = "checkbox"></TD>
<TD><INPUT NAME = "mb"
TYPE = "checkbox"></TD></TR>
<TR> <TD>Большой</TD><TD><INPUT NAME = "lr"
TYPE = "checkbox"></TD>
<TD><INPUT NAME = "lb"
TYPE = "checkbox"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Аппаратура и материалы. Для выполнения лабораторной работы необходим персональный компьютер со следующими характеристиками: процессор Intel Pentium с тактовой частотой 800 МГц и выше, оперативная память – не менее 64 Мбайт, свободное дисковое пространство – не менее 500 Мбайт, устройство для чтения компакт – дисков, монитор типа Super VGA (число цветов – 256) с диагональю не менее 15 .
Программное обеспечение – операционная система WINDOWS 98 / NT / ME / 2000 / XP.
Указания по технике безопасности. Техника безопасности при выполнении лабораторной работы совпадает с общепринятой для пользователей персональных компьютеров. В частности: самостоятельно не производить ремонт персонального компьютера, установку и удаление программного обеспечения; в случае неисправности персонального компьютера сообщить об этом обслуживающему персоналу лаборатории (оператору, администратору); соблюдать правила техники безопасности при работе с электрооборудованием; не касаться электрических розеток металлическими предметами; рабочее место пользователя персонального компьютера должно содержаться в чистоте; не разрешается возле персонального компьютера принимать пищу, напитки.
Методика и порядок выполнения работы
1. Изучите примеры, позволяющие произвести компоновку и улучшить дизайн HTML – формы.
2. Создайте HTML – форму, в которой следует ввести пароль пользователя. Предусмотрите в данной форме гиперссылку для перехода на другой Web – документ (без использования скрипов).
3. Создайте HTML – форму "Личная", в которой следует учитывать следующие моменты компоновки и дизайна HTML – форм:
– при вводе фамилии, имени, отчества, домашнего адреса и @- mail использовать дескрипторы перевода строки,
– предусмотреть различные способы выравнивания полей формы (с помощью таблиц, <P> …</P>, <PRE>…</PRE>);
– выбор даты, месяца и года рождения должен производиться различными способами.
4. Создайте в HTML – файле, содержащем HTML – форму "Личная", гиперссылку, которая переводила бы пользователя в новый Web – документ.
5. В новом HTML – документе разработайте HTML – форму, в которой на примере своей зачетной книжке (дисциплина и оценка), покажите использование различных видов списков для компоновки форм, флажков и переключателей.
Содержание отчета и его форма
Отчет по лабораторной работе должен состоять из:
Названия лабораторной работы;
Цели лабораторной работы;
Ответов на контрольные вопросы;
Формулировки индивидуального задания и порядка его выполнения.
Отчет о выполнении лабораторной работы в письменном виде сдается преподавателю.
Контрольные вопросы и защита работы
1.Перечислите и охарактеризуйте основные методы компоновки и дизайна форм?
2.Как осуществляется дизайн форм с помощью дескрипторов перевода строки.
3.Как используется HTML –таблица для компоновки и дизайна форм?
4.Как осуществляется компоновка форм с помощью форматированного текста?
5.Для каких целей используются дескрипторы абзаца?
6. Охарактеризуйте использование списков для компоновки и дизайна форм?
Охарактеризуйте использование управляющих элементов для компоновки и дизайна форм (флажки, переключатели) ?
Защита лабораторной работы
При защите лабораторной работы студент отвечает на контрольные вопросы и поясняет выполненное индивидуальное задание. Ход защиты лабораторной работы контролируется преподавателем.