Formos

Apžvalga

„Bootstrap“ formų valdikliai išplečia iš naujo paleistų formų stilius su klasėmis. Naudokite šias klases, kad pasirinktumėte tinkintus ekranus, kad naršyklėse ir įrenginiuose būtų nuoseklesnis atvaizdavimas.

Būtinai naudokite atitinkamą typeatributą visoms įvestims (pvz., emailel. pašto adresui arba numberskaitmeninei informacijai), kad galėtumėte pasinaudoti naujesniais įvesties valdikliais, pvz., el. pašto patvirtinimu, numerių pasirinkimu ir kt.

Štai trumpas pavyzdys, kaip parodyti „Bootstrap“ formų stilius. Skaitykite toliau, kad gautumėte dokumentus apie reikalingas klases, formų išdėstymą ir kt.

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

Formos tekstas

Bloko lygio arba eilutės lygio formos tekstą galima sukurti naudojant .form-text.

Formos tekstas žemiau įvesties gali būti stilizuotas naudojant .form-text. Jei bus naudojamas bloko lygio elementas, pridedama viršutinė paraštė, kad būtų lengviau atskirti tarpus nuo aukščiau pateiktų įėjimų.

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

Įterptajame tekste gali būti naudojamas bet koks įprastas eilutinis HTML elementas (ar tai būtų <span>, <small>, ar kažkas kita) be jokios .form-textklasės.

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

Neįgaliosios formos

Pridėkite disabledloginį atributą įvestyje, kad išvengtumėte naudotojo sąveikos ir ji atrodytų šviesesnė.

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

Pridėkite disabledatributą prie a <fieldset>, kad išjungtumėte visus valdiklius. Naršyklės visus savuosius formų valdiklius ( <input>, <select>, ir <button>elementus) <fieldset disabled>laiko išjungtais, užkertant kelią klaviatūros ir pelės sąveikai.

Tačiau jei formoje taip pat yra pasirinktinių mygtukų tipo elementų, pvz., <a class="btn btn-*">...</a>, jiems bus suteiktas tik stilius pointer-events: none, tai reiškia, kad juos vis tiek galima sufokusuoti ir valdyti naudojant klaviatūrą. Tokiu atveju turite rankiniu būdu modifikuoti šiuos valdiklius pridėdami tabindex="-1", kad jie nesufokusuotų ir aria-disabled="disabled"praneštų apie jų būseną pagalbinėms technologijoms.

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

Prieinamumas

Įsitikinkite, kad visi formos valdikliai turi atitinkamą pasiekiamą pavadinimą, kad pagalbinių technologijų naudotojai galėtų perteikti jų paskirtį. Paprasčiausias būdas tai pasiekti yra naudoti <label>elementą arba – mygtukų atveju – įtraukti pakankamai aprašomąjį tekstą kaip <button>...</button>turinio dalį.

Tais atvejais, kai neįmanoma įtraukti matomo <label>ar tinkamo teksto turinio, yra alternatyvių būdų, kaip vis tiek pateikti pasiekiamą pavadinimą, pvz.:

• <label>elementai, paslėpti naudojant .visually-hiddenklasę
• Nurodomas į esamą elementą, kuris gali veikti kaip etiketė naudojantaria-labelledby
• titleAtributo suteikimas
• Aiškus pasiekiamo elemento pavadinimo nustatymas naudojantaria-label

Jei nė vieno iš jų nėra, pagalbinės technologijos gali naudoti placeholderatributą kaip atsarginį pasiekiamo pavadinimo <input>ir <textarea>elementų pavadinimą. Šiame skyriuje pateiktuose pavyzdžiuose pateikiami keli siūlomi konkrečiam atvejui taikomi metodai.

Nors vizualiai paslėpto turinio ( .visually-hidden, aria-label, ir net placeholderturinio, kuris išnyksta, kai formos laukas turi turinį) naudojimas bus naudingas pagalbinių technologijų naudotojams, matomo etiketės teksto trūkumas kai kuriems vartotojams vis tiek gali kilti problemų. Tam tikros formos matomos etiketės paprastai yra geriausias būdas prieinamumo ir naudojimo požiūriu.

Sass

Daugelis formos kintamųjų yra nustatyti bendrame lygyje, kad būtų galima pakartotinai naudoti ir išplėsti atskirais formos komponentais. Dažniausiai juos matysite kaip $btn-input-*ir $input-*kintamuosius.

Kintamieji

$btn-input-*kintamieji yra bendri visuotiniai kintamieji tarp mūsų mygtukų ir formos komponentų. Pamatysite, kad jie dažnai perskirstomi kaip vertės kitiems komponentams būdingiems kintamiesiems.

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