- •Компоновка и дизайн html - форм
- •1. Использование дескриптора перевода строки
- •Разбиение полей на отдельные строки
- •2. Использование для выравнивания форм дескриптора отформатированного текста
- •3. Использование html-таблиц для выравнивания форм
- •4.Использование дескриптора абзаца для разделения частей формы
- •5. Использование дескрипторов списков для дизайна и компоновки форм
- •6. Использование дескрипторов упорядоченных списков для нумерации полей ввода
- •7. Компоновка и дизайн html – форм с помощью флажков и переключателей
4.Использование дескриптора абзаца для разделения частей формы
В том случае, когда форма создаваемая пользователем состоит из нескольких частей, то ее лучше разделить на части. Тег разрыва абзаца <P> </P> размещает между частями формы дополнительное пространство, причем в этом случае четкие разграничители страниц не создаются и отсутствует впечатление о том, что пользователем осуществляется работа с несколькими формами одновременно. Пусть пользователем создается форма для ввода комментариев, в которой присутствуют поля для ввода его имени и адреса электронной почты, причем их заполнение не является обязательным. Поэтому в данном случае лучше отделить в поле для ввода текста комментария от необязательной части формы, присвоив этой части формы имя "Необязательно".
Пример 7 – использование дескриптора абзаца для дизайна форм
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Использование дескрипторов < P></Н1>
<FORM>
<PRE>
<I><B>Необязательно</B></I>
Имя: <INPUT TYPE = "text" NAME ="name" SIZE = "50">
E - mail: <INPUT TYPE = "text" NAME ="email" SIZE = "50">
</PRE>
<P>
Ваши комментарии: <BR>
< TEXTAREA ROWS = "6" COLS = "70"> </TEXTAREA>
</P>
</FORM>
</BODY>
</HTML>
5. Использование дескрипторов списков для дизайна и компоновки форм
В процессе разработки Web – документов довольно часто возникают такие ситуации, при которых использование форматирования текста стандартными способами (с помощью дескрипторов перевода строки или форматирования абзаца) не всегда приводит к желаемому результату. В этих случаях удобнее воспользоваться дескрипторами (тегами) списков. Использование списков для компоновки и дизайна форм подходит при размещении в них текста с отступом или нумерованного текста. Например, при организации реализации товаров с помощью средств глобальной среды Internet можно встретить формы заказов на приобретение какого – либо товара. Для указания способа оплаты можно использования списков определений.
В процессе создания форматированных списков необходимо расставлять отступы в исходном документе таком образом, чтобы они совпадали с отступами этого Web – документа, расставляемыми в броузере при отображении. Что облегчает чтение исходного текста и напоминает о необходимости вписывать закрывающийся тег списка определений </DL>.
Пример 8 – компоновка и дизайн форм с помощью списка определений
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы списка определений</Н1>
<FORM>
<DL>
<DT>Способы оплаты
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “cash”
CHECKED> Наличными
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “check”>
Чеком
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “debit”>
Дебетной карточкой
<DL>
<DT> Кредитные карточки
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “mc”> Mastercard
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “visa”> Visa
<DD> <INPUT NAME = “pay” TYPE = “radio” VALUE = “disc”> Discover
<DD> <INPUT NAME = ““pay” TYPE = “radio” VALUE = “ae”> American Express
</FORM>
</BODY>
</HTML>
6. Использование дескрипторов упорядоченных списков для нумерации полей ввода
Тег <OL> при выполнении компоновки и дизайна форм используется для нумерации полей ввода, то есть позволяет перенумеровать поля ввода.
Пример 9 – компоновка и дизайн форм с помощью списка определений
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы упорядоченного списка</Н1>
<FORM>
Три ваших самых любимых книги
<OL>
<LI> <INPUT NAME = “1st” SIZE = “20”>
<LI> <INPUT NAME = “2nd” SIZE = “20”>
<LI> <INPUT NAME = “3rd” SIZE = “20”>
</FORM>
</BODY>
</HTML>