Оформляем формы с Bootstrap

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

В тему: Урок по созданию собственной формы обратной связи

В целом выделяют следующие разновидности оформления:

Формы с вертикальной ориентацией элементов;
С располагающимися в строку элементами;
Горизонтально ориентированные формы.

Остановимся на них подробнее:

Оформление стандартных (вертикальных) форм

Синтаксис:

Чтобы все корректно работало все теги необходимо поместить внутрь <form role="form">…</form>
Отдельные группы тегов внутри form помещаются внутрь обертки <div class="form-group">…</div>
Для применения оформления к основным тегам формы (input, textarea, select) им присваивается класс .form-control

Если все сделано верно, то теги внутри form станут блочными и расширятся до размеров родительского контейнера.

Чтобы лучше понять давайте рассмотрим пример:

<form role="form">
 <div class="form-group">
    <input name="name" type="text"  class="form-control" placeholder="Имя"/>
    <p class="help-block">Введите имя на русском языке</p>
 </div>
 <div class="form-group">
    <label for="email">E-mail</label>
    <input name="email" type="email" class="form-control" placeholder="E-mail"/>
 </div>
 <div class="form-group">
   <textarea name="comment" class="form-control" placeholder="Сообщение"></textarea>
 </div>
 <div class="form-group">
    <input type="submit" class="btn btn-info" value="Отправить" />
 </div>
</form>

Как видим, мы получили ненавязчивое оформление input и textarea, лейблы внутри .form-group располагаются вблизи полей.

При желании мы можем добавлять подписи и подсказки внутри форм воспользовавшись классом .help-block тега <p>. Это можно применять внутри любых видов форм.

Для придания нормального вида input type="submit" мы воспользовались классами из урока о оформлении кнопок.

Строчные формы

Синтаксис:

Главному тегу формы присваивается .form-inline класс: <form role="form" class="form-inline">
Остальные требования аналогичны стандартным (см. выше).

Рассмотрим простейшую форму в которой элементы располагаются в строку:

<form role="form" class="form-inline">
   <div class="form-group">
      <label for="name">Имя</label>
      <input name="name" type="text"  class="form-control" placeholder="Имя"/>
   </div>
   <div class="form-group">
      <label for="email">E-mail</label>
      <input name="email" type="email" class="form-control" placeholder="E-mail"/>
   </div>
   <div class="form-group">
      <input type="submit" class="btn btn-info" value="Отправить" />
   </div>
</form>

Как можно заметить, наши поля и подписи полей теперь отображаются в строку и выровнены по левому краю. В целом теги внутри формы растягиваются до границ контейнера в котором находятся. При разрешении экрана менее 768 px начинают располагаться друг под другом.

Горизонтальные формы

Синтаксис:

К form присваивается соответствующий класс - .form-horizontal
К label добавляется класс .control-label
Для группировки полей по-прежнему присваиваем .form-group соответствующему диву

Чтобы форма выглядела более представительно можно воспользоваться классами относящимися к блочной верстке в Bootstrap:

<form role="form" class="form-horizontal">
   <div class="form-group">
      <label for="name" class="control-label col-sm-2">Имя</label>
	  <div class="col-sm-10">
         <input name="name" type="text"  class="form-control" placeholder="Имя"/>
	  </div>
   </div>
   <div class="form-group">
      <label for="email" class="control-label col-sm-2" >E-mail</label>
	  <div class="col-sm-10">
         <input name="email" type="email" class="form-control" placeholder="E-mail"/>
	  </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <input type="submit" class="btn btn-info" value="Отправить" />
      </div>
   </div>
</form>

Чекбоксы

Если нам необходимо выбрать из списка значений несколько, то мы прибегаем к помощи <input type="checkbox">.

Синтаксис:

Группа элементов относящихся к чекбоксу располагается внутри дива с соответствующим классом - .checkbox.

Сам инпут помещается внутрь тега <label>.

Чтобы сделать выбор чекбокса невозможным, ему необходимо присвоить атрибут disabled, при желании можно добавить такой же класс родительскому диву, это заблокирует не только саму кнопку выбора, а и сделает не активным текст кнопки.

В конечном счете у нас должна выйти следующая конструкция:

<div class="checkbox">
   <label>
      <input type="checkbox" value="check1">
      Активный чекбокс
   </label>
</div>
 
<div class="checkbox disabled">
   <label>
      <input type="checkbox" value="check2" disabled>
      Неактивный чекбокс
   </label>
</div>

Радиокнопки

Отличаются от чекбоксов только тем, что из перечня можно выбрать только один вариант. В остальном все правила оформления сохраняются, за вычетом того, что класс родительского дива меняется с .checkbox на .radio:

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="radio1" value="option1" checked>
      Активная радиокнопка
   </label>
