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 є братськими елементами на відміну від елементів <input>усередині a <label>. Це трохи докладніше, оскільки ви повинні вказати атрибути idand 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 і надання можливості керування вирівнюванням за допомогою утиліт пробілу та flexbox .
  • Елементи керування та групи вводу отримують width: auto, щоб замінити значення за замовчуванням Bootstrap width: 100%.
  • Елементи керування з’являються вбудовано лише у вікнах перегляду шириною принаймні 576 пікселів, щоб враховувати вузькі вікна перегляду на мобільних пристроях.

Можливо, вам знадобиться вручну змінити ширину та вирівнювання окремих елементів керування форми за допомогою утиліт інтервалів (як показано нижче). Нарешті, обов’язково завжди включайте <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у v3). Вбудований текст довідки можна гнучко реалізувати за допомогою будь-якого вбудованого елемента 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>елементи) всередині <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>'s.

Ми приховуємо значення за замовчуванням за <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> заголовка Content-LanguageHTTP .