Форми

Преглед

Контролите за формуляри на Bootstrap разширяват нашите рестартирани стилове на формуляри с класове. Използвайте тези класове, за да изберете техните персонализирани дисплеи за по-последователно изобразяване в браузъри и устройства.

Уверете се, че използвате подходящ 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;