Формы

Агляд

Элементы кіравання формамі 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;