Macromedia Dreamweaver MX

Использование таблиц и стилей для создания форм

Первая наша форма получилась не очень привлекательной на вид. Это есте­ственно: ведь нашей задачей было научиться создавать формы, а не осваи­вать хитрости их форматирования. Но теперь-то мы умеем создавать формы и хотели бы научиться делать их покрасивее. Для этого можно использовать мощнейшие средства — таблицы и стили. Таблицы позволят нам распола­гать элементы управления в формах так, как нам необходимо, а стили за­ставят их выглядеть так, как нам нужно.

Давайте переделаем нашу форму так, чтобы не стыдно было поместить ее в Сеть. Сохраним предыдущий, "некрасивый" вариант и создадим новую страницу под названием 16.3.htm. Поместим в нее форму и зададим значе­ния ее параметров, как у предыдущей формы, после чего на время оставим ее в покое.

Итак, что же мы хотим получить?

Давайте сделаем нашу новую форму в виде реальной печатной анкеты. Пусть она будет содержать две колонки: в левой будут помещаться надписи, в правой — элементы управления для ввода соответствующих данных. Такая форма будет неплохо выглядеть. Кроме того, у нас появилась фантазия сде­лать элементы управления инверсными — светлый текст на темном фоне.

Первое реализуется с помощью таблицы. Второе — посредством стилей.

Всего у нас шесть элементов управления (группу переключателей будем считать за один элемент управления, так же, как и пару кнопок Отправить (Submit) и Сброс (Reset)). Значит, нам понадобится таблица из шести строк и двух столбцов. Поместим такую таблицу в форму. Сделаем ей невидимую границу, а остальные параметры пока оставим без изменения. Можно также задать для таблицы значение ширины, отличное от 100%, либо убрать его совсем. Полученный результат показан на рис. 16.39.

Дальше уже совсем просто. В ячейки левого столбца помещаем надписи, а в ячейки правого — соответствующие им элементы управления. Вместо того чтобы создавать все заново, вы можете копировать надписи и элементы управления со страницы 16-2.htm, открыв ее в отдельном окне документа. В последнюю строку поместим кнопки: в левую ячейку — кнопку Отпра­вить, а в правую — Сброс. Чтобы как-то их выделить, можете для последней строки таблицы задать выравнивание по правому краю.

Готовая форма будет выглядеть так, как показано на рис. 16.40.

Как видите, форма, построенная на основе таблицы, получилась значитель­но компактнее нашей первой формы. В этом проявилось одно из главней­ших преимуществ таблиц — они позволяют представить объемные данные в удобном виде на небольшой площади.

Ну а уж задать "негативное" изображение для элементов управления проще простого! Создадим внутреннюю таблицу стилей и переопределим в ней с помощью специальных стилей теги <input> (поля ввода и переключатели) и <select> (раскрывающийся список). Как это делается, вы уже знаете.

Здесь есть одна тонкость. После того как вы переопределите теги <input> и <select>, изображение в окне документа не изменится. Почему-то Dream­weaver не отображает результат применения стилей к этим тегам. Поэтому, чтобы просмотреть окончательный результат, сохраните страницу 16.3.htm и откройте ее в Web-обозревателе. У вас должно получиться нечто, похожее нарис. 16.41.

Вот и все о формах и элементах управления.