Source

Формы

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

Обзор

Элементы управления формы Bootstrap расширяют наши стили формы Rebooted с классами. Используйте эти классы, чтобы использовать их настраиваемые дисплеи для более согласованного рендеринга в браузерах и на устройствах.

Обязательно используйте соответствующий typeатрибут для всех входных данных (например, emailдля адреса электронной почты или numberчисловой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т. д.

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

Мы никогда не будем делиться вашей электронной почтой с кем-либо еще.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Элементы управления формой

Элементы управления текстовыми формами, такие как <input>s, <select>s и <textarea>s, стилизованы вместе с .form-controlклассом. Включены стили для общего вида, состояния фокуса, размеров и т. д.

Не забудьте изучить наши пользовательские формы для дальнейшего стиля <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Для файловых входов замените .form-controlдля .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Размеры

Установите высоту, используя такие классы, как .form-control-lgи .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Только для чтения

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

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Простой текст только для чтения

Если вы хотите, чтобы <input readonly>элементы в вашей форме были оформлены как обычный текст, используйте .form-control-plaintextкласс, чтобы удалить стиль поля формы по умолчанию и сохранить правильные поля и отступы.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Флажки и радио

Флажки и переключатели по умолчанию улучшены с помощью .form-checkединого класса для обоих типов ввода, который улучшает макет и поведение их HTML-элементов . Флажки предназначены для выбора одного или нескольких параметров в списке, а переключатели предназначены для выбора одного параметра из многих.

Отключенные флажки и переключатели поддерживаются, но для предоставления not-allowedкурсора при наведении родительского элемента <label>вам необходимо добавить disabledатрибут в файл .form-check-input. Атрибут disabled будет применять более светлый цвет, чтобы указать состояние ввода.

Использование флажков и переключателей поддерживает проверку форм на основе HTML и предоставляет краткие и доступные метки. Таким образом, наши <input>s и <label>s являются родственными элементами, в отличие от an <input>внутри a <label>. Это немного более подробно, так как вы должны указать idи forатрибуты, чтобы связать <input>и <label>.

По умолчанию (с накоплением)

По умолчанию любое количество флажков и радиостанций, которые являются непосредственными родственными элементами, будут располагаться вертикально друг над другом и располагаться на соответствующем расстоянии друг от друга с помощью .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

В соответствии

Сгруппируйте флажки или переключатели в одной горизонтальной строке, добавив .form-check-inlineв любой файл .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Без этикеток

Добавить .position-staticк входам внутри .form-check, которые не имеют текста метки. Не забудьте по-прежнему предоставлять какую-либо метку для вспомогательных технологий (например, с помощью aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Макет

Поскольку Bootstrap применяется display: blockпочти width: 100%ко всем нашим элементам управления формами, формы по умолчанию располагаются вертикально. Дополнительные классы могут использоваться для изменения этого макета в зависимости от формы.

Группы форм

Класс .form-group— это самый простой способ добавить некоторую структуру формам. Он предоставляет гибкий класс, который способствует правильной группировке меток, элементов управления, дополнительного текста справки и сообщений проверки формы. По умолчанию применяется только margin-bottom, но при необходимости он подбирает дополнительные стили .form-inline. Используйте его с <fieldset>s, <div>s или почти с любым другим элементом.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Сетка формы

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

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Строка формы

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

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Более сложные макеты также могут быть созданы с помощью системы сетки.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

Создавайте горизонтальные формы с сеткой, добавляя .rowкласс в группы форм и используя .col-*-*классы для указания ширины ваших меток и элементов управления. Не забудьте также добавить .col-form-labelк своим <label>s, чтобы они были вертикально центрированы с соответствующими элементами управления формой.

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

Радио
Флажок
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Размер этикетки горизонтальной формы

Обязательно используйте .col-form-label-smили .col-form-label-lgдля ваших <label>s или <legend>s, чтобы правильно следовать размеру .form-control-lgи .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Размер столбца

Как показано в предыдущих примерах, наша система сетки позволяет размещать любое количество .cols в пределах a .rowили .form-row. Они разделят доступную ширину поровну между собой. Вы также можете выбрать подмножество ваших столбцов, чтобы они занимали больше или меньше места, в то время как оставшиеся .cols поровну делят остальные с определенными классами столбцов, такими как .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Автоматический размер

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

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Затем вы можете снова смешать это с классами столбцов, зависящими от размера.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

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

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Встроенные формы

Используйте .form-inlineкласс для отображения набора меток, элементов управления формы и кнопок в одной горизонтальной строке. Элементы управления формы во встроенных формах немного отличаются от их состояний по умолчанию.

  • К элементам управления относятся display: flex, сворачивающие любые пробелы HTML и позволяющие вам обеспечить контроль выравнивания с помощью утилит spacing и flexbox .
  • Элементы управления и группы ввода получают width: autoпереопределение значения Bootstrap по умолчанию width: 100%.
  • Элементы управления отображаются встроенными только в окнах просмотра шириной не менее 576 пикселей, чтобы учесть узкие окна просмотра на мобильных устройствах.

Возможно, вам придется вручную настроить ширину и выравнивание отдельных элементов управления формы с помощью утилит для установки интервалов (как показано ниже). Наконец, обязательно всегда добавляйте a <label>к каждому элементу управления формой, даже если вам нужно скрыть его от посетителей, не использующих программы чтения с экрана, с помощью .sr-only.

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

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

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Альтернативы скрытым ярлыкам

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

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

Текст справки на уровне блоков в формах может быть создан с помощью .form-text(ранее известного как .help-blockв версии 3). Встроенный текст справки может быть гибко реализован с использованием любого встроенного HTML-элемента и служебных классов, таких как .text-muted.

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

Текст справки должен быть явно связан с элементом управления формы, к которому он относится с помощью aria-describedbyатрибута. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст справки, когда пользователь фокусируется или вводит элемент управления.

Текст справки под входными данными может быть оформлен с помощью .form-text. Этот класс включает display: blockи добавляет некоторое верхнее поле для легкого отступа от входных данных выше.

Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то <small>, <span>или что-то еще) с не чем иным, как служебным классом.

Должно быть 8-20 символов.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Отключенные формы

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

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

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

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Предостережение с якорями

По умолчанию браузеры будут рассматривать все собственные элементы управления формы ( <input>и <select>элементы <button>) внутри a <fieldset disabled>как отключенные, предотвращая взаимодействие с ними как с клавиатуры, так и с мышью. Однако, если ваша форма также включает <a ... class="btn btn-*">элементы, им будет присвоен только стиль pointer-events: none. Как отмечалось в разделе об отключенном состоянии кнопок (и, в частности, в подразделе об элементах привязки), это свойство CSS еще не стандартизировано и не полностью поддерживается в Opera 18 и более ранних версиях или в Internet Explorer 10. не мешает пользователям клавиатуры сфокусироваться на этих ссылках или активировать их. Поэтому, чтобы быть в безопасности, используйте собственный JavaScript для отключения таких ссылок.

Кроссбраузерная совместимость

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

Проверка

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

Мы настоятельно рекомендуем использовать настраиваемые стили проверки, так как собственные настройки браузера по умолчанию не сообщаются средствам чтения с экрана.

Как это работает

Вот как работает проверка формы с Bootstrap:

  • Проверка формы HTML осуществляется с помощью двух псевдоклассов CSS :invalidи :valid. Это относится к элементам <input>, <select>, и .<textarea>
  • Bootstrap привязывает стили :invalidи :validк родительскому .was-validatedклассу, обычно применяемому к <form>. В противном случае любое обязательное поле без значения отображается как недействительное при загрузке страницы. Таким образом, вы можете выбрать, когда их активировать (обычно после попытки отправки формы).
  • В качестве запасного варианта можно .is-invalidиспользовать .is-validклассы вместо псевдоклассов для проверки на стороне сервера . Они не требуют .was-validatedродительского класса.
  • Из-за ограничений в том, как работает CSS, мы не можем (в настоящее время) применять стили к элементу, <label>который находится перед элементом управления формы в DOM, без помощи пользовательского JavaScript.
  • Все современные браузеры поддерживают API проверки ограничений , набор методов JavaScript для проверки элементов управления формы.
  • Сообщения обратной связи могут использовать настройки браузера по умолчанию (разные для каждого браузера и не настраиваемые с помощью CSS) или наши пользовательские стили обратной связи с дополнительными HTML и CSS.
  • Вы можете предоставить настраиваемые сообщения о достоверности setCustomValidityв JavaScript.

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

Пользовательские стили

Для настраиваемых сообщений проверки формы Bootstrap вам необходимо добавить novalidateлогический атрибут в файл <form>. Это отключает всплывающие подсказки браузера по умолчанию, но по-прежнему предоставляет доступ к API проверки формы в JavaScript. Попробуйте отправить форму ниже; наш JavaScript перехватит кнопку отправки и передаст вам отзыв.

При попытке отправки вы увидите стили :invalidи , примененные к элементам управления формы.:valid

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Браузер по умолчанию

Не заинтересованы в настраиваемых сообщениях обратной связи проверки или написании JavaScript для изменения поведения формы? Все хорошо, вы можете использовать настройки браузера по умолчанию. Попробуйте отправить форму ниже. В зависимости от вашего браузера и ОС вы увидите немного другой стиль обратной связи.

Хотя эти стили обратной связи нельзя настроить с помощью CSS, вы все равно можете настроить текст обратной связи с помощью JavaScript.

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Сторона сервера

Мы рекомендуем использовать проверку на стороне клиента, но если вам требуется серверная сторона, вы можете указать недопустимые и действительные поля формы с помощью .is-invalidи .is-valid. Обратите внимание, что .invalid-feedbackэто также поддерживается этими классами.

Выглядит неплохо!
Выглядит неплохо!
@
Пожалуйста, выберите имя пользователя.
Укажите действительный город.
Укажите действительное состояние.
Укажите действительный почтовый индекс.
Вы должны согласиться перед отправкой.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Наши примеры форм показывают собственные текстовые <input>элементы выше, но стили проверки формы также доступны для наших настраиваемых элементов управления формы.

Пример недопустимого текста отзыва
Еще пример недопустимого текста отзыва
Пример недопустимого отзыва о пользовательском выборе
Пример отзыва о недопустимом пользовательском файле
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Подсказки

Если ваш макет формы позволяет это, вы можете поменять местами .{valid|invalid}-feedbackклассы для .{valid|invalid}-tooltipклассов, чтобы отобразить обратную связь проверки в стилизованной всплывающей подсказке. Убедитесь, что на нем есть родитель position: relativeдля позиционирования всплывающей подсказки. В приведенном ниже примере это уже есть в наших классах столбцов, но для вашего проекта может потребоваться альтернативная настройка.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Пользовательские формы

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

Флажки и радио

Каждый флажок и радио завернуты в <div>брат <span>для создания нашего пользовательского элемента управления и <label>для сопроводительного текста. Структурно это тот же подход, что и у нас по умолчанию .form-check.

Мы используем родственный селектор ( ~) для всех наших <input>состояний, например, для :checkedправильного оформления нашего пользовательского индикатора формы. В сочетании с .custom-control-labelклассом мы также можем стилизовать текст для каждого элемента в зависимости от <input>состояния.

Мы скрываем значение по умолчанию <input>с помощью opacityи используем .custom-control-labelдля создания нового пользовательского индикатора формы на его месте с помощью ::beforeи ::after. К сожалению, мы не можем создать пользовательский элемент только из элемента, <input>потому что CSS contentне работает с этим элементом.

В проверенных состояниях мы используем встроенные SVG-иконки base64 из Open Iconic . Это дает нам лучший контроль над стилем и позиционированием в браузерах и на разных устройствах.

Флажки

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Пользовательские флажки также могут использовать :indeterminateпсевдокласс, если он установлен вручную с помощью JavaScript (нет доступного HTML-атрибута для его указания).

Если вы используете jQuery, должно хватить чего-то вроде этого:

$('.your-checkbox').prop('indeterminate', true)

Радио

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

В соответствии

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Неполноценный

Пользовательские флажки и радио также можно отключить. Добавьте disabledлогический атрибут к , <input>и пользовательский индикатор и описание метки будут автоматически оформлены.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Выберите меню

Пользовательским <select>меню нужен только пользовательский класс, .custom-selectчтобы активировать пользовательские стили.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Атрибут multipleтакже поддерживается:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Как и sizeатрибут:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Файловый браузер

Ввод файла является самым грубым из всех и требует дополнительного JavaScript, если вы хотите связать их с функциональностью « Выбрать файл… » и выбранным текстом имени файла.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Мы скрываем файл по умолчанию <input>через opacityи вместо этого стилизуем файл <label>. Кнопка генерируется и позиционируется с помощью ::after. Наконец, мы объявляем widthи heightдля <input>правильного интервала для окружающего контента.

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

:lang()Псевдокласс используется для перевода текста «Обзор» на другие языки . Переопределите или добавьте записи в $custom-file-textпеременную Sass с соответствующим языковым тегом и локализованными строками. Английские строки можно настроить таким же образом. Например, вот как можно добавить испанский перевод (код испанского языка: es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Вот lang(es)в действии пользовательский ввод файла для испанского перевода:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Вам нужно будет правильно установить язык вашего документа (или его поддерева), чтобы отображался правильный текст. Это можно сделать с помощью атрибута элемента langили<html> HTTP- Content-Languageзаголовка среди других методов.