Formularze

Przegląd

Kontrolki formularzy Bootstrap rozszerzają nasze style formularzy Rebooted o klasy. Użyj tych klas, aby włączyć niestandardowe wyświetlacze, aby uzyskać bardziej spójne renderowanie w przeglądarkach i urządzeniach.

Pamiętaj, aby użyć odpowiedniego typeatrybutu we wszystkich danych wejściowych (np. w emailprzypadku adresu e-mail lub numberinformacji liczbowych), aby skorzystać z nowszych elementów sterujących, takich jak weryfikacja adresu e-mail, wybór numeru i inne.

Oto szybki przykład demonstrujący style formularzy Bootstrapa. Czytaj dalej, aby uzyskać dokumentację dotyczącą wymaganych klas, układu formularza i nie tylko.

<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>

Tekst formularza

Tekst formularza na poziomie blokowym lub wbudowanym można utworzyć za pomocą .form-text.

Tekst formularza poniżej danych wejściowych może być stylizowany za pomocą .form-text. Jeśli zostanie użyty element blokowy, dodawany jest górny margines, aby ułatwić odstępy od powyższych danych wejściowych.

<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>

W tekście śródliniowym można używać dowolnego typowego śródliniowego elementu HTML (czy to <span>, <small>, czy czegoś innego) z niczym więcej niż .form-textklasą.

<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>

Formularze dla osób niepełnosprawnych

Dodaj disabledatrybut logiczny do danych wejściowych, aby zapobiec interakcji użytkownika i sprawić, by wyglądał jaśniej.

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

Dodaj disabledatrybut do a, <fieldset>aby wyłączyć wszystkie znajdujące się w nim kontrolki. Przeglądarki traktują wszystkie natywne kontrolki formularzy ( <input>, <select>i <button>elementy) wewnątrz a <fieldset disabled>jako wyłączone, co zapobiega interakcji klawiatury i myszy na nich.

Jeśli jednak formularz zawiera również niestandardowe elementy przypominające przyciski, takie jak <a class="btn btn-*">...</a>, zostaną one przypisane tylko stylowi pointer-events: none, co oznacza, że ​​nadal można je aktywować i obsługiwać za pomocą klawiatury. W takim przypadku należy ręcznie zmodyfikować te kontrolki, dodając, tabindex="-1"aby uniemożliwić im odbieranie fokusu i aria-disabled="disabled"sygnalizować ich stan technologiom pomocniczym.

<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>

Dostępność

Upewnij się, że wszystkie kontrolki formularzy mają odpowiednią dostępną nazwę, aby można było przekazać ich cel użytkownikom technologii wspomagających. Najprostszym sposobem na osiągnięcie tego jest użycie <label>elementu lub – w przypadku przycisków – umieszczenie wystarczająco opisowego tekstu jako części <button>...</button>treści.

W sytuacjach, w których nie jest możliwe dołączenie widocznej <label>lub odpowiedniej treści tekstowej, istnieją alternatywne sposoby podania dostępnej nazwy, takie jak:

• <label>elementy ukryte za pomocą .visually-hiddenklasy
• Wskazując na istniejący element, który może działać jako etykieta za pomocąaria-labelledby
• Podanie titleatrybutu
• Jawne ustawienie dostępnej nazwy elementu za pomocąaria-label

Jeśli żaden z nich nie jest obecny, technologie wspomagające mogą uciekać się do używania placeholderatrybutu jako zastępczego dla dostępnej nazwy elementów <input>i . <textarea>Przykłady w tej sekcji przedstawiają kilka sugerowanych podejść specyficznych dla danego przypadku.

Chociaż korzystanie z wizualnie ukrytych treści ( .visually-hidden, aria-label, a nawet placeholdertreści, które znikają, gdy pole formularza zawiera treść) przyniesie korzyści użytkownikom technologii wspomagających, brak widocznego tekstu etykiety może nadal stanowić problem dla niektórych użytkowników. Pewna forma widocznej etykiety jest ogólnie najlepszym podejściem, zarówno pod względem dostępności, jak i użyteczności.

Sass

Wiele zmiennych formularzy jest ustawionych na poziomie ogólnym, aby można je było ponownie wykorzystywać i rozszerzać o poszczególne składniki formularza. Najczęściej zobaczysz je jako $btn-input-*i $input-*zmienne.

Zmienne

$btn-input-*zmienne są wspólnymi zmiennymi globalnymi pomiędzy naszymi przyciskami i komponentami formularza. Znajdziesz je często ponownie przypisywane jako wartości do innych zmiennych specyficznych dla komponentu.

$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;