Формы в Bootstrap 4 (form)

Формы в Bootstrap 4 (form)

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

Базовая форма

Используйте класс Bootstrap .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить базовое оформление и ширину элемента в 100%.

Так же, оберните лэйблы (<label>)и элементы управления формы внутри тега <fieldset> с помощью класса Bootstrap .form-group, применяемого для выставления оптимального расстояния между элементами. В качестве альтернативы fieldset вы можете использовать <div> или другой блоковый элемент.

Пример простой формы в Bootstrap 4:

<form action="">
  <fieldset class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="first_name">
  </fieldset>
  <fieldset class="form-group">
    <label for="last_name">Last Name</label>
    <input type="text" class="form-control" id="last_name">
  </fieldset>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

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

В предыдущем примере, элементы форм располагались вертикально (один под другим). Давайте рассмотрим пример, где элементы формы располагаются горизонтально.

блок 1

Используйте класс Bootstrap .form-inline, чтобы элементы формы отображались как inline-block и выравнивались по левому краю. Чтобы добавить пробел между элементами, используйте утилиту spacer (например, mr-sm-2).

<form action="" class="form-inline">
  <label class="mr-sm-2 mb-0" for="first_name">First Name</label>
  <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name">
  <label class="mr-sm-2 mb-0" for="last_name">Last Name</label>
  <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name">
  <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
</form>

Скрытые метки (label)

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

Здесь мы используем .sr-only, чтобы скрыть метки. Мы также добавляем атрибут-заполнитель placeholder, чтобы подсказывать пользователю, что вводить в конкретное поле.

<form action="" class="form-inline">
  <label class="mr-sm-2 mb-0 sr-only" for="first_name">First Name</label>
  <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" placeholder="First name">
  <label class="mr-sm-2 mb-0 sr-only" for="last_name">Last Name</label>
  <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" placeholder="Last name">
  <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
</form>

Горизонтальные метки (label)

Вы можете использовать сетку Bootstrap для расположения элементов форм и их меток (лэйблов) горизонтально. Просто укажите, сколько столбцов должен охватывать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждого столбца.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы расположить метку вертикально по середине, относительно элементов ввода текста.

<div class="container">
  <form action="">
    <div class="form-group row">
      <label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
      <div class="col-xs-9">
        <input type="text" class="form-control" id="first_name">
      </div>
    </div>
    <div class="form-group row">
      <label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
      <div class="col-xs-9">
        <input type="text" class="form-control" id="last_name">
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-xs-3 col-xs-9">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

Вы можете заменить .row на .form-row чтобы уменьшить отступы между столбцами и сделать форму более компактной.

Размеры элементов форм

Вы можете использовать .form-control-lg и .form-control-sm в Bootstrap 4 для увеличения или уменьшения размера элемента управления вводом (input, select).

<div class="form-group">
  <input type="text" class="form-control form-control-sm" placeholder="Малый размер">
</div>
<div class="form-group">
  <input type="text" class="form-control" id="last_name" placeholder="Размер по умолчанию">
</div>
<div class="form-group">
  <input type="text" class="form-control form-control-lg" placeholder="Большой размер">
</div>

Размер элементов label

Вы можете добавить .col-form-label-sm и .col-form-label-lg к вашим меткам, чтобы размер метки соответствовал элементу управления формы.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Малый размер</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Малый размер">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Размер по умолчанию</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="Размер по умолчанию">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Большой размер</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Большой размер">
    </div>
  </div>
</form>

Текст подсказки для элементов формы

Bootstrap 4 предоставляет класс .form-text, который можно использовать для обозначения текста подсказки. Вы можете комбинировать этот класс с служебными классами, такими как .text-muted или .text-danger.

Вам также следует использовать атрибут .aria-descriptionby, чтобы связать текст справки с элементом управления формы. Это гарантирует, что программы чтения с экрана смогут продиктовать текст подсказки, когда пользователь сосредоточится на элементе управления формы.

<label for="accountId">Поле формы</label>
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
<span id="helpAccountId" class="form-text text-muted">Текст подсказки или пояснения.</span>
блок 3

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

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

Ваш электронный адрес не будет опубликован.


*