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

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

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

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

<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 $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;