Содержание

Bootstrap – Forms (формы) — ИТ Шеф

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

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

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

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

<!-- HTML-форма, оформленная с помощью стилей Bootstrap 4 -->
<form method="post" action="#" autocomplete="off">
  <div>
    <label for="email">Email адрес</label>
    <input name="email" type="email" placeholder="Введите email">
  </div>
  <div>
    <label for="password">Password</label>
    <input name="password" type="password" placeholder="Введите пароль">
  </div>
  <div>
    <input type="checkbox">
    <label name="save" for="save">запомнить меня</label>
  </div>
  <button type="submit">Войти</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>
    <label for="inputEmail">Адрес email:</label>
    <input type="email" placeholder="Введите email">
  </div>
  <div>
    <label for="inputPassword">Пароль:</label>
    <input type="password" placeholder="Введите пароль">
  </div>
  <div>
    <label>
      <input type="checkbox"> Запомнить
    </label>
  </div>
  <button type="submit">Войти</button>
</form>

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

Горизонтальная форма — это форма, в которой надписи и элементы управления находящиеся в одной группе (

<div>. ..</div>) располагаются на одной строке.

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

  • Добавить класс .form-horizontal к элементу form;
  • Поместить элементы формы, которые должны располагаться в одной строке, в контейнер <div>...</div> и добавить к нему класс .form-group
  • Кроме этого этим элементам, т.е. тем которые будут располагаться в одной строке, необходимо задать ширину с помощью классов системы сетки Twitter Bootstrap 3;
  • Добавить класс .control-label к элементам label.
<form>
  <div>
    <label for="inputEmail">Адрес email:</label>
    <div>
      <input type="email" placeholder="Введите email">
    </div>
  </div>
  <div>
    <label for="inputPassword">Пароль:</label>
    <div>
      <input type="password" placeholder="Введите пароль">
    </div>
  </div>
  <div>
    <div>
      <div>
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
  <div>
    <div>
      <button type="submit">Войти</button>
    </div>
  </div>
</form>

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

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

<form>
  <div>
    <label for="inputEmail">Email</label>
    <input type="email" placeholder="Email">
  </div>
  <div>
    <label for="inputPassword">Пароль</label>
    <input type="password" placeholder="Пароль">
  </div>
  <div>
    <label><input type="checkbox"> Запомнить</label>
  </div>
  <button type="submit">Войти</button>
</form>

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

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

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

Если вам нужно поместить обычный текст рядом с элементом <label>

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

<form>
  <div>
    <label for="inputEmail">Email</label>
    <div>
      <p>[email protected]</p>
    </div>
  </div>
  <div>
    <label for="inputPassword">Пароль</label>
    <div>
      <input type="password" placeholder="Пароль">
    </div>
  </div>
  <div>
    <div>
      <div>
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
  <div>
    <div>
      <button type="submit">Войти</button>
    </div>
  </div>
</form>

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

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

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

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

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

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

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

<form>
  <div>
    <div>
      <input type="text">
    </div>
    <div>
      <input type="text">
    </div>
    <div>
      <input type="text">
    </div>
  </div>
  <br />
  <div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <textarea></textarea>
    </div>
  </div>
  <br />
  <div>
    <div>
      <select>
        <option>Выбор</option>
      </select>
    </div>
    <div>
      <select>
        <option>Выбор</option>
      </select>
    </div>
    <div>
      <select>
        <option>Выбор</option>
      </select>
    </div>
  </div>
</form>

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

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

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

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

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

Для этого:

  • Поместите текст или иконку внутри тега <span>, имеющего класс .input-group-addon. А затем контейнер <span> поместите перед или после элемента <input>
  • Поместите элемент <span> и элемент ввода <input> внутри контейнера <div> и примените к нему класс .input-group
<form>
  <div>
    <span>@</span>
    <input type="text" placeholder="Имя пользователя">
  </div>
  <br />
  <div>
    <input type="text">
    <span>.00</span>
  </div>
  <br />
  <div>
    <span>$</span>
    <input type="text">
    <span>. 00</span>
  </div>
</form>

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

<form>
    <div>
        <div>
          <div>
            <span>
              <input type="checkbox">
            </span>
            <input type="text">
          </div>
        </div>
        <div>
          <div>
            <span>
              <input type="radio">
            </span>
            <input type="text">
          </div>
        </div>
      </div>
</form>

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

<form>
  <div>
    <div>
      <div>
        <span>
          <button type="button">Вперед!</button>
        </span>
        <input type="text">
      </div>
    </div>
    <div>
      <div>
        <input type="text">
        <span>
          <button type="button">Вперед!</button>
        </span>
      </div>
    </div>
  </div>
</form>
Создание кнопок, с выпадающим меню

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

<form>
  <div>
    <div>
      <div>
        <div>
          <button type="button" data-toggle="dropdown">
            Действие <span></span>
          </button>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
        <input type="text">
      </div>
    </div>
    <div>
      <div>
        <input type="text">
        <div>
          <button type="button" data-toggle="dropdown">
            Действие <span></span>
          </button>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</form>
Создание группы кнопок, поделенных на сегменты

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

<form>
  <div>
    <div>
      <div>
        <div>
          <button tabindex="-1" type="button">Действие</button>
          <button tabindex="-1" data-toggle="dropdown" type="button">
            <span></span>
            <span>Toggle Dropdown</span>
          </button>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li></li>
            <li><a href="#">Отдельная сслыка</a></li>
          </ul>
        </div>
        <input type="text">
      </div>
    </div>
    <div>
      <div>
        <input type="text">
        <div>
          <button tabindex="-1" type="button">Действие</button>
          <button tabindex="-1" data-toggle="dropdown" type="button">
            <span></span>
            <span>Toggle Dropdown</span>
          </button>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</form>

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

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

