Eyðublöð
Dæmi og notkunarleiðbeiningar fyrir formstýringarstíla, útlitsvalkosti og sérsniðna íhluti til að búa til fjölbreytt úrval eyðublaða.
Yfirlit
Formstýringar Bootstrap stækka við endurræst formstíla okkar með flokkum. Notaðu þessa flokka til að velja sérsniðna skjái þeirra til að fá samkvæmari birtingu á milli vafra og tækja.
Vertu viss um að nota viðeigandi type
eiginleika á öllum innsendum (td email
fyrir netfang eða number
fyrir tölulegar upplýsingar) til að nýta nýrri innsláttarstýringar eins og staðfestingu tölvupósts, númeraval og fleira.
Hér er fljótlegt dæmi til að sýna fram á formstíl Bootstrap. Haltu áfram að lesa til að fá skjöl um nauðsynlega flokka, uppsetningu eyðublaða og fleira.
<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>
Form texta
Hægt er að búa til eyðublaðatexta á blokkastigi eða í línustigi með því að nota .form-text
.
Tengja formtexta við formstýringar
Eyðublaðstexti ætti að vera beinlínis tengdur eyðublaðastýringunni sem hann tengist með því að nota aria-describedby
eigindina. Þetta mun tryggja að hjálpartækni – eins og skjálesarar – tilkynni þennan eyðublaðstexta þegar notandinn einbeitir sér eða fer inn í stýringuna.
Formtexta fyrir neðan inntak er hægt að stíla með .form-text
. Ef eining á kubbastigi verður notuð er efstu spássía bætt við til að auðvelda bilið frá inntakunum hér að ofan.
<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>
Innbyggður texti getur notað hvaða dæmigerða innbyggða HTML frumefni (hvort sem það er <span>
, <small>
, eða eitthvað annað) með ekkert meira en .form-text
bekknum.
<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>
Óvirk eyðublöð
Bættu disabled
boolean eigindinni við inntak til að koma í veg fyrir samskipti notenda og láta það virðast léttara.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Bættu disabled
eigindinni við a <fieldset>
til að slökkva á öllum stjórntækjum innan. Vafrar meðhöndla allar innfæddar formstýringar ( <input>
, <select>
, og <button>
þættir) í a <fieldset disabled>
sem óvirka og koma í veg fyrir samskipti bæði með lyklaborði og mús á þeim.
Hins vegar, ef eyðublaðið þitt inniheldur einnig sérsniðna hnappalíka þætti eins og <a class="btn btn-*">...</a>
, munu þessir aðeins fá stíllinn pointer-events: none
, sem þýðir að þeir eru enn fókusir og hægt að nota með lyklaborðinu. Í þessu tilviki verður þú að breyta þessum stjórntækjum handvirkt með því að bæta við tabindex="-1"
til að koma í veg fyrir að þær fái fókus og aria-disabled="disabled"
til að gefa hjálpartækjum merki um ástand þeirra.
<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>
Aðgengi
Gakktu úr skugga um að allar formstýringar hafi viðeigandi aðgengilegt nafn svo hægt sé að miðla tilgangi þeirra til notenda hjálpartækja. Einfaldasta leiðin til að ná þessu er að nota <label>
þátt, eða - ef um hnappa er að ræða - að innihalda nægilega lýsandi texta sem hluta af <button>...</button>
innihaldinu.
Fyrir aðstæður þar sem ekki er hægt að láta sýnilegt <label>
eða viðeigandi textaefni fylgja með eru aðrar leiðir til að gefa upp aðgengilegt nafn, svo sem:
<label>
þættir falin með því að nota.visually-hidden
bekkinn- Bendir á fyrirliggjandi þátt sem getur virkað sem merki með því að nota
aria-labelledby
- Að gefa upp
title
eiginleika - Aðgengilegt nafn er sérstaklega stillt á frumefni með því að nota
aria-label
Ef ekkert af þessu er til staðar gæti hjálpartækni gripið til þess að nota placeholder
eiginleikann sem varahluti fyrir aðgengilega nafnið á <input>
og <textarea>
þætti. Dæmin í þessum hluta veita nokkrar tillögur, tilvikssértækar aðferðir.
Þó að nota sjónrænt falið efni ( .visually-hidden
, aria-label
, og jafnvel placeholder
efni, sem hverfur þegar eyðublað hefur efni) muni gagnast notendum hjálpartækni, getur skortur á sýnilegum merkitexta samt verið vandamál fyrir ákveðna notendur. Einhvers konar sýnilegt merki er almennt besta aðferðin, bæði fyrir aðgengi og notagildi.
Sass
Margar eyðubreytur eru settar á almennt stigi til að vera endurnotaðar og stækkaðar með einstökum eyðublöðum. Þú munt sjá þetta oftast sem $btn-input-*
og $input-*
breytur.
Breytur
$btn-input-*
breytur eru sameiginlegar alþjóðlegar breytur á milli hnappa okkar og formhluta okkar. Þú munt finna að þeim er oft endurúthlutað sem gildi fyrir aðrar íhlutasértækar breytur.
$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;