Formalar

Gysgaça syn

“Bootstrap” -yň forma dolandyryşlary synplar bilen “ Rebooted” görnüş stilimizde giňelýär. Brauzerlerde we enjamlarda has yzygiderli görkezmek üçin özleşdirilen displeýlerini saýlamak üçin bu synplary ulanyň.

E-poçta barlamak, san saýlamak we başgalar ýaly täze giriş dolandyryşlaryndan peýdalanmak üçin typeähli girişlerde (meselem, emaile-poçta salgysy ýa-da san maglumatlary üçin) degişli atributdan peýdalanyň.number

“Bootstrap” -yň görnüşlerini görkezmek üçin çalt mysal. Gerekli sapaklar, forma düzülişi we ş.m. resminamalary okamak üçin dowam ediň.

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

Forma teksti

Blok derejeli ýa-da içerki görnüşli tekst teksti ulanyp döredilip bilner .form-text.

Girişleriň aşagyndaky forma teksti bilen düzülip bilner .form-text. Blok derejeli element ulanylsa, ýokardaky girişlerden aňsat aralyk üçin ýokarky margin goşulýar.

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

Içerki tekst , sapakdan başga hiç zat bolmadyk adaty HTML elementini (a <span>, <small>ýa-da başga bir zat) ulanyp biler..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>

Maýyp görnüşler

disabledUlanyjynyň özara täsiriniň öňüni almak we has ýeňil görünmek üçin girişde boolean atributyny goşuň .

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

Içindäki ähli dolandyryşlary öçürmek üçin disabledatribut goşuň . <fieldset>Brauzerler içindäki ähli ýerli dolandyryş dolandyryşlaryny ( <input>, <select>we elementleri) maýyp hasaplaýarlar, klawiaturanyň we syçanjygyň özara täsiriniň öňüni alýarlar.<button><fieldset disabled>

Şeýle-de bolsa, formaňyzda düwme ýaly adaty elementler hem bar <a class="btn btn-*">...</a>bolsa, bulara diňe bir stil berler pointer-events: none, ýagny klawiatura arkaly henizem ünsi jemläp bolýar. Bu ýagdaýda, tabindex="-1"ünsi almazlygy we aria-disabled="disabled"kömekçi tehnologiýalara ýagdaýyna signal bermek üçin goşmak bilen bu dolandyryşlary el bilen üýtgetmeli.

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

Elýeterlilik

Maksatlarynyň kömekçi tehnologiýalary ulanyjylara ýetirilmegi üçin ähli forma gözegçilikleriniň degişli elýeterli adynyň bardygyna göz ýetiriň. Muňa ýetmegiň iň ýönekeý usuly, bir elementi ulanmak , ýa-da düwmeler bolan ýagdaýynda, mazmunyň <label>bir bölegi hökmünde ýeterlik derejede düşündirişli teksti goşmakdyr.<button>...</button>

Görünýän ýa-da degişli tekst mazmunyny goşmak mümkin bolmadyk ýagdaýlar <label>üçin elýeterli ady bermegiň alternatiw usullary bar, meselem:

• <label>.visually-hiddensynpy ulanyp gizlenen elementler
• Ulanyş belligi hökmünde hereket edip biljek bar bolan elementi görkezmekaria-labelledby
• titleAýratynlyk bermek
• Ulanylýan elementde elýeterli ady aç-açan düzmekaria-label

Bularyň hiç biri ýok bolsa, kömekçi tehnologiýalar atlary we elementleri placeholderelýeterli at üçin yza gaýtmak hökmünde ulanyp bilerler. Bu bölümdäki mysallar teklip edilen, mysal üçin birnäçe çemeleşmäni üpjün edýär.<input><textarea>

Görkezilen gizlin mazmuny ( we .visually-hidden, aria-labelhatda placeholderbir mazmun bar bolansoň ýitip gidýän mazmun) ulanmak tehnologiýa ulanyjylaryna peýdaly bolar, görünýän bellik tekstiniň ýoklugy käbir ulanyjylar üçin henizem kynçylyk döredip biler. Görünýän etiketkanyň käbir görnüşi, elýeterlilik we peýdalylyk üçin adatça iň oňat çemeleşme.

Sass

Köp forma üýtgeýjileri aýratyn görnüş bölekleri tarapyndan gaýtadan ulanmak we giňeltmek üçin umumy derejede kesgitlenýär. Bulary köplenç üýtgeýänler $btn-input-*hökmünde görersiňiz.$input-*

Üýtgeýjiler

$btn-input-*üýtgeýjiler düwmelerimiz bilen forma komponentlerimiziň arasynda global üýtgeýjilerdir . Bulary ýygy-ýygydan beýleki komponentlere mahsus üýtgeýänlere baha hökmünde bellärsiňiz.

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