Foirmean
Eisimpleirean agus stiùireadh cleachdaidh airson stoidhlichean smachd foirm, roghainnean cruth, agus co-phàirtean gnàthaichte airson measgachadh farsaing de chruthan a chruthachadh.
Ro-shealladh
Bidh smachdan foirm Bootstrap a’ leudachadh air na stoidhlichean foirm Rebooted againn le clasaichean. Cleachd na clasaichean sin gus roghnachadh a-steach do na taisbeanaidhean gnàthaichte aca airson cuibhreann nas cunbhalaiche thairis air brobhsairean agus innealan.
Dèan cinnteach gun cleachd thu type
feart iomchaidh air a h-uile cuir a-steach (me, email
airson seòladh puist-d no number
airson fiosrachadh àireamhach) gus brath a ghabhail air smachdan cuir a-steach nas ùire leithid dearbhadh post-d, taghadh àireamhan, agus barrachd.
Seo eisimpleir sgiobalta gus stoidhlichean foirm Bootstrap a nochdadh. Cùm a’ leughadh airson sgrìobhainnean mu chlasaichean riatanach, cruth cruth, agus barrachd.
<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>
Foirm teacsa
Faodar teacsa foirm aig ìre bloca no ìre in-loidhne a chruthachadh a’ cleachdadh .form-text
.
A’ ceangal teacsa foirm ri smachdan foirm
Bu chòir teacsa foirm a bhith ceangailte gu soilleir ris an smachd foirm a tha e a’ buntainn ri bhith a’ cleachdadh a’ aria-describedby
fheart. Nì seo cinnteach gum bi teicneòlasan cuideachail - leithid leughadairean sgrion - ag ainmeachadh an teacsa foirm seo nuair a bhios an neach-cleachdaidh ag amas no a’ dol a-steach don smachd.
Faodar teacsa foirm gu h-ìosal a chuir a-steach le .form-text
. Ma thèid eileamaid ìre-bloc a chleachdadh, thèid iomall àrd a chur ris gus am bi e furasta a bhith eadar na cuir a-steach gu h-àrd.
<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>
Faodaidh teacsa in-loidhne eileamaid HTML àbhaisteach sam bith a chleachdadh (biodh e <span>
, <small>
, no rudeigin eile) gun dad a bharrachd air a’ .form-text
chlas.
<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>
Foirmean ciorramach
Cuir am disabled
feart boolean air cuir a-steach gus casg a chuir air eadar-obrachadh luchd-cleachdaidh agus toirt air nochdadh nas aotroime.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Cuir am disabled
feart ri a <fieldset>
gus a h-uile smachd taobh a-staigh a dhì-cheadachadh. Bidh brobhsairean a’ làimhseachadh a h-uile smachd cruth dùthchasach ( <input>
, <select>
, , agus <button>
eileamaidean) taobh a-staigh a <fieldset disabled>
mar chiorramaich, a’ casg an dà chuid eadar-obrachadh meur-chlàr is luchag orra.
Ach, ma tha an fhoirm agad cuideachd a’ toirt a-steach eileamaidean àbhaisteach coltach ri putan leithid <a class="btn btn-*">...</a>
, cha tèid iad sin ach stoidhle de pointer-events: none
, a’ ciallachadh gu bheil iad fhathast fòcasach agus comasach obrachadh a’ cleachdadh a’ mheur-chlàr. Anns a ’chùis seo, feumaidh tu na smachdan sin atharrachadh le làimh le bhith a’ cur ris tabindex="-1"
gus casg a chuir orra bho bhith a ’faighinn fòcas agus aria-disabled="disabled"
gus an staid aca a chomharrachadh gu teicneòlasan taice.
<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>
Ruigsinneachd
Dèan cinnteach gu bheil ainm ruigsinneach iomchaidh aig a h-uile smachd foirm gus an tèid an adhbhar a chuir an cèill do luchd-cleachdaidh teicneòlasan taice. 'S e an dòigh as sìmplidh air seo a choileanadh a bhith a' cleachdadh <label>
eileamaid, no - a thaobh putanan - gus teacsa tuairisgeul gu leòr a thoirt a-steach mar phàirt den t- <button>...</button>
susbaint.
Airson suidheachaidhean far nach eil e comasach <label>
susbaint teacsa faicsinneach no iomchaidh a thoirt a-steach, tha dòighean eile ann fhathast air ainm ruigsinneach a thoirt seachad, leithid:
<label>
eileamaidean falaichte a’ cleachdadh a’.visually-hidden
chlas- A’ comharrachadh eileamaid a th’ ann mar-thà a dh’ fhaodas a bhith mar leubail a’ cleachdadh
aria-labelledby
- A 'toirt seachad
title
feart - Suidhich gu soilleir an t-ainm ruigsinneach air eileamaid a’ cleachdadh
aria-label
Mura h-eil gin dhiubh sin an làthair, faodaidh teicneòlasan cuideachaidh a bhith a 'cleachdadh a' placeholder
ghnè mar chùl-taic airson an ainm ruigsinneach <input>
agus na h- <textarea>
eileamaidean. Tha na h-eisimpleirean anns an earrainn seo a’ toirt seachad beagan dhòighean-obrach a tha air am moladh, a tha sònraichte do chùisean.
Ged a bhios cleachdadh susbaint a tha falaichte gu fradharcach ( .visually-hidden
, aria-label
, , agus eadhon placeholder
susbaint, a thèid à bith aon uair ‘s gu bheil susbaint ann an raon foirm) na bhuannachd do luchd-cleachdaidh teicneòlas cuideachaidh, dh’ fhaodadh dìth teacsa leubail faicsinneach a bhith fhathast na dhuilgheadas dha cuid de luchd-cleachdaidh. Is e seòrsa air choreigin de leubail faicsinneach an dòigh-obrach as fheàrr sa chumantas, an dà chuid a thaobh ruigsinneachd agus so-chleachdadh.
Sass
Tha mòran caochladairean cruth air an suidheachadh aig ìre choitcheann airson an ath-chleachdadh agus an leudachadh le pàirtean foirm fa leth. Chì thu iad sin mar as trice mar $btn-input-*
agus $input-*
caochladairean.
Caochlaidhean
$btn-input-*
tha caochladairean nan caochladairean cruinne co-roinnte eadar na putanan againn agus na co-phàirtean cruth againn. Lorgaidh tu iad sin gu tric air an ath-shònrachadh mar luachan gu caochladairean eile a tha sònraichte do cho-phàirtean.
$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;