Форми

Огляд

Елементи керування формою Bootstrap розширюють наші стилі форми Rebooted за допомогою класів. Використовуйте ці класи, щоб увімкнути їхні налаштовані відображення для більш узгодженого відтворення в усіх браузерах і пристроях.

Обов’язково використовуйте відповідний typeатрибут для всіх введених даних (наприклад, emailдля адреси електронної пошти чи numberдля числової інформації), щоб скористатися новими елементами керування введенням, як-от підтвердження електронної пошти, вибір номера тощо.

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

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

Текст форми

Текст форми на рівні блоку або вбудованого рівня можна створити за допомогою .form-text.

Текст форми під входами можна стилізувати за допомогою .form-text. Якщо використовуватиметься елемент рівня блоку, верхнє поле додається для зручного відриву від входів вище.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

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

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Відключені форми

Додайте disabledлогічний атрибут до введення, щоб запобігти взаємодії користувача та зробити його легшим.

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

Додайте disabledатрибут до a, <fieldset>щоб вимкнути всі елементи керування всередині. Браузери розглядають усі власні елементи керування формою ( <input>, <select>та <button>елементи) всередині <fieldset disabled>як вимкнені, запобігаючи взаємодії з ними як клавіатурою, так і мишею.

Проте, якщо ваша форма також містить користувацькі елементи, подібні до кнопок, такі як <a class="btn btn-*">...</a>, їм буде надано лише стиль pointer-events: none, тобто вони все ще доступні для фокусування та керування за допомогою клавіатури. У цьому випадку ви повинні вручну змінити ці елементи керування, додавши tabindex="-1", щоб запобігти їхньому фокусу та aria-disabled="disabled"повідомити про їхній стан допоміжним технологіям.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <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>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Доступність

Переконайтеся, що всі елементи керування форми мають відповідні доступні назви, щоб їх призначення можна було передати користувачам допоміжних технологій. Найпростіший спосіб досягти цього — використовувати <label>елемент або — у випадку кнопок — включити достатньо описовий текст як частину <button>...</button>вмісту.

У ситуаціях, коли неможливо включити видимий <label>або відповідний текстовий вміст, існують альтернативні способи надання доступного імені, як-от:

• <label>елементи, приховані за допомогою .visually-hiddenкласу
• Вказівка ​​на існуючий елемент, який може діяти як мітка за допомогоюaria-labelledby
• Надання titleатрибута
• Явне встановлення доступного імені для елемента за допомогоюaria-label

Якщо жоден із них відсутній, допоміжні технології можуть вдатися до використання placeholderатрибута як резервного варіанту для доступного імені на <input>та <textarea>елементах. Приклади в цьому розділі надають кілька пропонованих підходів до конкретних випадків.

Хоча використання візуально прихованого вмісту ( .visually-hidden, aria-label, і навіть placeholderвміст, який зникає, коли в полі форми з’являється вміст) принесе користь користувачам допоміжних технологій, відсутність видимого тексту мітки все ще може бути проблематичною для деяких користувачів. Певна форма видимої мітки, як правило, є найкращим підходом як для доступності, так і для зручності використання.

Сасс

Багато змінних форми встановлюються на загальному рівні для повторного використання та розширення окремими компонентами форми. Ви найчастіше побачите їх як змінні $btn-input-*і .$input-*

Змінні

$btn-input-*змінні — це спільні глобальні змінні між нашими кнопками та компонентами нашої форми. Ви побачите, що вони часто перепризначаються як значення іншим змінним компонентів.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;