===== Формы ===== Для форм написано минимум стилей: /* Content Form ------------------------------ */ .content form { } .content fieldset { margin-bottom: 1em; border: none; } .content legend { margin-top: -1px; padding-bottom: 1em; font-size: 1.1em; font-weight: bold; } .content .f-row { overflow: hidden; margin-bottom: .5em; } .content label { float: left; text-align: right; width: 25.99%; padding: 0 2%; } .content .f-inputs { padding-left: 30%; } .f-actions { padding-top: 1em; border-top: 1px solid #ccc; } Для группировки полей в ворме используется ''
''(нижний отступ ''1em'') с надписями ''''. Шрифт в '''' выделяется жирным начертанием у увелинным размером. Шаблон для формы:
Информация о пользователе
Дополнительная информация
Для каждой строчки используется конструкция:
Строчка разбивается на 2 части. В левой части текстовая метка ''label'' с шириной примерно 30%. В правой, ''
'', непосредственно input-элементы. Простейшая конструкция из 2-ух колонок. Между ''
'' задан нижний отступ в ''0.5em''. Управляющие кнопки вынесены в ''
''. Который отделяется от элемнтом формы горизонтальной линией. ===== input элементы ===== /* Inputs ------------------------------ */ input { vertical-align: middle; } .i-checkbox { margin-top: 3px; } .i-text { width: 200px; padding: 1px; font: 1em sans-serif; } .button { padding: 0 .25em; width: auto; overflow: visible; cursor: pointer; } Для более менее нормального выравнивания по высоте для всех ''input'' элементов задано вертикальное выравнивание по центру ''input { vertical-align: middle; }''; Текстовым полям ввода можно присваивать класс ''i-text'' для настройки внешнего вида, ширины, отступов и рамок. Для радиокнопок или галочек(чекбаттонов?) применяется класс ''i-checkbox''. Кнопки. С классом ''button'' они будут одинаковой ширины во всех браузерах. И поменяют курсор при наведении на них, для наглядности. ===== Форма поиска ===== Данный универсальный код подставляет текст в форму поиска, который убирается при получении фокуса. И восстанавливается, если ничего введено не было.