Создание форм

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

Настройки по умолчанию

Элементы <input>, <textarea> и <select> при добавлении к ним класса .form-control становятся блочными и занимают 100% ширины родительского блока.

Основные моменты при создании и оформлении формы представим в виде следующих этапов:

• Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
• Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс .form-control, чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента).
• Поместить каждую надпись (<label>) и элемент управления в контейнер <div>...</div> с классом .form-group. Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.

Вертикальная форма (по умолчанию)

Вертикальная форма - это макет формы, в которой её элементы распологаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом .form-group.

<form>
  <div class="form-group">
    <label for="inputEmail">Адрес email:</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Введите email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Пароль:</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Запомнить
    </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</button>
</form>

Пример

Адрес email:

Пароль:

Запомнить

Строчная форма

Строчная форма означает, что все её элементы и их названия (<label>) будут располагаться в одну строку с равнением к левому краю.

Обратите внимание: строчная форма будет отображаться как классическая на экранах размером менее 768 пикселей в ширину.

Единственное правило, которое превратит классическую форму в строчную: добавить класс .form-inline к тегу <form> В следующем примере пример создания строчной формы с двумя полями и кнопкой подтверждения:

<form role="form" class="form-inline">
 <div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email" placeholder="Введите >
 </div>
 <div class="form-group">
  <label for="pass">Пароль</label>
  <input type="password" class="form-control" id="pass" placeholder="Пароль">
 </div>
 <button type="submit" class="btn btn-success">Войти</button>
</form>

Пример

Email

Пароль

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

Такой вид формы значительно отличается синтаксисом от двух предыдущих. Есть два правила для создания горизонтальных форм в Bootstrap:

• добавить класс .form-horizontal к тегу <form>
• добавить класс .control-label ко всем элементам <label&ht;

Вы можете использовать блочную вёрстку Bootstrap для более тонкой настройки отображения форм. Вот пример кода горизональной формы:

<form class="form-horizontal">
 <div class="form-group">
  <label for="mail" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="mail" placeholder="Email">
  </div>
 </div>
 <div class="form-group">
  <label for="pass" class="col-sm-2 control-label">Пароль</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="pass" placeholder="Пароль">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
     <input type="checkbox"> Запомнить меня
    </label>
   </div>
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-success">Подтвердить</button>
  </div>
 </div>
</form>

Пример

Email

Пароль

Запомнить меня

Чекбоксы и радиокнопки

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

<div class="checkbox">
 <label>
  <input type="checkbox" value="check1">
  Обычный чекбокс, который можно отметить
 </label>
</div>
<div class="checkbox disabled">
 <label>
  <input type="checkbox" value="check2" disabled>
  Заблокированный чекбокс, не отмечается
 </label>
</div>

Пример

Обычный чекбокс, который можно отметить

Заблокированный чекбокс, не отмечается

И аналогичный пример для радиокнопок:

<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>
<div class="radio disabled">
  <label>
  <input type="radio" name="optionsRadios" id="radio3" value="option3">
  Третья смешная опция
 </label>
</div>

Пример

Первый элемент списка из радиокнопок, её можно выбирать

Вторая опция списка, заблокированная

Третья смешная опция

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

Строчные чекбоксы и радиокнопки

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

<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Пример

1 2 3

Или так

<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="radio3" value="option3"> 3
</label>

Пример

1 2 3

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

Здесь всё предельно просто: тегу <select> нужно назначить класс .form-control.

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Пример

1 2 3 4 5

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

<select class="form-control"multiple>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Пример

1 2 3 4 5

Статические надписи вместо полей

Поля формы можно заменять текстовыми элементами, для этого используется класс .form-control-static для элемента :

<form class="form-horizontal">
 <div class="form-group">
  <label class="col-sm-2 control-label">Электропочта</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>
 <div class="form-group">
  <label for="pass" class="col-sm-2 control-label">Пароль</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="pass" placeholder="Пароль">
  </div>
 </div>
</form>

Пример

Электропочта

email@example.com

Пароль

Контекстные классы

В Bootstrap есть три класса для оформления различных состояний полей в форме:

• успех, класс .has-success
• предупреждение, класс .has-warning
• ошибка, класс .has-error

Этот класс необходимо назначить элементу .form-group:

<div class="form-group has-success">
 <label class="control-label" for="succ">Поле без ошибок</label>
 <input type="text" class="form-control" id="succ">
</div>
<div class="form-group has-warning">
 <label class="control-label" for="warn">Поле с предупреждением</label>
 <input type="text" class="form-control" id="warn">
</div>
<div class="form-group has-error">
 <label class="control-label" for="err">Поле с ошибкой</label>
 <input type="text" class="form-control" id="err">
</div>
<div class="has-success">
 <div class="checkbox">
  <label>
  <input type="checkbox" id="check-succ" value="option1">
  Чекбокс без ошибок
 </label>
 </div>
</div>
<div class="has-warning">
 <div class="checkbox">
 <label>
  <input type="checkbox" id="check-warn" value="option1">
  чекбокс с предупреждением
  </label>
 </div>
</div>
<div class="has-error">
 <div class="checkbox">
  <label>
  <input type="checkbox" id="checkboxError" value="option1">
  Чекбокс с ошибкой
 </label>
 </div>
</div>

Пример

Поле без ошибок

Поле с предупреждением

Поле с ошибкой

Чекбокс без ошибок

чекбокс с предупреждением

Чекбокс с ошибкой

Размеры полей

Чтобы поменять размер элемента формы, ему можно назначить один из классов:

.input-sm .input-lg

<form>
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-lg" placeholder="Большой">
    </div>
    <div class="col-xs-6">
      <select class="form-control input-lg">
        <option>Большой - 1</option>
        <option>Большой - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control" placeholder="Средний">
    </div>
    <div class="col-xs-6">
      <select class="form-control">
        <option>Средний - 1</option>
        <option>Средний - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-sm" placeholder="Маленький">
    </div>
    <div class="col-xs-6">
      <select class="form-control input-sm">
        <option>Маленький - 1</option>
        <option>Маленький - 2</option>
      </select>
    </div>
  </div>
</form>

Пример

Большой - 1 Большой - 2

Средний - 1 Средний - 2

Маленький - 1 Маленький - 2