Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.
Из за этого многие верстальщики начинают верстать каждую форму по отдельности, давая им и их элементам различные стили, тем самым усложняя работу себе и тем людям, кто будет собирать эти макеты.
Далее, я расскажу о том, как это делаю я. Метод не претендует ни на уникальность, ни на новизну. Просто в момент когда я дошел до этого (перестал верстать каждую форму отдельно), верстка форм стала занимать намного меньше времени и решил поделиться этим, возможно кому-нибудь поможет.
В большинстве случаев можно определиться с именованием элементов и сверстать всего одну форму, затем видоизменять ее путем добавления классов, непосредственно элементу
Сразу оговорюсь, далее будет рассматриваться достаточно примитивный пример, да может быть несколько колонок чекбоксов или еще что то, но это мы рассматривать не будем, но допилить можно ;)
И так, немного подумав у нас получился примерно такой HTML код:
Немного поясню:
Теперь немного стилизуем нашу форму, при помощи css:
И посмотрим что получилось
Это наша основная форма, ее можно использовать например, для написания/редактирования статей
К примеру нам нужна форма с фиксированной шириной, для формы авторизации.
Добавим класс в css:
Теперь применим его к нашей форме.
Если нужна форма в виде сетки (label и элемент находятся на одной строке), еще немного допишем css (сразу для двух вариантов: label слева и справа):
Лейблы слева, лейблы справа
Но у вида сеткой есть свои минусы: работает только при фиксированной ширине формы и ее элементов или если задать размеры в процентах, но это не всегда подходит.
Как это решить средствами css, да еще и кроссбраузерно, я пока не знаю.
В итоге мы получили 1 шаблон формы и 4 (в данном примере) различных по структуре или размерам формы видоизмененные при помощи css.
Доработав пример можно стилизовать каждую форму отдельно, да и сделать формы других структур, но это уже по мере надобности, тут изложена только идея с примитивными примерами.
Надеюсь, кому нибудь пригодится.
Из за этого многие верстальщики начинают верстать каждую форму по отдельности, давая им и их элементам различные стили, тем самым усложняя работу себе и тем людям, кто будет собирать эти макеты.
Далее, я расскажу о том, как это делаю я. Метод не претендует ни на уникальность, ни на новизну. Просто в момент когда я дошел до этого (перестал верстать каждую форму отдельно), верстка форм стала занимать намного меньше времени и решил поделиться этим, возможно кому-нибудь поможет.
В большинстве случаев можно определиться с именованием элементов и сверстать всего одну форму, затем видоизменять ее путем добавления классов, непосредственно элементу
<form>
. В последствии мы сможем перенести перенести в шаблоны (шаблонизатор на выбор;)) элементы формы и в коде, том который будет собирать вам страницы, просто сказать «А нарисуй ка мне форму с таким-то набором элементов и добавь ей класс такой-то».Сразу оговорюсь, далее будет рассматриваться достаточно примитивный пример, да может быть несколько колонок чекбоксов или еще что то, но это мы рассматривать не будем, но допилить можно ;)
И так, немного подумав у нас получился примерно такой HTML код:
<form class="form" action="">
<fieldset class="field">
<label for="default-text">Some input[type=text]</label>
<input type="text" id="default-text" class="text" />
</fieldset>
<fieldset class="field choice">
<fieldset>
<input type="radio" id="default-radio" checked="checked" />
<label for="default-radio">Some input[type=radio]</label>
</fieldset>
<fieldset>
<input type="checkbox" id="default-checkbox" checked="checked" />
<label for="default-checkbox">Some input[type=checkbox]</label>
</fieldset>
</fieldset>
<fieldset class="field">
<label for="default-textarea">Some textarea</label>
<textarea class="text" rows="10" cols="40" id="default-textarea"></textarea>
</fieldset>
<fieldset class="field">
<label for="default-select">Some select</label>
<select id="default-select">
<option>variant 1</option>
<option>variant 2</option>
<option>variant 3</option>
</select>
</fieldset>
<fieldset class="field submit">
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
</fieldset>
</form>
* This source code was highlighted with Source Code Highlighter.
Немного поясню:
- У нашей универсальной формы есть класс
.form
, зачем, ведь она универсальная?, да просто мне так удобнее, можно и без него обойтись; - У некоторых
<fieldset>
есть класс, а у других нет: с классом.field
общий для группы элементов, так же могут быть и вложенные<fieldset>
, например в случае с чекбоксами, для которых нужен другой стиль, поэтому задать общий стиль для всех элементов данного типа, не всегда возможно.
Теперь немного стилизуем нашу форму, при помощи css:
.form {
margin: 1em 0;
}
.form .field {
margin: 0 0 .8em;
}
.form label {
display: block;
font-weight: 700
}
.form .text {
width: 100%;
padding: 3px 5px;
}
.form textarea {
height: 150px;
}
.form .choice label {
display: inline;
}
.form .submit {
text-align: center;
}
.form .submit input {
padding: 5px 10px;
}
* This source code was highlighted with Source Code Highlighter.
И посмотрим что получилось
Это наша основная форма, ее можно использовать например, для написания/редактирования статей
К примеру нам нужна форма с фиксированной шириной, для формы авторизации.
Добавим класс в css:
.form-w-300 {
width: 300px;
margin: 1em auto;
}
* This source code was highlighted with Source Code Highlighter.
Теперь применим его к нашей форме.
Если нужна форма в виде сетки (label и элемент находятся на одной строке), еще немного допишем css (сразу для двух вариантов: label слева и справа):
.grid-left-500,
.grid-right-500 {
width: 500px;
margin: 1em auto;
}
.grid-left-500 label,
.grid-right-500 label {
float: left;
width: 180px;
overflow: hidden;
}
.grid-right-500 label {
float: right;
}
.grid-left-500 .text,
.grid-right-500 .text {
float: right;
width: 300px;
}
.grid-right-500 .text {
float: left;
}
.grid-left-500 .choice {
margin-left: 185px;
}
.grid-right-500 .choice {
margin-left: 0;
padding-right: 185px;
}
.grid-left-500 .choice label,
.grid-right-500 .choice label {
float: none;
width: auto;
}
.grid-left-500 .submit {
text-align: left;
padding-left: 185px;
}
.grid-right-500 .submit {
text-align: left;
}
.grid-left-500 select {
margin-left: 5px;
}
.grid-right-500 select {
float: right;
margin-right: 5px;
}
* This source code was highlighted with Source Code Highlighter.
Лейблы слева, лейблы справа
Но у вида сеткой есть свои минусы: работает только при фиксированной ширине формы и ее элементов или если задать размеры в процентах, но это не всегда подходит.
Как это решить средствами css, да еще и кроссбраузерно, я пока не знаю.
В итоге мы получили 1 шаблон формы и 4 (в данном примере) различных по структуре или размерам формы видоизмененные при помощи css.
Доработав пример можно стилизовать каждую форму отдельно, да и сделать формы других структур, но это уже по мере надобности, тут изложена только идея с примитивными примерами.
Надеюсь, кому нибудь пригодится.