Форми

Преглед

Контролите на формата на 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атрибутот boolean на влез за да спречите интеракции со корисникот и да изгледате полесни.

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

Додајте го disabledатрибутот на a <fieldset>за да ги оневозможите сите контроли во него. Прелистувачите ги третираат сите контроли на оригинални форми ( <input>, <select>, и <button>елементи) во a <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содржина, која исчезнува откако полето за формулар има содржина) ќе биде од корист за корисниците на помошната технологија, недостатокот на видлив текст на етикетата сè уште може да биде проблематичен за одредени корисници. Некоја форма на видлива ознака е генерално најдобриот пристап, и за пристапност и за употребливост.

Сас

Многу променливи на формата се поставени на општо ниво за повторно да се користат и да се прошират од поединечни компоненти на формата. Овие најчесто ќе ги гледате како $input-btn-*и $input-*променливи.

Променливи

$input-btn-*променливите се споделени глобални променливи помеѓу нашите копчиња и нашите компоненти на формата. Ќе ги најдете овие често преназначени како вредности на други променливи специфични за компонентите.

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