Pull to refresh

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

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

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

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

В большинстве случаев можно определиться с именованием элементов и сверстать всего одну форму, затем видоизменять ее путем добавления классов, непосредственно элементу <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.

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

Надеюсь, кому нибудь пригодится.
Tags:
Hubs:
+39
Comments 36
Comments Comments 36

Articles