Mafomu
Zitsanzo ndi malangizo ogwiritsira ntchito masitayelo owongolera mafomu, zosankha zamasanjidwe, ndi zida zomwe zimapangidwira kupanga mitundu yosiyanasiyana.
Mwachidule
Kuwongolera mawonekedwe a Bootstrap kumakulitsa masitayilo athu a Rebooted mawonekedwe ndi makalasi. Gwiritsani ntchito makalasiwa kuti mulowe m'mawonekedwe awo makonda kuti aziwonetsa mosasinthasintha pamasakatuli ndi zida.
Onetsetsani kuti mukugwiritsa ntchito malingaliro oyenera type
pazolowetsa zonse (monga email
ma adilesi a imelo kapena number
manambala) kuti mutengere mwayi pazowongolera zatsopano monga kutsimikizira imelo, kusankha manambala, ndi zina zambiri.
Nachi chitsanzo chachangu chowonetsera masitayilo a Bootstrap. Pitilizani kuwerenga zolemba pamakalasi ofunikira, masanjidwe a fomu, ndi zina zambiri.
<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>
Mawu a fomu
Zolemba za block-level kapena inline-level zitha kupangidwa pogwiritsa ntchito .form-text
.
Gwirizanitsani zolemba za fomu ndi zowongolera mawonekedwe
Mawu a fomu akuyenera kulumikizidwa momveka bwino ndi mawonekedwe omwe amakhudzana ndi kugwiritsa ntchito mawonekedwe aria-describedby
. Izi zidzatsimikizira kuti matekinoloje othandizira-monga owerenga skrini-alengeza mawu amtunduwu pamene wogwiritsa ntchitoyo ayang'ana kwambiri kapena ayamba kuyang'anira.
Mawu a fomu pansipa akhoza kulembedwa ndi .form-text
. Ngati chinthu cha block-level chidzagwiritsidwa ntchito, malire apamwamba amawonjezedwa kuti mutalikirane mosavuta ndi zomwe zili pamwambapa.
<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>
Zolemba zapaintaneti zitha kugwiritsa ntchito chinthu chilichonse chamkati cha HTML (chikhale <span>
, <small>
, kapena china) popanda chilichonse kuposa .form-text
kalasi.
<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>
Mafomu olumala
Onjezani mawonekedwe a disabled
boolean pazolowetsa kuti mupewe kulumikizana ndi ogwiritsa ntchito ndikupangitsa kuti ziwonekere zopepuka.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Onjezani zomwe zili disabled
ku a <fieldset>
kuti muletse zowongolera zonse mkati. Osakatula amayang'anira mawonekedwe amtundu uliwonse ( <input>
, <select>
, ndi <button>
zinthu) mkati <fieldset disabled>
mwazolephereka, kuletsa kulumikizana kwa kiyibodi ndi mbewa pa iwo.
Komabe, ngati mawonekedwe anu akuphatikizanso zinthu zonga mabatani monga <a class="btn btn-*">...</a>
, izi zimangopatsidwa kalembedwe ka pointer-events: none
, kutanthauza kuti akadali owoneka bwino komanso osavuta kugwiritsa ntchito kiyibodi. Pamenepa, muyenera kusintha maulamulirowa pamanja powonjezera tabindex="-1"
kuti muwalepheretse kuyang'ana kwambiri aria-disabled="disabled"
ndikuwonetsa dziko lawo ku matekinoloje othandizira.
<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>
Kufikika
Onetsetsani kuti zowongolera mafomu zonse zili ndi dzina loyenera kupezeka kuti cholinga chake chiperekedwe kwa ogwiritsa ntchito matekinoloje othandizira. Njira yosavuta yokwaniritsira izi ndikugwiritsa ntchito <label>
chinthu, kapena - ngati mabatani - kuphatikiza mawu ofotokozera mokwanira monga gawo la <button>...</button>
zomwe zili.
Pazochitika zomwe sizingatheke kuyika mawu owoneka <label>
kapena oyenera, pali njira zina zoperekera dzina lopezeka, monga:
<label>
zinthu zobisika pogwiritsa ntchito.visually-hidden
kalasi- Kulozera ku chinthu chomwe chilipo chomwe chingathe kukhala ngati chizindikiro chogwiritsa ntchito
aria-labelledby
- Kupereka
title
lingaliro - Kukhazikitsa dzina lopezeka pachinthu chogwiritsa ntchito
aria-label
Ngati palibe chimodzi mwa izi, matekinoloje othandizira atha kugwiritsa ntchito mawonekedwewo placeholder
ngati kubwereranso kwa dzina lofikirako <input>
ndi <textarea>
zinthu. Zitsanzo zomwe zili m'gawoli zimapereka njira zingapo zopangira, zomwe zimatengera zochitika zenizeni.
Ngakhale kugwiritsa ntchito zobisika zowoneka (,, .visually-hidden
komanso aria-label
zomwe placeholder
zili, zomwe zimasowa kamodzi gawo la mawonekedwe liri ndi zokhutira) zidzapindulitsa ogwiritsa ntchito zipangizo zamakono zothandizira, kusowa kwa malemba owoneka bwino kungakhalebe kovuta kwa ogwiritsa ntchito ena. Mitundu ina ya zilembo zowonekera nthawi zambiri ndiyo njira yabwino kwambiri, yopezeka komanso yogwiritsidwa ntchito.
Sass
Mitundu yambiri yamitundu imayikidwa pamlingo wamba kuti igwiritsidwenso ntchito ndikuwonjezedwa ndi zigawo zamtundu uliwonse. Mudzawona izi nthawi zambiri ngati $btn-input-*
ndi $input-*
zosinthika.
Zosintha
$btn-input-*
zosinthika zimagawidwa padziko lonse lapansi pakati pa mabatani athu ndi zigawo zathu za mawonekedwe. Mupeza kuti izi zimagawikanso pafupipafupi ngati zosintha zamagulu ena.
$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;