Fòm
Egzanp ak direktiv itilizasyon pou estil kontwòl fòm, opsyon layout, ak konpozan koutim pou kreye yon gran varyete fòm.
Apèsi sou lekòl la
Kontwòl fòm Bootstrap yo elaji sou estil fòm Rebooted nou yo ak klas yo. Sèvi ak klas sa yo pou patisipe nan ekspozisyon Customized yo pou yon rann ki pi konsistan atravè navigatè ak aparèy.
Asire ou ke ou sèvi ak yon type
atribi apwopriye sou tout antre (pa egzanp, email
pou adrès imel oswa number
pou enfòmasyon nimerik) pou pwofite de nouvo kontwòl antre tankou verifikasyon imel, seleksyon nimewo, ak plis ankò.
Men yon egzanp rapid pou demontre estil fòm Bootstrap la. Kontinye lekti pou dokimantasyon sou klas obligatwa yo, fòm fòm, ak plis ankò.
<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>
Fòm tèks
Ou ka kreye tèks fòm nan nivo blòk oswa nan nivo liy lè l sèvi avèk .form-text
.
Asosye tèks fòm ak kontwòl fòm
Tèks fòm yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedby
atribi a. Sa pral asire ke teknoloji asistans-tankou lektè ekran-ap anonse tèks fòm sa a lè itilizatè a konsantre oswa antre nan kontwòl la.
Fòm tèks ki anba a antre yo ka style ak .form-text
. Si yo pral itilize yon eleman nan nivo blòk, yo ajoute yon maj anlè pou espas fasil soti nan antre ki anwo yo.
<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>
Tèks aliye ka itilize nenpòt eleman HTML enline tipik (ke se yon <span>
, <small>
, oswa yon lòt bagay) ki pa gen anyen plis pase .form-text
klas la.
<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>
Fòm andikape
Ajoute disabled
atribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo epi fè li parèt pi lejè.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ajoute disabled
atribi a nan yon <fieldset>
pou enfim tout kontwòl ki nan. Navigatè trete tout kontwòl fòm natif natal ( <input>
, <select>
, ak <button>
eleman) andedan yon <fieldset disabled>
kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo.
Sepandan, si fòm ou a gen ladan tou eleman koutim ki sanble ak bouton tankou <a class="btn btn-*">...</a>
, yo pral sèlman bay sa yo yon style nan pointer-events: none
, sa vle di yo toujou konsantre ak opere lè l sèvi avèk klavye a. Nan ka sa a, ou dwe manyèlman modifye kontwòl sa yo lè w ajoute tabindex="-1"
pou anpeche yo resevwa konsantre ak aria-disabled="disabled"
siyal eta yo nan teknoloji asistans.
<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>
Aksesiblite
Asire ke tout kontwòl fòm yo gen yon non aksesib apwopriye pou objektif yo ka transmèt bay itilizatè teknoloji asistans yo. Fason ki pi senp pou reyalize sa a se sèvi ak yon <label>
eleman, oswa-nan ka bouton-gen ladan tèks ase deskriptif kòm yon pati nan <button>...</button>
kontni an.
Pou sitiyasyon kote li pa posib pou mete yon <label>
kontni tèks vizib oswa apwopriye, gen lòt fason pou toujou bay yon non aksesib, tankou:
<label>
eleman kache lè l sèvi avèk.visually-hidden
klas la- Montre nan yon eleman ki deja egziste ki ka aji kòm yon etikèt lè l sèvi avèk
aria-labelledby
- Bay yon
title
atribi - Ekspliziteman mete non aksesib a sou yon eleman lè l sèvi avèk
aria-label
Si okenn nan sa yo pa prezan, teknoloji asistans yo ka itilize placeholder
atribi a kòm yon sekou pou non aksesib a sou <input>
ak <textarea>
eleman yo. Egzanp yo nan seksyon sa a bay kèk sigjere, apwòch ka-espesifik.
Pandan w ap itilize kontni vizyèlman kache ( .visually-hidden
, aria-label
, e menm placeholder
kontni, ki disparèt yon fwa yon jaden fòm gen kontni) ap benefisye itilizatè teknoloji asistans, yon mank de tèks etikèt vizib ka toujou gen pwoblèm pou sèten itilizatè. Kèk fòm etikèt vizib se jeneralman pi bon apwòch, tou de pou aksè ak itilizasyon.
Sass
Anpil varyab fòm yo mete nan yon nivo jeneral yo dwe re-itilize ak pwolonje pa eleman fòm endividyèl. Ou pral wè sa yo pi souvan kòm $btn-input-*
ak $input-*
varyab.
Varyab
$btn-input-*
varyab yo pataje varyab mondyal ant bouton nou yo ak eleman fòm nou yo. Ou pral jwenn sa yo souvan reasignate kòm valè nan lòt varyab konpozan espesifik.
$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;