Самоучитель по креативному веб-дизайну. Книга 1, стр.134

Предположим, например, что на форме содержится многострочное текстовое

поле ввода, как показано на рис. 3.16, надпись для которого расположена в ниж —

нем левом углу поля (такое расположение имеет место по умолчанию при поме- щении текста и графики в один абзац).



Разделите текст надписи и элемент формы, поместив их в отдельные ячейки таблицы. Таким образом, вы получите возможность независимо выравнивать над — пись и поле ввода (элемент формы). Вставьте надпись в левый столбец таблицы,

а поле — в правый столбец. Затем укажите браузеру на необходимость выравнива — ния текста в левом столбце по верхнему краю, установив значение атрибута

vaiign дескриптора равным «top11 . После этого задайте значение атрибута

height обоих дескрипторов равным высоте многострочного тестового поля

в пикселях. В результате браузер выведет на экран текстовую надпись возле верх — него левого угла текстового поля, как показано на рис. 3.17.

16 2 Глава 3. HTML-формы





Помимо возможности выравнивания надписей и элементов формы, таблица мо — жет использоваться для визуальной группировки элементов формы. Предполо —

жим, например, что необходимо выровнять флажки, находящиеся под много — строчным полем ввода на рис. 3.14. Поскольку надпись каждого флажка представляет собой одну строку текста, надпись и флажок могут находиться в од — ной ячейке таблицы. (Если флажок содержит надпись, состоящую из нескольких строк текста, флажок и надпись нужно было бы помещать в отдельные ячейки, что позволило бы выравнивать флажок желаемым образом относительно его над —

писи, как ЭТО было сделано С наДПИСЬЮ «Сообщение:» И МНОГОСТРОЧНЫМ ПОЛем ввода в предыдущем практикуме.) Если поместить флажки, приведенные на рис.

13.17, в многострочную таблицу с несколькими столбцами, код которой находит —

ся ниже, можно расположить флажки, как показано на рис. 3.18.





Глава3.HTML-формы 16 3





Обратите внимание, что таблицы используются для выравнивания элементов формы, но сами остаются невидимыми. При создании формы иногда бывает

удобно установить значение атрибута border дескриптора формы рав — ным 1, что позволит увидеть ячейки таблицы. Затем, после выполнения вырав —

нивания элементов формы «сетку» таблицы можно снова отключить, установив значение атрибута border равным о.

Создание клавиши быстрой навигации по форме

с помощью дескриптора

Во введении в начале этой главы и предыдущих советах «надпись» возле эле — ментов формы ничем не отличалась от любого другого текста на Web-странице. Несмотря на то что вы имеете возможность поместить возле элемента формы простой текст, который будет служить надписью для элемента, объясняющей на —

значение текстового поля, переключателя или флажка, посетитель не может ис — пользовать буквы в таких надписях для перемещения по форме, установки «га- лочки» флажка или выбора переключателя. Для использования текста для

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 26.02.2011">Руководство по actionscript. часть 6, стр. 060
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 078
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.117
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.42
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.62
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 011
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.49
  • 26.02.2011">Руководство по actionscript. часть 6, стр. 054
  • 10.07.2010">Дизайн сайта определяется контентом
  • 16.11.2011">ОбзоркорпусаCarbideSeries 500R
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 012
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 121
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 116
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 009
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 070
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...