Для форм написано минимум стилей:
/* 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; }
Для группировки полей в ворме используется <fieldset>(нижний отступ 1em) с надписями <legend>. Шрифт в <legend> выделяется жирным начертанием у увелинным размером.
Шаблон для формы:
<form> <fieldset> <legend>Информация о пользователе</legend> <div class="f-row"> <label>Имя:</label> <div class="f-inputs"><input type="text" class="i-text" /></div> </div> <div class="f-row"> <label>Фамилия:</label> <div class="f-inputs"><input type="text" class="i-text" /></div> </div> </fieldset> <fieldset> <legend>Дополнительная информация</legend> <div class="f-row"> <label>Беру работу на дом:</label> <div class="f-inputs"><input type="checkbox" class="i-checkbox" /></div> </div> <div class="f-row"> <label>Комментарий:</label> <div class="f-inputs"><textarea class="i-text" rows="4" cols="50"></textarea></div> </div> </fieldset> <div class="f-row f-actions"> <div class="f-inputs"><input type="submit" value="Сохранить" class="button" /></div> </div> </form>
Для каждой строчки используется конструкция:
<div class="f-row"> <label>Текст:</label> <div class="f-inputs"><input type="text" class="i-text" /></div> </div>
Строчка разбивается на 2 части. В левой части текстовая метка label с шириной примерно 30%. В правой, <div class="f-inputs">, непосредственно input-элементы. Простейшая конструкция из 2-ух колонок.
Между <div class="f-row"> задан нижний отступ в 0.5em.
Управляющие кнопки вынесены в <div class="f-row f-actions">. Который отделяется от элемнтом формы горизонтальной линией.
/* 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 они будут одинаковой ширины во всех браузерах. И поменяют курсор при наведении на них, для наглядности.
Данный универсальный код подставляет текст в форму поиска, который убирается при получении фокуса. И восстанавливается, если ничего введено не было.
<input id="searchInput" onblur="this.value=(this.value=='')?this.title:this.value;" onfocus="this.value=(this.value==this.title)?'':this.value;" value="Search" title="Search" name="search" type="text" />