Формалар

Обзор

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>

Inline текст класстан башка эч нерсеси жок каалаган типтүү 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атрибутун кошуңуз . <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форма талаасында мазмун болгондон кийин жок болуп кетүүчү мазмун) колдонуу менен жардамчы технология колдонуучуларына пайда алып келет, бирок көрүнүүчү энбелги текстинин жоктугу айрым колдонуучулар үчүн дагы эле көйгөй жаратышы мүмкүн. Көрүнүүчү энбелгилердин кандайдыр бир түрү жалпысынан жеткиликтүүлүк жана колдонуу үчүн эң жакшы ыкма.

Sass

Көптөгөн форма өзгөрмөлөрү жеке форма компоненттери тарабынан кайра колдонула турган жана кеңейтилүүчү жалпы деңгээлде орнотулган. Сиз буларды көбүнчө $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;