Формы

Для форм написано минимум стилей:

/* 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">. Который отделяется от элементов формы горизонтальной линией.

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 они будут одинаковой ширины во всех браузерах. И поменяют курсор при наведении на них, для наглядности.

Форма поиска

Данный универсальный код подставляет текст в форму поиска, который убирается при получении фокуса. И восстанавливается, если ничего введено не было.

<input
	onblur="this.value=(this.value=='')?this.title:this.value;"
	onfocus="this.value=(this.value==this.title)?'':this.value;"
	value="Search"
	title="Search"
	type="text"
/>