Рано или поздно у любого программиста возникает желание унифицировать куски кода, используемые им повсеместно в проектах. Некоторые пишут сложнопонимаемые ими же самими "движки", некоторые ставят себе уже готовые CMS, в надежде что сообщество использующих эту CMS им потом поможет с ихними проблемами, причём бесплатно. Сам я например вообще не технологично поступаю, тупо складирую в директорию куски кода, которые мне показались интересными. Якобы потом, при возникновении проблем, я в этом хранилище найду вдохновение (в реальности, очень часто моей музой выступает гугль).

Я не очень в теме по поводу современного развития CMS-строения, но то что я видел раньше в админ частях (backend) этих систем, наводило меня на мысли что программист и верстальщик, это две большие противоположности. Я согласен что программисту не надо вдаваться в тонкости семантической разметки, но представления о том почему "таблички это зло", думаю неплохо было бы иметь. И второе, что меня постоянно удивляло, так это полное игнорирование вопроса внешнего вида backend-а системы. Да и правильно, зачем напрягаться, если это будет видеть от силы 5 человек - сотрудников заказчика, которым, кстати, проще на пальцах показать на какие кнопки тыкать, чем париться вопросами usability.

Дабы совсем уж не уходить от темы... Backend сайта (системы) это, интерфейс администратора (администраторов) сайта, для управления содержимым сайта. На 90% это формы с кучей input полей, select боксов, и radio бутонов. Практически любой backend имеет вот такую незатейливую форму:

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

<table>
<col width="39%" align="right">
<col width="1%" align="center">
<col width="60%" align="left">
<tr>
<th>Логин</th>
<td class="req">*</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<th>Пароль</th>
<td>&nbsp;</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Запомнить</th>
<td>&nbsp;</td>
<td>
<input class="i-checkbox" type="checkbox">
<em>Выберите, если вам лениво каждый раз
вводить логин с паролем для доступа</em>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="Вход">
</td>
</tr>
</table>

Кроме очевидной перегруженности кода кучей тегов, обратите внимание что мы еще даже не пробовали добавить тег <label for="...">. Это наверняка приведёт к еще большей сложности кода.

Неужели все так плохо?

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

Более перспективным мне видится другой способ оформления форм. Приблизительно похожий на Form Garden, но не полностью идентичный ему.

И это все?

Это только начало ;) Мало создать красивый HTML код, неплохо бы было предусмотреть механизм смены оформления backend-а, без переписывания этого самого HTML кода, потому как он у нас уже красивый. Понятно что внешний вид мы будем менять путем подключения разных CSS файлов.

Я предпочитаю подключать стили одним тегом link. Причём файл со стилями сначала подключается довольно необычный. В нем при помощи различных CSS хаков происходит фильтрация на старые броузеры, которым видается "академический дизайн", и броузеры хоть как то поддерживающие CSS 2.1

/* Apply for: FF 1.0.7+, Moz 1.6+,
NN 7.2+, Opera 7.23+, Safari 1.2+, Kon 3.4+ */
@import "../core.css" Screen;
@import "main.css" Screen;
/* Apply for: IE 5.5+, AOL 9.0 */
@import url ("../core.css");
@import url ("main.css");
/* No apply for:
- NN 4.78 and lower
- IE 5.0 and lower
- MAC IE 5.2 and lower
- Opera 6.0 and lower
*/

Такой подход очень часто критикуется верстальщиками, так как есть устойчивый стереотип что только для Internet Explorer необходимо писать какие то невероятные правила в CSS, достойные вынесения их в отдельный файл, и подключения через Conditional Comments. Я и сам поучаствовал в подобной дискуссии. Не знаю. Я привык уже обходится без отдельного файла для IE, а если и возникает необходимость описать в CSS какое то специфическое правило для IE, то пока мне StarHtmlHack хватает за глаза.

В приведённом примере CSS осуществляется подключение файла "core.css". Это файл в котором сбрасываются все дефолтовые стили броузера. На данный момент этот файл у меня имеет следующий вид:

html{
font-size:100.01%;
}
body{
width:100%;
font-size:62.5%; /* Resize text to 1em - 10px */
line-height:1;
font-family:Arial,sans-serif;
color:#000;
background-color:#fff;
}
input, select, textarea{
font-size:100%;
}
table{
empty-cells:show;
border-collapse:collapse;
border-spacing:2px;
border-color:#999;
font-size:100%;
}
table tr td, table tr th{
border-color:#999;
}
h1,h2,h3,h4,h5,h6,pre,code,kbd{
font-size:1em;
}
dl,ul,ol,li,dd,dt,h1,h2,h3,h4,h5,h6,pre,form,
body,html,p,blockquote,table,tr,td,th,fieldset,input{
margin:0;
padding:0;
list-style:none;
}
form label{
cursor:pointer;
}
fieldset{
border:none;
}
a img,:link img,:visited img{
border:none;
}
address,abbr{
font-style:normal;
}

Вообще то раньше я вообще использовал конструкцию:

*{
margin:0;
padding:0;
line-height:inherit;
font-style:normal;
}

но как оказалось, этого явно недостаточно для того что бы свести все отличия броузеров к общему знаменателю. (Upd: дополнительная инфа)

Заключение

Статья уже достаточно длинная получилась что бы просто привести рабочий пример использования всего вышенаписанного.

Ну и конечно же использовать такой способ оформления форм не обязательно только для backend-а сайта. На обычных страничках сайта тоже все прекрасно работает.