</div>
 
<div class="radio">
   <label>
       <input type="radio" name="optionsRadios" id="radio22" value="option2" disabled>
       Неактивная кнопка
   </label>
</div>

Чекбоксы и радиокнопки расположенные в строку

Для того, чтобы расположить в линию несколько кнопок не нужно изобретать велосипед заново. Достаточно присвоить соответствующие классы .checkbox-inline и .radio-inline наему родительскому контейнеру:

<label class="checkbox-inline">
   <input type="checkbox" value="option1"> Чекбокс 1
</label>
<label class="checkbox-inline">
   <input type="checkbox" value="option2"> Чекбокс 2
</label>
<label class="checkbox-inline">
   <input type="checkbox" value="option3"> Чекбокс 3
</label>
 
<label class="radio-inline">
   <input type="radio" name="radio" value="option1"> Радио 1
</label>
<label class="radio-inline">
   <input type="radio" name=" radio " value="option2"> Радио 2
</label>
<label class="radio-inline">
   <input type="radio" name=" radio " value="option3"> Радио 3
</label>

Выпадающие списки

Один из самых незамысловатых разделов нашего урока. Для оформления селекту достаточно добавить .form-control :

<select class="form-control">
   <option>Первый пункт</option>
   <option>Второй пункт</option>
   <option>Третий пункт</option>
</select>

В случае же, когда мы хотим организовать список с отображением не одного, а нескольких полей достаточно прибегнуть к атрибуту multiple:

<select class="form-control" multiple>
   <option>Первый пункт</option>
   <option>Второй пункт</option>
   <option>Третий пункт</option>
</select>

Результат проделанных манипуляций будет следующим:

Оформляем поля с разными "состояниями"

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

Так, прибегнув к .has-success выделить, к примеру, верно заполненные поля в форме, а при помощи .has-error поля с ошибками. .has-warning может отмечать поле пароля при регистрации пользователя, когда вместо рекомендуемых требований к паролю он начинает вводить что-то простенькое.

В общем к чему их добавлять это уже другой вопрос, наше дело рассказать как это сделать:

<div class="form-group has-success">
   <label class="control-label" for="succ">Оформление success</label>
   <input type="text" class="form-control">
</div>
 
<div class="form-group has-warning">
   <label class="control-label" for="warn">Оформление warning</label>
   <input type="text" class="form-control">
</div>
 
<div class="form-group has-error">
   <label class="control-label" for="err">Оформление error</label>
   <input type="text" class="form-control">
</div>

Как мы видим, стилизуются не только поля, а и лейблы.

Для чекбоксов картина обстоит аналогичным образом:

<div class="has-success">
   <div class="checkbox">
      <label>
         <input type="checkbox" id="check-succ" value="option1">Оформление success
      </label>
   </div>
</div>
 
<div class="has-warning">
   <div class="checkbox">
      <label>
         <input type="checkbox" id="check-succ" value="option1">Оформление warning
      </label>
   </div>
</div>
 
<div class="has-error">
   <div class="checkbox">
      <label>
         <input type="checkbox" id="check-succ" value="option1">Оформление error
      </label>
   </div>
</div>

Изменение размеров полей

Присваивая полям формы классы .input-lg и .input-sm мы можем их делать больше и меньше соответственно. В данном случае я имею ввиду размер шрифта, паддинги и тд:

<div class="form-group">
   <input name="email" type="email" class="form-control input-lg" placeholder="E-mail"/>
</div>
<div class="form-group">
   <input name="email" type="email" class="form-control" placeholder="E-mail"/>
</div>
<div class="form-group">
   <input name="email" type="email" class="form-control input-sm" placeholder="E-mail"/>
</div>

Для работы с горизонтальными размерами форм можно использовать моменты из блочной верстки от Bootstrap:

<div class="row">
  <div class="col-xs-4">
     <input name="email" type="email" class="form-control input-lg " placeholder="E-mail"/>
  </div>
  <div class="col-xs-8">
     <input name="email" type="email" class="form-control input-lg" placeholder="E-mail"/>
  </div>
</div>

Добавление иконок полям

Воспользовавшись группирующим классом .input-group у родительского дива и спаном с классом .input-group-addon мы можем добавить иконку к нашему полю формы:

   <div class="input-group">
      <span class="input-group-addon">@</span>
      <input name="email" type="email" class="form-control" placeholder="E-mail"/>
   </div>

Подводя итоги

В уроке мы рассмотрели основные моменты связанные с оформлением форм в Bootstrap. Насколько удобен этот инструмент в применении на практике решать уже Вам.

Если же Вы еще не знаете какие возможности предлагает данный html/css фреймворк, то предлагаю вам просмотреть вводный урок этого курса.