Forms / Формы

Forms / Формы

Простой пример

Индивидуальные формы управления автоматически получают глобальную стилизованность. Вся текстовая <input>,<textarea> и <select> элементы с и <textarea>установлены кwidth: 100%; по умолчанию. Преобразуйте этикетки и настройки в .form-groupдля оптимального интервала.

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Проверить меня
        </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

Не смешивайте группы форм с группами ввода

Добавьте .form-inline для выравнивания по левому краю и встроенному блоку управления для компактной планировки.

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

Добавьте .form-inline для выравнивания по левому краю и встроенному блоку управления для компактной планировки.

Необходимо настраивать ширину

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

Всегда добавляйте ярлыки

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

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Запомнить меня
        </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</button>
</form>

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

Используя Bootstrap предопределенные классы разметки для выравнивания лейблов и груп контролов форм в горизонтальном макете добавляя .form-horizontal в форму. Делая это изменяют поведение .form-group как ряд разметки, поэтому не нужен.row.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </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-default">Войти</button>
    </div>
  </div>
</form>

Поддерживаемые элементы управления

Примеры стандартных элементов управления поддерживаются на примере формы макета.

Ввод

Наиболее распространенные формы управления, текстовые поля ввода включают поддержку для всех типов HTML5 : text,text, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

Необходимо объявлять тип поля

Ввод будет полностью оформлен, если их type правильно декларирован.

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

Группы форм ввода

Для того, чтобы добавить интегрированный текст или кнопки до и / или после любой текстовый <input>, проверить вход группа компонентов .

Текстовая область

Форма управления, которая поддерживает несколько строк текста. Изменение rowsатрибута так необходимо.

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

Флажки и радиоприемники

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

По умолчанию (stacked)

<div class="checkbox">
  <label>
          <input type="checkbox" value="">
          Первая опция&mdash;выбирайте его, если вам нравится этот пункт
        </label>
</div>

<div class="radio">
  <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Первая опция&mdash;выбирайте его, если вам нравится этот пункт
        </label>
</div>
<div class="radio">
  <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Вторая опция - это несколько другое, и она отменяет выбор первой опции
        </label>
</div>

Формы для галочек в линию

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

Подборки

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


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

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

Статическое управление

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

   email@example.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Фокус ввода

Мы удаляем по умолчанию outline стили на формы управления и применяем box-shadow на его место для :focus.

Демо :focus состояние

Приведенный выше пример ввода использует пользовательские стили в нашей документации для демонстрации :focusсостояние на .form-control.

Неактивные вводы

Добавьте disabled атрибут на входе, чтобы предотвратить ввод пользователя и вызвать несколько иной вид.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Отключенные наборы полей

Добавьте disabled атрибут к <fieldset>, чтобы отключить все элементы управления в <fieldset> сразу.

Функциональности ссылок <a> не изменены

Этот класс только изменит внешний вид <a class="btn btn-default"> кнопок, а не их функциональность. Используйте JavaScript, чтобы отключить ссылки.

Совместимость кроссбраузерности

Bootstrap применят эти стили ко всем браузерам. Internet Explorer 9 и ниже в действительности не поддерживают аттрибут disabled на <fieldset>. Используйте измененный JavaScript для ограничения филдсета в этих браузерах.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Неактивный ввод</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Неактивный select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
            <input type="checkbox"> Не могу проверить это
          </label>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </fieldset>
</form>

Проверка состояний

Bootstrap включает в себя проверку стилей на ошибки, предупреждения и успех положений на формы управления. Для использования, добавьте .has-warning, .has-error, или .has-success к исходному элементу. Любой .control-label,.form-control и .help-block внутри этого элемента получит подтверждение стилей.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Ввод с предупреждением</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Ввод с ошибкой</label>
  <input type="text" class="form-control" id="inputError1">
</div>

С дополнительными иконками

Вы можете также добавить дополнительные значки обратной связи с добавлением экстра-класса и значка справа.

Иконки и группы ввода

При использовании значков обратной связи, необходимо знать, что может потребоваться ручное позиционирование длягрупп ввода with an add-on on the right. Adjust the right: 0; to an appropriate pixel value depending on the width of your addon.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Ввод с предупреждением</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Ввод с ошибкой</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Дополнительные значки также работают на горизонтальных и встроенных формах.

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Успешный ввод</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Успешный ввод</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Управление измерением

Задавать высоту с помощью классов .input-lg, и задавать ширину с использованием классов столбцовой разметки, как.col-lg-*.

Высота измерения

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Измерение столбца

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Текст справки

Блок уровня справки для формы управления.

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Translate »