Fomu

Mifano na miongozo ya matumizi ya mitindo ya udhibiti wa fomu, chaguo za mpangilio, na vipengele maalum vya kuunda aina mbalimbali za fomu.

Katika ukurasa huu

Udhibiti wa fomu Mtindo wa pembejeo za maandishi na maeneo ya maandishi na usaidizi wa majimbo mengi.

Chagua Boresha vipengele vya chaguo-msingi vya kivinjari kwa mwonekano maalum wa awali.

Hundi na redio Tumia vitufe vyetu maalum vya redio na visanduku vya kuteua katika fomu ili kuchagua chaguo za ingizo.

Masafa Badilisha masafa chaguomsingi ya kivinjari na toleo letu maalum.

Kikundi cha ingizo Ambatanisha lebo na vitufe kwa ingizo lako ili kuongeza thamani ya kisemantiki.

Lebo zinazoelea Unda lebo za fomu rahisi ambazo huelea juu ya sehemu zako za uingizaji.

Mpangilio Unda muundo wa ndani, mlalo, au changamano wa msingi wa gridi ukitumia fomu zako.

Uthibitishaji Thibitisha fomu zako kwa tabia na mitindo ya uthibitishaji maalum au asilia.

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 typesifa inayofaa kwenye ingizo zote (kwa mfano, emailkwa anwani ya barua pepe au numbermaelezo 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.

html

<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-describedbysifa. 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.

Nenosiri

Nenosiri lako lazima liwe na urefu wa herufi 8-20, liwe na herufi na nambari, na lisiwe na nafasi, herufi maalum au emoji.

html

<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-textdarasa.

Nenosiri

Lazima iwe na urefu wa herufi 8-20.

html

<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 disabledsifa 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 disabledsifa 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.

html

<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-hiddendarasa
Akiashiria kipengele kilichopo ambacho kinaweza kufanya kazi kama lebo inayotumiaaria-labelledby
Kutoa titlesifa
Kuweka kwa uwazi jina linaloweza kufikiwa kwenye kipengele kinachotumiaaria-label

Ikiwa hakuna kati ya hizi zilizopo, teknolojia saidizi zinaweza kuamua kutumia placeholdersifa 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 placeholdermaudhui, 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 $input-btn-*na $input-*vigezo.

Vigezo

$input-btn-*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;