Fomu
Mifano na miongozo ya matumizi ya mitindo ya udhibiti wa fomu, chaguo za mpangilio, na vipengele maalum vya kuunda aina mbalimbali za fomu.
Muhtasari
Vidhibiti vya fomu vya Bootstrap hupanuka kwenye mitindo yetu ya fomu Iliyowashwa upya na madarasa. Tumia madarasa haya ili ujijumuishe na maonyesho yake yaliyobinafsishwa kwa uwasilishaji thabiti zaidi kwenye vivinjari na vifaa.
Hakikisha kuwa unatumia type
sifa inayofaa kwenye ingizo zote (kwa mfano, email
kwa anwani ya barua pepe au number
maelezo ya nambari) ili kunufaika na vidhibiti vipya vya ingizo kama vile uthibitishaji wa barua pepe, uteuzi wa nambari na zaidi.
Hapa kuna mfano wa haraka wa kuonyesha mitindo ya fomu ya Bootstrap. Endelea kusoma ili upate hati kuhusu madarasa yanayohitajika, mpangilio wa fomu, na zaidi.
<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>
Nakala ya fomu
Maandishi ya fomu ya kiwango cha kuzuia au ya ndani yanaweza kuundwa kwa kutumia .form-text
.
Kuhusisha maandishi ya fomu na vidhibiti vya fomu
Maandishi ya fomu yanapaswa kuhusishwa kwa uwazi na udhibiti wa fomu unaohusiana na kutumia aria-describedby
sifa. Hii itahakikisha kuwa teknolojia saidizi—kama vile visoma skrini—zitatangaza maandishi ya fomu hii mtumiaji anapozingatia au kuingia katika udhibiti.
Maandishi ya fomu chini ya ingizo yanaweza kutengenezwa kwa kutumia .form-text
. Ikiwa kipengele cha kiwango cha kuzuia kitatumika, ukingo wa juu huongezwa kwa nafasi rahisi kutoka kwa pembejeo zilizo hapo juu.
<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>
Maandishi ya ndani yanaweza kutumia kipengee chochote cha kawaida cha HTML (iwe <span>
, <small>
, au kitu kingine) bila chochote zaidi ya .form-text
darasa.
<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>
Fomu za walemavu
Ongeza disabled
sifa ya boolean kwenye ingizo ili kuzuia mwingiliano wa watumiaji na kuifanya ionekane nyepesi.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ongeza disabled
sifa kwa a <fieldset>
ili kuzima vidhibiti vyote ndani. Vivinjari hushughulikia vidhibiti vyote vya fomu asili ( <input>
, <select>
, na <button>
vipengee) vilivyo ndani <fieldset disabled>
kama vilivyozimwa, na hivyo kuzuia mwingiliano wa kibodi na kipanya juu yake.
Hata hivyo, ikiwa fomu yako pia inajumuisha vipengele maalum vinavyofanana na vitufe kama vile <a class="btn btn-*">...</a>
, hivi vitapewa tu mtindo wa pointer-events: none
, kumaanisha kuwa bado vinaweza kuangaziwa na kuendeshwa kwa kutumia kibodi. Katika hali hii, lazima urekebishe vidhibiti hivi wewe mwenyewe kwa kuongeza tabindex="-1"
ili kuzizuia zisipokee umakini na aria-disabled="disabled"
kuashiria hali yao kwa teknolojia saidizi.
<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>
Ufikivu
Hakikisha kwamba vidhibiti vyote vya fomu vina jina linaloweza kufikiwa ili kusudi lao liweze kuwasilishwa kwa watumiaji wa teknolojia saidizi. Njia rahisi zaidi ya kufikia hili ni kutumia <label>
kipengele, au-katika kesi ya vitufe-kujumuisha maandishi ya kutosha kama sehemu ya <button>...</button>
maudhui.
Kwa hali ambapo haiwezekani kujumuisha <label>
maandishi yanayoonekana au yanayofaa, kuna njia mbadala za kutoa jina linaloweza kufikiwa, kama vile:
<label>
mambo yaliyofichwa kwa kutumia.visually-hidden
darasa- Akiashiria kipengele kilichopo ambacho kinaweza kufanya kazi kama lebo inayotumia
aria-labelledby
- Kutoa
title
sifa - Kuweka kwa uwazi jina linaloweza kufikiwa kwenye kipengele kinachotumia
aria-label
Ikiwa hakuna kati ya hizi zilizopo, teknolojia saidizi zinaweza kuamua kutumia placeholder
sifa kama njia mbadala ya jina linaloweza kufikiwa kwenye <input>
na <textarea>
vipengele. Mifano katika sehemu hii inatoa mbinu chache zilizopendekezwa, mahususi za kesi.
Huku ukitumia maudhui yaliyofichwa machoni ( .visually-hidden
, aria-label
, na hata placeholder
maudhui, ambayo hutoweka mara sehemu ya fomu inapokuwa na maudhui) kutafaidi watumiaji wa teknolojia ya usaidizi, ukosefu wa maandishi ya lebo inayoonekana bado unaweza kuwa tatizo kwa watumiaji fulani. Aina fulani ya lebo inayoonekana kwa ujumla ndiyo njia bora zaidi, kwa ufikivu na utumiaji.
Sass
Vigezo vingi vya fomu vimewekwa katika kiwango cha jumla ili kutumika tena na kupanuliwa na vipengele vya fomu binafsi. Utaona hizi mara nyingi kama $btn-input-*
na $input-*
vigezo.
Vigezo
$btn-input-*
vigezo vinashirikiwa tofauti za kimataifa kati ya vitufe vyetu na vijenzi vya fomu zetu. Utapata hizi zikikabidhiwa upya mara kwa mara kama maadili kwa vipengee vingine mahususi.
$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;