- •Компоновка и дизайн html - форм
- •1. Использование дескриптора перевода строки
- •Разбиение полей на отдельные строки
- •2. Использование для выравнивания форм дескриптора отформатированного текста
- •3. Использование html-таблиц для выравнивания форм
- •4.Использование дескриптора абзаца для разделения частей формы
- •5. Использование дескрипторов списков для дизайна и компоновки форм
- •6. Использование дескрипторов упорядоченных списков для нумерации полей ввода
- •7. Компоновка и дизайн html – форм с помощью флажков и переключателей
Лабораторная работа №6
Компоновка и дизайн html - форм
Цель и содержание: познакомить студентов с основными принципами компоновки и дизайна HTML – форм, изучить основные методы дизайна форм.
Теоретическое обоснование:
Формы могут быть легко читаемыми и занимать мало места, но могут быть и очень сложными. При увеличении сложности формы надо внимательнее следить за ее компоновкой. Следует думать о том, как соотнести заголовки с соответствующими полями ввода и как облегчить прочтение формы пользователями и ее дальнейшего использования. В большинстве случаев никто из пользователей не хочет связываться с длинными, трудными для понимания формами, поэтому следует приложить усилия к тому, чтобы независимо от сложности форм их можно было легко использовать при разработке Web – приложений.
1. Использование дескриптора перевода строки
При разметке HTML - документов обычно устанавливают переход элементов (слов) с одной строки на другую. Это удобно при выводе текста, но может серьезно затруднить чтение формы пользователем. В тех случаях, когда надо переместить текст на следующую строку, самым простым решением является использование дескриптора перевода строки <BR>
Разбиение полей на отдельные строки
Для размещения двух полей в HTML - форме, содержащей информацию о пользователе, например, поля имени и адреса электронной почты, можно разместить следующим образом.
Пример 1 - разбиения полей на отдельные строки.
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы перевода строки</Н1>
<FORM>
Имя: <INPUT NAME ="name" SIZE="30">
Адрес электронной почты: <INPUT NAME ="email" SIZE =:"40">
</FORM>
</BODY>
</HTML>
При компоновке форм с помощью примера 1 поле для ввода имени пользователя и комментарий к полю адрес электронной почты будут выведены на одной строке, что затрудняет ее чтение пользователем.
Для того чтобы разместить эти поля на разных строчках и сделать форму более удобными для понимания пользователем, необходимо между ними поместить дескриптор <BR>.
Пример 2 - разбиения полей на отдельные строки (с переводом строки)
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы перевода строки</Н1>
<FORM>
Имя: <INPUT NAME ="name" SIZE="30">
<BR>
Адрес электронной почты: <INPUT NAME ="email" SIZE =:"40">
</FORM>
</BODY>
</HTML>
Помещение между двумя полями формы дескриптора <BR> приводит к тому, что броузер независимо от ширины экрана, размещает второе поле на следующей строке.
При использовании дескриптора <SELECT> ширина временного меню на экране напрямую связана с размером слов в его элементах. Если уменьшить размер слов, то можно на небольшом пространстве уместить больше элементов выбора.
При работе с большими текстовыми полями ввода или с полем <TEXTAREA> проще разместить сопроводительный текст над полем ввода, а затем разбить различные области на абзацы.
Например, если поле ввода текстовой строки или описание поля слишком длинное, то располагать их рядом некрасиво. Если требуется оставить место для комментариев, то проще и красивее разместить описание поля над областью ввода текста, что позволяет зрительно увеличить область ввода.
Пример 3 – большое поле ввода текста
<HTML>
<HEAD>
<ТIТLЕ>Компоновка и дизайн формы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Дескрипторы перевода строки</Н1>
<FORM>
Введите новое название строки сообщения: <BR>
<INPUT NAME ="name" SIZE = "30">
<HR>
Ваши комментарии: <BR>
< TEXTAREA ROWS = "6" COLS = "70"> </TEXTAREA>
</FORM>
</BODY>
</HTML>