Vormid

Ülevaade

Bootstrapi vormijuhtelemendid laiendavad klasside abil taaskäivitatud vormistiile. Kasutage neid klasse nende kohandatud kuvade valimiseks, et muuta brauserites ja seadmetes ühtsem renderdus.

typeKasutage kõigis sisendites (nt emaile-posti aadressi või numbrilise teabe jaoks) kindlasti sobivat atribuuti, numberet kasutada ära uuemaid sisendi juhtelemente, nagu e-posti kinnitamine, numbrivalik ja palju muud.

Siin on kiire näide Bootstrapi vormistiilide demonstreerimiseks. Lugege edasi dokumente vajalike klasside, vormide paigutuse ja muu kohta.

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

Vormi tekst

Plokitaseme või reasisese vormi teksti saab luua kasutades .form-text.

Sisendite all oleva vormi teksti saab stiilida .form-text. Kui kasutatakse plokitaseme elementi, lisatakse ülemine veeris, et ülaltoodud sisenditest oleks lihtne vahemaa jätta.

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

Tekstisisene tekst võib kasutada mis tahes tüüpilist tekstisisest HTML-elementi (olgu see siis <span>, <small>, või midagi muud), millel pole muud kui .form-textklass.

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

Puudega vormid

Lisage disabledsisendile Boolean atribuut, et vältida kasutaja interaktsioone ja muuta see heledamaks.

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

Lisage disabledatribuut atribuudile a <fieldset>, et keelata kõik selles olevad juhtelemendid. Brauserid käsitlevad kõiki a-siseste vormide loomulikke juhtelemente ( <input>, <select>, ja <button>elemente) <fieldset disabled>keelatud kujul, vältides nii klaviatuuri kui ka hiire interaktsioone.

Kui aga teie vorm sisaldab ka kohandatud nuputaolisi elemente, nagu <a class="btn btn-*">...</a>, antakse neile ainult stiil pointer-events: none, mis tähendab, et neid saab siiski fokuseerida ja klaviatuuri abil kasutada. Sel juhul peate neid juhtelemente käsitsi muutma, lisades tabindex="-1", et vältida nende fookuse saamist ja aria-disabled="disabled"anda abitehnoloogiatele nende olekust märku.

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

Juurdepääsetavus

Veenduge, et kõigil vormi juhtelementidel oleks sobiv juurdepääsetav nimi, et nende eesmärki saaks abitehnoloogiate kasutajatele edastada. Lihtsaim viis selle saavutamiseks on kasutada <label>elementi või – nuppude puhul – lisada sisu osana piisavalt kirjeldav tekst <button>...</button>.

<label>Olukordades, kus nähtavat või sobivat tekstisisu pole võimalik lisada , on juurdepääsetava nime esitamiseks alternatiivseid viise, näiteks:

• <label>.visually-hiddenklassi abil peidetud elemendid
• Osutades olemasolevale elemendile, mis võib toimida sildinaaria-labelledby
• titleAtribuudi pakkumine
• Elemendile juurdepääsetava nime selgesõnaline määramine kasutadesaria-label

Kui ükski neist pole olemas, võivad abitehnoloogiad kasutada placeholderatribuuti ligipääsetava nime <input>ja <textarea>elementide tagavarana. Selle jaotise näited pakuvad mõningaid soovitatud juhtumipõhiseid lähenemisviise.

Kuigi visuaalselt peidetud sisu ( .visually-hidden, aria-label, ja isegi placeholdersisu, mis kaob, kui vormiväljal on sisu olemas) kasutamine on abitehnoloogia kasutajatele kasulik, võib nähtava sildi teksti puudumine teatud kasutajatele siiski probleeme tekitada. Mingil kujul nähtav silt on üldiselt parim lähenemisviis nii juurdepääsetavuse kui ka kasutatavuse seisukohalt.

Sass

Paljud vormimuutujad on seatud üldisele tasemele, et neid uuesti kasutada ja üksikute vormikomponentidega laiendada. Näete neid kõige sagedamini muutujatena $btn-input-*ja .$input-*

Muutujad

$btn-input-*muutujad on jagatud globaalsed muutujad meie nuppude ja vormikomponentide vahel. Leiate, et need määratakse sageli muude komponendipõhiste muutujate väärtustena.

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