===== Формы =====

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

<code css>
/* 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; }
</code>

Для группировки полей в ворме используется ''<fieldset>''(нижний отступ ''1em'') с надписями ''<legend>''. Шрифт в ''<legend>'' выделяется жирным начертанием у увелинным размером.

Шаблон для формы:

<code html>
<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>
</code>

Для каждой строчки используется конструкция:

<code html>
<div class="f-row">
	<label>Текст:</label>
	<div class="f-inputs"><input type="text" class="i-text" /></div>
</div>
</code>

Строчка разбивается на 2 части. В левой части текстовая метка ''label'' с шириной примерно 30%. В правой, ''<div class="f-inputs">'', непосредственно input-элементы.
Простейшая конструкция из 2-ух колонок.

Между ''<div class="f-row">'' задан нижний отступ в ''0.5em''.

Управляющие кнопки вынесены в ''<div class="f-row f-actions">''. Который отделяется от элемнтом формы горизонтальной линией.

===== input элементы =====

<code css>
/* 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; }
</code>

Для более менее нормального выравнивания по высоте для всех ''input'' элементов задано вертикальное выравнивание по центру ''input { vertical-align: middle; }'';

Текстовым полям ввода можно присваивать класс ''i-text'' для настройки внешнего вида, ширины, отступов и рамок.

Для радиокнопок или галочек(чекбаттонов?) применяется класс ''i-checkbox''.

Кнопки. С классом ''button'' они будут одинаковой ширины во всех браузерах. И поменяют курсор при наведении на них, для наглядности.


===== Форма поиска =====

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

<code html>
<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" />
</code>