Формс

Преглед

Боотстрап-ове контроле обрасца проширују наше поново покренуте стилове обрасца са класама. Користите ове класе да бисте омогућили њихове прилагођене приказе за конзистентније приказивање у прегледачима и уређајима.

Обавезно користите одговарајући typeатрибут на свим улазима (нпр. emailза адресу е-поште или numberза нумеричке информације) да бисте искористили предности новијих контрола уноса као што су верификација е-поште, избор броја и још много тога.

Ево кратког примера за демонстрацију стилова обрасца Боотстрапа. Наставите да читате документацију о потребним часовима, изгледу обрасца и још много тога.

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

Уметнути текст може да користи било који типичан инлине ХТМЛ елемент (било да се ради о <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атрибут у а <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;