Forms

Pregled

Bootstrap-ove kontrole obrasca proširuju naše Rebooted stilove obrasca sa klasama. Koristite ove klase da biste se uključili u njihove prilagođene prikaze za konzistentnije prikazivanje na svim pretraživačima i uređajima.

Obavezno koristite odgovarajući typeatribut na svim ulazima (npr. emailza adresu e-pošte ili numberza numeričke informacije) da biste iskoristili prednosti novijih kontrola unosa kao što su verifikacija e-pošte, odabir broja i još mnogo toga.

Evo kratkog primjera za demonstriranje stilova obrasca Bootstrapa. Nastavite čitati za dokumentaciju o potrebnim klasama, izgledu obrasca i još mnogo toga.

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

Tekst obrasca

Tekst obrasca na nivou bloka ili inline može se kreirati pomoću .form-text.

Tekst obrasca ispod unosa može biti stilizovan sa .form-text. Ako će se koristiti element na nivou bloka, dodaje se gornja margina radi lakšeg razmaka od ulaza iznad.

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

Umetnuti tekst može koristiti bilo koji tipičan inline HTML element (bilo da se radi o <span>, <small>, ili nečem drugom) s ništa više od .form-textklase.

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

Onemogućene forme

Dodajte disabledlogički atribut na ulaz kako biste spriječili korisničke interakcije i učinili da izgleda lakše.

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

Dodajte disabledatribut a <fieldset>da biste onemogućili sve kontrole unutar. Pretraživači tretiraju sve izvorne kontrole oblika ( <input>, <select>, i <button>elemente) unutar a <fieldset disabled>kao onemogućene, sprečavajući interakciju i tastature i miša na njima.

Međutim, ako vaš obrazac uključuje i prilagođene elemente poput gumba kao što je <a class="btn btn-*">...</a>, njima će biti dodijeljen samo stil pointer-events: none, što znači da se i dalje mogu fokusirati i koristiti pomoću tastature. U tom slučaju morate ručno modificirati ove kontrole dodavanjem tabindex="-1"kako biste spriječili da primaju fokus i aria-disabled="disabled"signalizirali njihovo stanje pomoćnim tehnologijama.

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

Pristupačnost

Osigurajte da sve kontrole obrasca imaju odgovarajuće dostupno ime kako bi se njihova svrha mogla prenijeti korisnicima pomoćnih tehnologija. Najjednostavniji način da se to postigne je korištenje <label>elementa, ili – u slučaju dugmadi – da se kao dio <button>...</button>sadržaja uključi dovoljno opisni tekst.

Za situacije u kojima nije moguće uključiti vidljiv <label>ili odgovarajući tekstualni sadržaj, postoje alternativni načini za pružanje pristupačnog imena, kao što su:

• <label>elementi skriveni pomoću .visually-hiddenklase
• Pokazujući na postojeći element koji može djelovati kao oznaka pomoćuaria-labelledby
• Pružanje titleatributa
• Eksplicitno postavljanje pristupačnog imena za element koristećiaria-label

Ako ništa od toga nije prisutno, pomoćne tehnologije mogu pribjeći korištenju placeholderatributa kao rezervnog za pristupačno ime <input>i <textarea>elemente. Primjeri u ovom dijelu pružaju nekoliko predloženih pristupa specifičnih za slučaj.

Iako će korištenje vizualno skrivenog sadržaja ( .visually-hidden, aria-label, pa čak i placeholdersadržaja, koji nestaje kada polje obrasca ima sadržaj) koristiti korisnicima pomoćne tehnologije, nedostatak vidljivog teksta oznake i dalje može biti problematičan za određene korisnike. Neki oblik vidljive oznake je općenito najbolji pristup, kako za pristupačnost tako i za upotrebljivost.

Sass

Mnoge varijable obrasca su postavljene na opštem nivou da se ponovo koriste i proširuju pojedinačnim komponentama obrasca. Ove ćete najčešće vidjeti kao $btn-input-*i $input-*varijable.

Varijable

$btn-input-*varijable su zajedničke globalne varijable između naših dugmadi i naših komponenti obrasca. Naći ćete ih često predodijeljene kao vrijednosti drugim varijablama specifičnim za komponente.

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