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

Оцените материал
(0 голосов)

Здравствуйте! Сегодня давайте разберемся как с помощью фреймворка Бутстрап можно создавать красивые адаптивные формы.  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">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</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 размеры полей в форме

 

Прочитано 1238 раз Последнее изменение Воскресенье, 04 декабря 2016 13:21
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+