Formoli
Eżempji u linji gwida għall-użu għal stili ta 'kontroll tal-formoli, għażliet ta' tqassim, u komponenti tad-dwana għall-ħolqien ta 'varjetà wiesgħa ta' formoli.
Ħarsa ġenerali
Il-kontrolli tal-formoli tal-Bootstrap jespandu fuq l-istili tal-forma Rebooted tagħna bil-klassijiet. Uża dawn il-klassijiet biex tagħżel id-displejs personalizzati tagħhom għal rendering aktar konsistenti fil-browsers u l-apparati.
Kun żgur li tuża type
attribut xieraq fuq l-inputs kollha (eż., email
għall-indirizz tal-email jew number
għal informazzjoni numerika) biex tieħu vantaġġ minn kontrolli tal-input aktar ġodda bħall-verifika tal-email, l-għażla tan-numri, u aktar.
Hawn eżempju ta 'malajr biex turi l-istili tal-forma ta' Bootstrap. Kompli aqra għad-dokumentazzjoni dwar il-klassijiet meħtieġa, it-tqassim tal-formoli, u aktar.
<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>
Test tal-formola
Test tal-formola fil-livell ta' blokk jew fil-livell inline jista' jinħoloq bl -użu ta' .form-text
.
Assoċja test tal-formola mal-kontrolli tal-formola
It-test tal-formola għandu jkun assoċjat b'mod espliċitu mal-kontroll tal-formola li jirrelata miegħu bl-użu tal- aria-describedby
attribut. Dan se jiżgura li t-teknoloġiji ta' assistenza—bħal screen readers—se jħabbru dan it-test tal-formola meta l-utent jiffoka jew jidħol fil-kontroll.
It-test tal-formola taħt l-inputs jista' jiġi stilat bi .form-text
. Jekk se jintuża element ta' livell ta' blokk, jiżdied marġni ta' fuq għal spazjar faċli mill-inputs ta' hawn fuq.
<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>
It-test inline jista' juża kwalunkwe element HTML inline tipiku (kemm jekk ikun <span>
, <small>
, jew xi ħaġa oħra) b'xejn aktar mill- .form-text
klassi.
<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>
Formoli b'diżabilità
Żid l- disabled
attribut boolean fuq input biex tevita l-interazzjonijiet tal-utent u tagħmilha tidher eħfef.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Żid l- disabled
attribut ma 'a <fieldset>
biex tiddiżattiva l-kontrolli kollha ġewwa. Il-browsers jittrattaw il-kontrolli tal-forma nattiva kollha ( <input>
, <select>
, u l- <button>
elementi) ġewwa <fieldset disabled>
bħala diżattivati, u jipprevjenu kemm it-tastiera kif ukoll l-interazzjonijiet tal-maws fuqhom.
Madankollu, jekk il-formola tiegħek tinkludi wkoll elementi personalizzati li jixbħu buttuna bħal <a class="btn btn-*">...</a>
, dawn jingħataw biss stil ta' pointer-events: none
, li jfisser li għadhom jiffokabbli u operabbli bl-użu tat-tastiera. F'dan il-każ, trid timmodifika manwalment dawn il-kontrolli billi żżid tabindex="-1"
biex tevitahom milli jirċievu fokus u aria-disabled="disabled"
biex tindika l-istat tagħhom għal teknoloġiji ta 'assistenza.
<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ċċessibilità
Jiżguraw li l-kontrolli tal-formoli kollha jkollhom isem aċċessibbli xieraq sabiex l-iskop tagħhom ikun jista’ jitwassal lill-utenti tat-teknoloġiji ta’ assistenza. L-aktar mod sempliċi biex jinkiseb dan huwa li tuża <label>
element, jew—fil-każ ta' buttuni—li tinkludi test deskrittiv biżżejjed bħala parti mill- <button>...</button>
kontenut.
Għal sitwazzjonijiet fejn mhux possibbli li jiġi inkluż <label>
kontenut ta' test viżibbli jew xieraq, hemm modi alternattivi kif xorta jiġi pprovdut isem aċċessibbli, bħal:
<label>
elementi moħbija bl-użu tal-.visually-hidden
klassi- Tipponta lejn element eżistenti li jista 'jaġixxi bħala tikketta bl-użu
aria-labelledby
- Jipprovdi
title
attribut - Issettjar espliċitament l-isem aċċessibbli fuq element bl-użu
aria-label
Jekk l-ebda wieħed minn dawn ma jkun preżenti, it-teknoloġiji ta' assistenza jistgħu jirrikorru għall-użu tal- placeholder
attribut bħala riżerva għall-isem <input>
u l- <textarea>
elementi aċċessibbli. L-eżempji f'din it-taqsima jipprovdu ftit approċċi ssuġġeriti u speċifiċi għall-każ.
Filwaqt li l-użu ta' kontenut moħbi viżwalment ( .visually-hidden
, aria-label
, u anke placeholder
kontenut, li jisparixxi ladarba qasam ta' formola jkollu kontenut) se jkun ta' benefiċċju għall-utenti tat-teknoloġija assistiva, nuqqas ta' test ta' tikketta viżibbli xorta jista' jkun problematiku għal ċerti utenti. Xi forma ta' tikketta viżibbli hija ġeneralment l-aħjar approċċ, kemm għall-aċċessibbiltà kif ukoll għall-użabilità.
Sass
Ħafna varjabbli tal-forma huma stabbiliti fuq livell ġenerali biex jerġgħu jintużaw u estiżi minn komponenti tal-forma individwali. Int ser tara dawn l-aktar spiss bħala $btn-input-*
u $input-*
varjabbli.
Varjabbli
$btn-input-*
varjabbli huma varjabbli globali kondiviżi bejn il- buttuni tagħna u l-komponenti tal-forma tagħna. Issib dawn ta' spiss assenjati mill-ġdid bħala valuri għal varjabbli oħra speċifiċi għall-komponenti.
$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;