MyTetra Share
Делитесь знаниями!
Bootstrap – Forms (формы)
04.04.2019
10:44
Автор: Александр Мальцев
Текстовые метки: bootstrap, css, html, формы
Раздел: Компьютер - Программирование - HTML и CSS - Bootstrap

Содержание:


  • Обзор компонента Forms
  • Создание форм в Bootstrap
  • Вертикальная форма (по умолчанию)
  • Горизонтальная форма (.form-horizontal)
  • Создание формы, с расположением элементов в одну строку
  • Создание статических элементов управления формы
  • Изменение высоты элементов <input> и <select>
  • Изменение размеров элементов <input>, <textarea>, <select> с помощью сетки Bootstrap 3
  • Дополнительные элементы управления Twitter Bootstrap
  • Создание расширенного элемента управления <input>
  • Создание кнопок, с выпадающим меню
  • Создание группы кнопок, поделенных на сегменты
  • Примеры форм Bootstrap


В этой статье рассмотрим компонент фреймворка Bootstrap 3 и 4 Forms. Данный компонент предназначен для оформления HTML форм.

Обзор компонента Forms

Компонент Forms – это набор стилей (CSS), которые предназначены для оформления HTML форм. Добавление стилей к форме и её элементам осуществляется посредством классов.

Пример формы, оформленной с помощью стилей Bootstrap:


<!-- HTML-форма, оформленная с помощью стилей Bootstrap 4 -->

<form method="post" action="#" autocomplete="off">

<div class="form-group">

<label for="email">Email адрес</label>

<input name="email" type="email" class="form-control" id="email" placeholder="Введите email">

</div>

<div class="form-group">

<label for="password">Password</label>

<input name="password" type="password" class="form-control" id="password" placeholder="Введите пароль">

</div>

<div class="form-group form-check">

<input type="checkbox" class="form-check-input" id="save">

<label name="save" class="form-check-label" for="save">запомнить меня</label>

</div>

<button type="submit" class="btn btn-primary">Войти</button>

</form>


При создании форм с использованием Bootstrap или не только обязательно задавайте всем элементам input соответствующее значение атрибута type. Например, полям, предназначенным для ввода электронного адреса, устанавливайте email, полям, используемым для ввода числовых данных – number и т.д.

Правила корректного создания форм в Bootstrap:

  • Поместить каждую группу элементов (например, input и связанный с ним label) в элемент div с классом form-group. Этот класс добавляет нижние отступы к группам элементов. Кроме этого данный класс также добавляет стили к некоторым элементам формы, чтобы обеспечить их корректное отображение на различных устройствах.
  • Добавить к каждому текстовому элементу управления формы input, select и textarea класс form-control. Данный класс добавляет к элементам формы стили визуального оформления, оформление, когда он получает фокус, размеры и многое другое.

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

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

Глобальные стили представляют собой определённые CSS правила, которые определяют внешний вид элементов управления на веб-странице. Эти стили элементы управления получают автоматически, и веб-разработчику их явно задавать не требуется.

В Twitter Bootstrap 3 основная задача для веб-разработчика в основном сводится в добавлении необходимых классов для элементов управления, форм и контейнеров.

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

  • Указать вид формы. В 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>


Горизонтальная форма (.form-horizontal)

Горизонтальная форма - это форма, в которой надписи и элементы управления находящиеся в одной группе (<div class="form-group">...</div>) располагаются на одной строке.

Принцип создания горизонтальной формы:

  • Добавить класс .form-horizontal к элементу form;
  • Поместить элементы формы, которые должны распологаться в одной строке, в контейнер <div>...</div> и добавить к нему класс .form-group
  • Кроме этого этим элементам, т.е. тем которые будут располагаться в одной строке, необходимо задать ширину с помощью классов системы сетки Twitter Bootstrap 3;
  • Добавить класс .control-label к элементам label.


<form class="form-horizontal">

<div class="form-group">

<label for="inputEmail" class="col-xs-2 control-label">Адрес email:</label>

<div class="col-xs-10">

<input type="email" class="form-control" id="inputEmail" placeholder="Введите email">

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="col-xs-2 control-label">Пароль:</label>

<div class="col-xs-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<div class="checkbox">

<label><input type="checkbox"> Запомнить</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<button type="submit" class="btn btn-default">Войти</button>

</div>

</div>

</form>



Создание формы, с расположением элементов в одну строку

Для создание формы с расположением элементов в одну строку, необходимо добавить Bootstrap класс .form-inline к элементу <form>. Такие формы можно создавать только для окон шириной не менее 768px.

<form class="form-inline">

<div class="form-group">

<label class="sr-only" for="inputEmail">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

<div class="form-group">

<label class="sr-only" 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-primary">Войти</button>

</form>

Вышеприведенный пример будет выглядеть примерно так:

Примечание: Вы можете скрывать элемент <label> с помощью класса .sr-only.


Создание статических элементов управления формы

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


<form class="form-horizontal">

<div class="form-group">

<label for="inputEmail" class="control-label col-xs-2">Email</label>

<div class="col-xs-10">

<p class="form-control-static">admin@itchief.ru</p>

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="control-label col-xs-2">Пароль</label>

<div class="col-xs-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Пароль">

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<div class="checkbox">

<label><input type="checkbox"> Запомнить</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<button type="submit" class="btn btn-primary">Войти</button>

</div>

</div>

</form>


Вышеприведенный пример будет выглядеть примерно так:



Изменение высоты элементов <input> и <select>

С помощью классов Bootstrap .input-lg и .input-sm Вы можете контролировать высоту элементов <input> и <select>.


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


Вышеприведенный пример будет выглядеть примерно так:


Изменение размеров элементов <input>, <textarea>, <select> с помощью сетки Bootstrap 3

