Один шаблон формы для всего проекта

Заметки - Фишки CSS

Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.

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

Далее, я расскажу о том, как это делаю я. Метод не претендует ни на уникальность, ни на новизну. Просто в момент когда я дошел до этого (перестал верстать каждую форму отдельно), верстка форм стала занимать намного меньше времени и решил поделиться этим, возможно кому-нибудь поможет.

В большинстве случаев можно определиться с именованием элементов и сверстать всего одну форму, затем видоизменять ее путем добавления классов, непосредственно элементу <form>. В последствии мы сможем перенести перенести в шаблоны (шаблонизатор на выбор;)) элементы формы и в коде, том который будет собирать вам страницы, просто сказать «А нарисуй ка мне форму с таким-то набором элементов и добавь ей класс такой-то».

Сразу оговорюсь, далее будет рассматриваться достаточно примитивный пример, да может быть несколько колонок чекбоксов или еще что то, но это мы рассматривать не будем, но допилить можно ;)