<div>
  <div>
    <!-- Форма Bootstrap, содержащая элемент для поиска по сайту -->
    <form role="search">
      <div>
        <input type="text" placeholder="">
        <span>
          <button type="button">
            <i></i>
          </button>
        </span>
      </div>
    </form><!-- Конец формы -->
  </div>
</div>

Bootstrap Бутстрап Формы

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

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

Элементы управления формы автоматически получают некоторый глобальный стиль с помощью Bootstrap:

Все текстовые <input> , <textarea> и <select> элементы с классом .form-control имеют ширину 100%.

Макеты форм начальной загрузки

Bootstrap предоставляет три типа макетов форм:

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

Стандартные правила для всех трех макетов форм:

  • Перенос меток и элементов управления формы в <div> (требуется для оптимального интервала)
  • Добавить класс .form-control ко всем текстовым <input> , <textarea> и <select> элементам

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

Email:

Password:

Remember me

В следующем примере создается вертикальная форма с двумя полями ввода, одним флажком и кнопкой Submit:

Пример

<form action=»/action_page. php»>
  <div>
    <label for=»email»>Email address:</label>
    <input type=»email»>
  </div>
  <div>
    <label for=»pwd»>Password:</label>
    <input type=»password»>
  </div>
  <div>
    <label><input type=»checkbox»> Remember me</label>
  </div>
  <button type=»submit»>Submit</button>
</form>

Bootstrap Встроенная форма

Email:

Password:

Remember me

В встроенной форме все элементы являются встроенными, выровненными по левому краю, а метки — рядом.

Примечание: это относится только к формам в видовых экранах, которые по крайней мере 768px в ширину!

Дополнительное правило для встроенной формы:

  • Добавить класс .form-inline к <form> элементу

В следующем примере создается встроенная форма с двумя полями ввода, один флажок и одна кнопка отправки:

Пример

<form action=»/action_page. php»>
  <div>
    <label for=»email»>Email address:</label>
    <input type=»email»>
  </div>
  <div>
    <label for=»pwd»>Password:</label>
    <input type=»password»>
  </div>
  <div>
    <label><input type=»checkbox»> Remember me</label>
  </div>
  <button type=»submit»>Submit</button>
</form>

Совет: Если вы не включили метку для каждого входа, читатели экрана будут иметь проблемы с вашими формами. Можно скрыть метки для всех устройств, за исключением программ чтения с экрана, с помощью .sr-only класса:

Пример

<form action=»/action_page.php»>
  <div>
    <label for=»email»>Email address:</label>
    <input type=»email»>
  </div>
  <div>
    <label for=»pwd»>Password:</label>
    <input type=»password»>
  </div>
  <div>
    <label><input type=»checkbox»> Remember me</label>
  </div>
  <button type=»submit»>Submit</button>
</form>

Загрузочная горизонтальная форма

Email:

Password:

Remember me

Горизонтальная форма означает, что метки выровнены рядом с полем ввода (горизонтально) на больших и средних экранах. На маленьких экранах (767пкс и ниже) он преобразуется в вертикальную форму (метки помещаются поверх каждого входа).

Дополнительные правила для горизонтальной формы:

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

Совет: Используйте стандартные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальном макете.

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

 

Пример

<form action=»/action_page.php»>
  <div>
    <label for=»email»>Email:</label>
    <div>
      <input type=»email» placeholder=»Enter email»>
    </div>
  </div>
  <div>
    <label for=»pwd»>Password:</label>
    <div>
      <input type=»password» placeholder=»Enter password»>
    </div>
  </div>
  <div>
    <div>
      <div>
        <label><input type=»checkbox»> Remember me</label>
      </div>
    </div>
  </div>
  <div>
    <div>
      <button type=»submit»>Submit</button>
    </div>
  </div>
</form>

❮ Назад Дальше ❯

PHP\CSS\JS\HMTL Editor

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Bootstrap Forms

❮ Предыдущая Далее ❯

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

Элементы управления формы автоматически получают некоторые глобальные стили с помощью Bootstrap:

Все текстовые ,

Попробуйте сами »

Флажки Bootstrap

Вариант 1

Вариант 2

Вариант 3 список предустановленных параметров.

Следующий пример содержит три флажка. Последний параметр отключен:

Пример


 


 


 

Попробуйте сами »

Используйте класс .checkbox-inline , если вы хотите, чтобы флажки отображались на та же строка:

Опция 1 Вариант 2 Вариант 3

Пример



< label>Вариант 3

Попробуйте сами »

Радиокнопки Bootstrap

Вариант 1

Вариант 2

Вариант 3

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

Следующий пример содержит три переключателя. Первый вариант отмечен по умолчанию, а последний параметр отключен:

Пример


 


 


 

Попробуйте сами »

Используйте класс .radio-inline , если вы хотите, чтобы переключатели отображались в одной строке:

Опция 1 Вариант 2 Вариант 3

Пример



Попробуйте сами »

Bootstrap Select List

Выберите список (выберите один): 1234
Список множественного выбора (удерживайте ctrl или Shift (или перетащите мышью), чтобы выбрать более одного): 12345

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

Следующий пример содержит раскрывающийся список (список выбора):

Пример


 
 

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery Tops

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.