Вы также можете изменить размеры элементов управления формы с помощью задания ширины, в виде количества колонок сетки Twitter Bootstrap. Для этого, необходимо поместить элементы управления формы (<input>, <textarea>, <select>) в контейнер, или применить классы сеток Bootstrap 3 прямо на них.


<form>

<div class="row">

<div class="col-xs-3">

<input type="text" class="form-control">

</div>

<div class="col-xs-4">

<input type="text" class="form-control">

</div>

<div class="col-xs-5">

<input type="text" class="form-control">

</div>

</div>

<br />

<div class="row">

<div class="col-xs-3">

<textarea class="form-control"></textarea>

</div>

<div class="col-xs-4">

<textarea class="form-control"></textarea>

</div>

<div class="col-xs-5">

<textarea class="form-control"></textarea>

</div>

</div>

<br />

<div class="row">

<div class="col-xs-3">

<select class="form-control">

<option>Выбор</option>

</select>

</div>

<div class="col-xs-4">

<select class="form-control">

<option>Выбор</option>

</select>

</div>

<div class="col-xs-5">

<select class="form-control">

<option>Выбор</option>

</select>

</div>

</div>

</form>



Выше приведенный пример будет выглядеть примерно так:


Дополнительные элементы управления Twitter Bootstrap

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

Создание расширенного элемента управления <input>

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

Для этого:

  • Поместите текст или иконку внутри тега <span>, имеющего класс .input-group-addon. А затем контейнер <span> поместите перед или после элемента <input>
  • Поместите элемент <span> и элемент ввода <input> внутри контейнера <div> и примените к нему класс .input-group


<form>

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" class="form-control" placeholder="Имя пользователя">

</div>

<br />

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-addon">.00</span>

</div>

<br />

<div class="input-group">

<span class="input-group-addon">$</span>

<input type="text" class="form-control">

<span class="input-group-addon">.00</span>

</div>

</form>



Вышеприведенный пример будет выглядеть примерно так:



Вы, так же, можете расширить элемент управления <input>, поместив перед ним флажок или переключатель.


<form>

<div class="row">

<div class="col-xs-6">

<div class="input-group">

<span class="input-group-addon">

<input type="checkbox">

</span>

<input type="text" class="form-control">

</div>

</div>

<div class="col-xs-6">

<div class="input-group">

<span class="input-group-addon">

<input type="radio">

</span>

<input type="text" class="form-control">

</div>

</div>

</div>

</form>


Вышеприведенный пример будет выглядеть примерно так:



Кроме этого, Вы можете расширить элемент управления <input>, поместив перед ним или после него кнопки. Кнопки необходимо заключить внутри контейнера <span> и применить класс .input-group-btn вместо .input-group-addon.


<form>

<div class="row">

<div class="col-xs-6">

<div class="input-group">

<span class="input-group-btn">

<button class="btn btn-default" type="button">Вперед!</button>

</span>

<input type="text" class="form-control">

</div>

</div>

<div class="col-xs-6">

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

<button class="btn btn-default" type="button">Вперед!</button>

</span>

</div>

</div>

</div>

</form>


Вышеприведенный пример будет выглядеть примерно так:



Создание кнопок с выпадающим меню

Вы можете также создать кнопки, с выпадающим меню.


<form>

<div class="row">

<div class="col-xs-6">

<div class="input-group">

<div class="input-group-btn">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

Действие <span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">Действие</a></li>

<li><a href="#">Другое действие</a></li>

<li class="divider"></li>

<li><a href="#">Отдельная ссылка</a></li>

</ul>

</div>

<input type="text" class="form-control">

</div>

</div>

<div class="col-xs-6">

<div class="input-group">

<input type="text" class="form-control">

<div class="input-group-btn">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

Действие <span class="caret"></span>

</button>

<ul class="dropdown-menu pull-right">

<li><a href="#">Действие</a></li>

<li><a href="#">Другое действие</a></li>

<li class="divider"></li>

<li><a href="#">Отдельная ссылка</a></li>

</ul>

</div>

</div>

</div>

</div>

</form>


Вышеприведенный пример будет выглядеть примерно так:



Создание группы кнопок, поделенных на сегменты

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

<form>

<div class="row">

<div class="col-xs-6">

<div class="input-group">

<div class="input-group-btn">

<button tabindex="-1" class="btn btn-default" type="button">Действие</button>

<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu">

<li><a href="#">Действие</a></li>

<li><a href="#">Другое действие</a></li>

<li class="divider"></li>

<li><a href="#">Отдельная сслыка</a></li>

</ul>

</div>

<input type="text" class="form-control">

</div>

</div>

<div class="col-xs-6">

<div class="input-group">

<input type="text" class="form-control">

<div class="input-group-btn">

<button tabindex="-1" class="btn btn-default" type="button">Действие</button>

<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu pull-right">

<li><a href="#">Действие</a></li>

<li><a href="#">Другое действие</a></li>

<li class="divider"></li>

<li><a href="#">Отдельная ссылка</a></li>

</ul>

</div>

</div>

</div>

</div>

</form>


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



Примеры форм Bootstrap

Форма поиска для сайта:

  1. <div class="container">
  2. <div class="row">
  3. <!-- Форма Bootstrap, содержащая элемент для поиска по сайту -->
  4. <form role="search">
  5. <div class="input-group">
  6. <input type="text" class="form-control" placeholder="">
  7. <span class="input-group-btn">
  8. <button class="btn btn-info" type="button">
  9. <i class="glyphicon glyphicon-search"></i>
  10. </button>
  11. </span>
  12. </div>
  13. </form><!-- Конец формы -->
  14. </div>
  15. </div>


 
MyTetra Share v.0.52
Яндекс индекс цитирования