Vormid
Vormi juhtimisstiilide, paigutussuvandite ja kohandatud komponentide näited ja kasutusjuhised mitmesuguste vormide loomiseks.
Ülevaade
Bootstrapi vormijuhtelemendid laiendavad klasside abil taaskäivitatud vormistiile. Kasutage neid klasse nende kohandatud kuvade valimiseks, et muuta brauserites ja seadmetes ühtsem renderdus.
type
Kasutage kõigis sisendites (nt email
e-posti aadressi või numbrilise teabe jaoks) kindlasti sobivat atribuuti, number
et 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
.
Vormi teksti seostamine vormi juhtelementidega
Vormi tekst peaks olema selgesõnaliselt seotud vormi juhtelemendiga, millega see on seotud aria-describedby
atribuudi kasutamisega. See tagab, et abitehnoloogiad (nt ekraanilugejad) teavitavad sellest vormi tekstist, kui kasutaja keskendub või siseneb juhtelemendile.
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-text
klass.
<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 disabled
sisendile 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 disabled
atribuut 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-hidden
klassi abil peidetud elemendid- Osutades olemasolevale elemendile, mis võib toimida sildina
aria-labelledby
title
Atribuudi pakkumine- Elemendile juurdepääsetava nime selgesõnaline määramine kasutades
aria-label
Kui ükski neist pole olemas, võivad abitehnoloogiad kasutada placeholder
atribuuti 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 placeholder
sisu, 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;