Obrasci

Pregled

Bootstrapove kontrole obrazaca proširuju naše Rebooted stilove obrazaca s klasama. Upotrijebite ove klase da biste se uključili u njihove prilagođene prikaze za dosljednije prikazivanje na svim preglednicima i uređajima.

Obavezno upotrijebite odgovarajući typeatribut na svim unosima (npr. emailza adresu e-pošte ili numberza numeričke informacije) kako biste iskoristili prednosti novijih kontrola unosa kao što su potvrda e-pošte, odabir broja i više.

Evo kratkog primjera za demonstraciju stilova obrasca Bootstrapa. Nastavite čitati za dokumentaciju o potrebnim razredima, izgledu obrazaca i više.

<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 razini bloka ili na razini inline može se stvoriti pomoću .form-text.

Tekst obrasca ispod unosa može se stilizirati s .form-text. Ako će se koristiti element na razini bloka, dodaje se gornja margina za jednostavno odvajanje od gornjih unosa.

<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čni umetnuti HTML element (bio to <span>, <small>, ili nešto drugo) samo s .form-textklasom.

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

Onesposobljeni oblici

Dodajte disabledbooleov atribut na unos kako biste spriječili interakcije korisnika i učinili da izgleda svjetlije.

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

Dodajte disabledatribut u <fieldset>da biste onemogućili sve unutarnje kontrole. Preglednici tretiraju sve izvorne kontrole obrasca ( <input>, <select>, i <button>elementi) unutar <fieldset disabled>kao onemogućene, sprječavajući interakcije tipkovnice i miša na njima.

Međutim, ako vaš obrazac uključuje i prilagođene elemente nalik na gumbe kao što je <a class="btn btn-*">...</a>, njima će se dodijeliti samo stil pointer-events: none, što znači da se i dalje mogu fokusirati i njima se može upravljati pomoću tipkovnice. U tom slučaju morate ručno modificirati ove kontrole dodavanjem tabindex="-1"kako biste spriječili primanje fokusa 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 to postignete je korištenje <label>elementa ili – u slučaju gumba – uključivanje dovoljno opisnog teksta kao dijela <button>...</button>sadržaja.

Za situacije u kojima nije moguće uključiti vidljiv <label>ili prikladan tekstualni sadržaj, postoje alternativni načini pružanja dostupnog naziva, kao što su:

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

Ako ništa od toga nije prisutno, pomoćne tehnologije mogu pribjeći korištenju placeholderatributa kao zamjene za dostupno ime na <input>i <textarea>elementima. Primjeri u ovom odjeljku daju 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 nakon što polje obrasca ima sadržaj) koristiti korisnicima pomoćne tehnologije, nedostatak vidljivog teksta naljepnice još uvijek može biti problematičan za određene korisnike. Neki oblik vidljive oznake općenito je najbolji pristup, kako za pristupačnost tako i za upotrebljivost.

Sass

Mnoge varijable obrasca postavljene su na općoj razini kako bi se ponovno koristile i proširivale pojedinačne komponente obrasca. To ćete najčešće vidjeti kao varijable $btn-input-*i .$input-*

Varijable

$btn-input-*varijable su zajedničke globalne varijable između naših gumba i komponenti obrasca. Naći ćete da se one često ponovno dodjeljuju 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;