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

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

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

Типы форм в Bootstrap

При помощи различных классов вы можете оформить форму

  • вертикально
  • горизонтально
  • в виде строчных элементов (в одну строку)

Есть три основных правила для создания форм в бутстрапе:

  • используйте <form role="form"> для их создания
  • все элементы формы и их названия должны находиться в блоке <div class="form-group">, это требуется для оптимальных отступов между строками
  • добавляйте класс .form-control для элементов <input>, <textarea> и <select>

Вертикальная форма

По умолчанию любая форма будет оформлена как вертикально-ориентированная.

Bootstrap формы

Вот пример стандартной формы, созданной при помощи Bootstrap:

<form role="form">
 <div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email" placeholder="Введите email">
  <p class="help-block">Пример строки с подсказкой</p>
 </div>
 <div class="form-group">
  <label for="pass">Пароль</label>
  <input type="password" class="form-control" id="pass" placeholder="Пароль">
 </div>
 <div class="checkbox">
  <label><input type="checkbox"> Чекбокс</label>
 </div>
 <button type="submit" class="btn btn-success">Войти</button>
</form>

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

Строчная форма означает, что все её элементы и их названия (<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="Введите email">
 </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>

Bootstrap формы строчная форма

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

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

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

Вы можете использовать блочную вёрстку 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>

Bootstrap формы горизонтальная форма

Проверьте себя и вспомните, что означают классы .col-*-offset-* в Bootstrap.

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

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

<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.

Bootstrap формы чекбоксы

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

Используйте классы .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>
<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>

Bootstrap формы строчные чекбоксы

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

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

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

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

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

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

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

<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>

Bootstrap формы статическое поле

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

В 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>

Bootstrap формы контекстные поля

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

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

  • .input-sm
  • .input-lg

Bootstrap размеры полей в форме

Кнопки

О кнопках читайте в отдельном уроке: кнопки в Bootstrap.

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

14 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

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

http://fishtime.zp.ua

А как быть, если часть полей на форме нужно расположить вертикально, а справа напротив например подпись "Введите сообщение" и большое текстовое поле для него. То есть расположить поля в 2 колонки. Как это решить средствами Bootstrap? В голову приходит только разбить эту форму на 2 вертикальные формы.

Автор
Назар Токар

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

А как сделать, выпадающий список чтобы изначально был выбран допустим третий option?

Отличные уроки! хорошо, что наткнулась на них, начав изучать бутстрап с ноля.

Подскажите, а про навигацию есть подобный урок? Сделать пункты меню и даже выпадающий список получилось, а вот банально сместить весь ul вправо не вышло) решение, наверняка простецкое, только голова уже отказывается понимать..

Автор
Назар Токар

@Julia, смотрите все уроки в первом посте, про навигацию там тоже есть.

Здравствуйте, Назар

Пытаюсь во всем этом разобраться через готовые шаблоны, уже несколько дней ищу ответ на вопрос куда отправляется вся информация из этой формы?

нет никаких адресов, либо я не понимаю где их искать

отдельных php нету, в коде тоже нет ничего

Автор
Назар Токар

@Вячеслав, form action="script.php"

@Назар Токарь, прошел месяц, я так и не понял ничего.

form action то же самое что и php

ну в нем же нет никакой информации куда отправлять текст из формы по нажатию на button?

Автор
Назар Токар

вы о чем? Bootstrap это не серверный скрипт, это фреймворк, отвечающий за элементы на странице. А как будут эти элементы взаимодействовать с серверными скриптами, я не писал и это тема совершенно другая.

Ясн. оч понравились уроки. А по jQuery таких уроков хороших нету?

Автор
Назар Токар

@Павел, закончу с бутстрапом и буду следующие делать, у меня пока нет.

как сделать чекбоксы такого же стиля?

Автор
Назар Токар

@Павел, чекбоксы в bootstrap не меняются. Контейнер для чекбоксов собержит отступы для лучшего отображения, ему нужно присвоить класс checkbox:

<div class="checkbox">

// тут чекбокс

</div>