- •Компоновка и дизайн html - форм
- •1. Использование дескриптора перевода строки
- •Разбиение полей на отдельные строки
- •2. Использование для выравнивания форм дескриптора отформатированного текста
- •3. Использование html-таблиц для выравнивания форм
- •4.Использование дескриптора абзаца для разделения частей формы
- •5. Использование дескрипторов списков для дизайна и компоновки форм
- •6. Использование дескрипторов упорядоченных списков для нумерации полей ввода
- •7. Компоновка и дизайн html – форм с помощью флажков и переключателей
2. Использование для выравнивания форм дескриптора отформатированного текста
В большинстве случаев HTML – формы представляют собой хаотично расположенные поля ввода, что затрудняет их чтение пользователем. Для выравнивания текстовых полей в некоторых случаях моно использовать тег <PRE>. При использовании этого дескриптора в процессе дизайна формы между полями образуется свободное пространство, которое позволяет облегчить дальнейшую работу с формой.
Пример 4 - поля формы, не выровненные по умолчанию
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы перевода строки</Н1>
<FORM>
Имя: <INPUT TYPE = "text" NAME = "name" SIZE = "30"> <BR>
E – Mail: <INPUT TYPE = "text" NAME ="email" SIZE ="50"> <BR>
Улица: <INPUT TYPE = "text" NAME = "street1" SIZE = "30"> <BR>
<INPUT TYPE = "text" NAME = "street2" SIZE = "30"> <BR>
Город: <INPUT TYPE = "text" NAME = "city" SIZE = "50"><BR>
Область: <INPUT TYPE = "text" NAME = "state" SIZE = "2"> <BR>
Индекс: <INPUT TYPE = "text" NAME = "zip" SIZE = "10>
</FORM>
</BODY>
</HTML>
Если выполнить форматирование текста при наборе и воспользоваться затем дескриптором <PRE>, то можно создать очень аккуратную форму.
Пример 5 - поля формы, выровненные тегом <PRE>
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Использование дескрипторов PRE </Н1>
<FORM>
<PRE>
Имя: <INPUT TYPE = "name" NAME = "name" SIZE = "50">
E – Mail: <INPUT TYPE = "text" NAME ="email"
SIZE ="50">
Улица: <INPUT TYPE = "text" NAME = "street1"
SIZE = "30">
<INPUT TYPE = "text" NAME = "street2"
SIZE = "30">
Город: <INPUT TYPE = "text" NAME = "city" SIZE = "50" >
Область: <INPUT TYPE = "text" NAME = "state" SIZE = "2">
Индекс: <INPUT TYPE = "text" NAME = "zip" SIZE = "10>
</PRE>
</FORM>
</BODY>
</HTML>
3. Использование html-таблиц для выравнивания форм
Для облегчения работы с формой ее можно размещать на странице с помощью HTML – таблиц, при этом внешний вид формы будет практически совпадать с формой компоновка, которой производилась отформатированным текстом, но так как в этом случае применяется обычный HTML, то в форму можно включать HTML-конструкции (таблицы, фреймы, графические изображения).
Пример 6 - размещение полей формы в таблице
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Использование HTML - таблиц </Н1>
<FORM>
<TABLE>
<TR><TD> Имя: </TD><TD><INPUT TYPE = "name"
NAME = "name" SIZE = "50"></TD></TR>
<TR><TD> E-mail: </TD><TD><INPUT TYPE = "name"
NAME = "name" SIZE = "50"></TD></TR>
<TR><TD> Улица: </TD><TD><INPUT TYPE = "name"
NAME = "street1" SIZE = "30"></TD></TR>
<TR><TD></TD><TD><INPUT TYPE = "name" NAME = "street2" SIZE = "30"></TD></TR>
<TR><TD> Город: </TD><TD><INPUT TYPE = "text"
NAME = "sity"
SIZE = "50"></TD></TR>
<TR><TD> Область: </TD><TD><INPUT TYPE = "text"
NAME = "state"
SIZE = "2"></TD></TR>
<TR><TD> Индекс: </TD><TD><INPUT TYPE = "text"
NAME = "zip"
SIZE = "10"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>