Shakllar

Umumiy koʻrinish

Bootstrap forma boshqaruvlari sinflar bilan qayta yuklangan shakl uslublarimizda kengaytiriladi. Brauzerlar va qurilmalarda yanada izchil renderlash uchun moslashtirilgan displeylarga kirish uchun ushbu sinflardan foydalaning.

E-pochtani tekshirish, raqam tanlash va boshqalar kabi yangi kiritish elementlaridan foydalanish uchun typebarcha kiritishlarda (masalan, emailelektron pochta manzili yoki raqamli maʼlumot uchun) tegishli atributdan foydalanganingizga ishonch hosil qiling .number

Bootstrap forma uslublarini namoyish qilish uchun qisqa misol. Kerakli sinflar, shakl tartibi va boshqalar bo'yicha hujjatlarni o'qishni davom eting.

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

Shakl matni

Blok darajasidagi yoki satrdagi shakl matni yordamida yaratilishi mumkin .form-text.

Shakl matni ostidagi kirishlar bilan uslublash mumkin .form-text. Agar blok darajasidagi element ishlatilsa, yuqoridagi kirishlar orasidagi masofani osonlashtirish uchun yuqori chegara qo'shiladi.

<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 matn har qanday oddiy inline HTML elementidan (u <span>, <small>, yoki boshqa narsa bo'lsin) .form-textsinfdan boshqa hech narsa bilan foydalanishi mumkin.

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

O'chirilgan shakllar

disabledFoydalanuvchi oʻzaro taʼsirini oldini olish va uni engilroq koʻrsatish uchun kiritishga mantiqiy atributni qoʻshing .

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

Barcha boshqaruv elementlarini o'chirish uchun atributni disableda ga qo'shing . <fieldset>Brauzerlar a ichidagi barcha mahalliy shakl boshqaruv elementlarini ( <input>, <select>, va <button>elementlarni) <fieldset disabled>o'chirib qo'ygan deb hisoblaydi va ulardagi klaviatura va sichqonchaning o'zaro ta'sirini oldini oladi.

Biroq, agar formangizda tugmachaga o'xshash maxsus elementlar mavjud <a class="btn btn-*">...</a>bo'lsa, ularga faqat uslubi beriladi pointer-events: none, ya'ni ular hali ham diqqat markazida bo'ladi va klaviatura yordamida ishlaydi. Bunday holda, tabindex="-1"diqqatni jalb qilishning oldini olish va aria-disabled="disabled"yordamchi texnologiyalarga ularning holatini bildirish uchun qo'shish orqali ushbu boshqaruv elementlarini qo'lda o'zgartirishingiz kerak.

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

Foydalanish imkoniyati

Barcha shakl boshqaruvlari mos keladigan nomga ega ekanligiga ishonch hosil qiling, shunda ularning maqsadi yordamchi texnologiyalar foydalanuvchilariga etkazilishi mumkin. Bunga erishishning eng oddiy usuli - elementdan foydalanish yoki tugmalar bo'lsa - kontentning <label>bir qismi sifatida etarlicha tavsiflovchi matnni kiritish .<button>...</button>

Ko'rinadigan yoki mos matn tarkibini kiritish imkoni bo'lmagan holatlarda <label>hali ham mavjud nom berishning muqobil usullari mavjud, masalan:

• <label>.visually-hiddensinf yordamida yashirin elementlar
• Yorliq sifatida ishlay oladigan mavjud elementga ishora qilisharia-labelledby
• titleAtributni taqdim etish
• Foydalanadigan elementga kirish mumkin bo'lgan nomni aniq belgilasharia-label

Agar ulardan hech biri mavjud bo'lmasa, yordamchi texnologiyalar placeholderatributdan foydalanish mumkin bo'lgan nom <input>va <textarea>elementlar uchun zaxira sifatida foydalanishi mumkin. Ushbu bo'limdagi misollar bir nechta tavsiya etilgan, vaziyatga xos yondashuvlarni taqdim etadi.

Vizual ravishda yashirin kontentdan ( .visually-hidden, aria-label, va hatto placeholdershakl maydonida kontent mavjud boʻlgandan keyin yoʻqolib ketadigan kontentdan) foydalanish yordamchi texnologiya foydalanuvchilariga foyda keltirsa-da, koʻrinadigan yorliq matnining yoʻqligi maʼlum foydalanuvchilar uchun hali ham muammoli boʻlishi mumkin. Ko'rinadigan yorliqning ba'zi shakllari, odatda, qulaylik va foydalanish uchun eng yaxshi yondashuvdir.

Sass

Ko'pgina shakl o'zgaruvchilari individual shakl komponentlari tomonidan qayta ishlatilishi va kengaytirilishi uchun umumiy darajada o'rnatiladi. Siz ularni ko'pincha $input-btn-*va $input-*o'zgaruvchilar sifatida ko'rasiz.

O'zgaruvchilar

$input-btn-*o'zgaruvchilar bizning tugmalarimiz va shakl komponentlarimiz o'rtasida umumiy global o'zgaruvchilardir. Siz ularni tez-tez boshqa komponentga xos o'zgaruvchilarga qiymat sifatida qayta tayinlangan holda topasiz.

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