Настройка дизайна веб формы с применением CSS

Для того, чтобы иметь узнаваемые веб формы на вашем сайте нужно хоть немного знать CSS. Также можно воспользоваться готовыми сервисами или шаблонами. Одним из таких конструкторов является MyTaskHelper.ru (MTH).  В котором можно и без знания таблиц каскадных стилей настраивать дизайн формы. Но нас интересует именно возможность более профессиональной настройки внешнего вида виджетов.

В MTH для любого поля вы можете назначить свой CSS класс. Далее нужно будет создать и загрузить CSS файл с описанием этих классов в меню «Настроить и Встроить».

Для быстрого старта созданы системные классы, например hidden и two-column. Для того чтобы увидеть ваш виджет с новым файлом каскадных стилей нужно открыть страничку с формой. Ваш файл будет загружен на форму и изменения сразу вступят в силу. Даже если форма уже интегрирована в ваш сайт. Аналогично и для таблицы с данными. Если она встроенная в вашу веб страничку, то новые стили подгрузятся автоматически.

Чтобы установить для поля название стиля нужно перейти в меню «Формы» и нажать на соответствующей ссылке. Например, установить поля горизонтально можно заданием названия класса four-column. И, главное, не забыть установить такой же класс для остальных трех полей, которые будут расположены на одном уровне.

В меню «Настроить и Встроить» на вкладке «Дизайн» есть файловое поле, вот в него и загружается файл с описаниями классов. Используя данную практику можно прятать или показывать отдельные поля или группы полей. В таблице можно прятать формы поиска, хотя все это же можно сделать и встроенными опциями MyTaskHelper. Пожалуйста, будьте осторожны при использовании загрузки своих стилей. Так как при малейшей ошибке дизайн может измениться до неузнаваемости. Хотя все это поправимо путем удаления загруженных настроек.

Самое главное что есть возможно и для базы данных настраивать свой собственный внешний вид. Для этого просто нужно перейти на вкладку «База данных». Все остальное делается по аналогии. Вы можете задавать фон таблицы, шрифт текста. То как будут выглядеть строки и колонки таблицы данных. Также вы можете сделать оригинальную форму поиска или группировки.

Таким образом у вас есть несколько вариантов для настройки виджетов. Используя внутренние настройки, где нужно просто выбрать желаемый цвет или шрифт. Или же можно указать более продвинутые настройки и загрузить их в виде CSS. Таким образом вы сможете загружать фоновые картинки, свои кнопки и цвета.

Обсуждение (1)
  1. Igor:

    О, рад видеть сайт, которым активно пользуюсь. Действительно дизайн веб формы настраивается мышкой, а при желании и CSS.

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>