Iifom

Isishwankathelo

Ulawulo lwefom ye-Bootstrap yandisa kwizimbo zethu zefom eQaliswe ngokutsha ngeeklasi. Sebenzisa ezi klasi ukungena kwiziboniso zazo ezilungiselelwe unikezelo olungaguquguqukiyo kuzo zonke iibhrawuza kunye nezixhobo.

Qinisekisa ukusebenzisa uphawu olufanelekileyo typekuwo onke amagalelo (umzekelo, emailidilesi ye-imeyile okanye numberngolwazi lwamanani) ukuthatha ithuba lolawulo lwamagalelo amatsha njengesiqinisekiso se-imeyile, ukhetho lweenombolo, nokunye.

Nanku umzekelo okhawulezayo ukubonisa izimbo zeBootstrap. Gcina ufundela amaxwebhu kwiiklasi ezifunekayo, uyilo lwefom, kunye nokunye.

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

Yenza isicatshulwa

Umphakamo webhloko okanye umphakamo womgca wombhalo wefomu ungadalwa kusetyenziswa .form-text.

Ukubhaliweyo kwefomu ngezantsi kwamagalelo kungalungiswa nge .form-text. Ukuba i-block-level element iya kusetyenziswa, i-margin ephezulu iyongezwa ukwenzela izithuba ezilula ukusuka kwigalelo elingentla.

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

Okubhaliweyo okungaphakathi kunokusebenzisa nayiphi na into eqhelekileyo engaphakathi kwe HTML isiqalelo (inokuba yi <span>, <small>, okanye enye into) kungekho nto ingaphaya .form-textkodidi.

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

Iifom ezikhubazekileyo

Yongeza disableduphawu lwe-boolean kwigalelo ukuthintela ukusebenzisana komsebenzisi kwaye ulwenze lubonakale lula.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Yongeza disableduphawu ku a <fieldset>ukuvala zonke izilawuli ngaphakathi. Abakhangeli baphatha lonke uhlobo lolawulo lwendalo ( <input>, <select>, kunye <button>nezakhi) ngaphakathi <fieldset disabled>njengekhubaziweyo, ukuthintela zombini ibhodi yezitshixo kunye nonxibelelwano lwemouse kuzo.

Nangona kunjalo, ukuba ifom yakho ikwabandakanya izinto ezifana neqhosha- esiko elinje, ezi ziyakunikwa <a class="btn btn-*">...</a>kuphela isimbo pointer-events: none, okuthetha ukuba zisajongeka kwaye ziyasebenza kusetyenziswa ibhodi yezitshixo. Kule meko, kufuneka ulungise ngesandla olu lawulo ngokudibanisa tabindex="-1"ukubathintela ekufumaneni ugxininiso kunye aria-disabled="disabled"nokubonisa imeko yabo kwiiteknoloji ezincedisayo.

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

Ukufikeleleka

Qinisekisa ukuba zonke iifom zolawulo zinegama elifanelekileyo elifikelelekayo ukuze injongo yazo idluliselwe kubasebenzisi bobuchwephesha bokuncedisa. Indlela elula yokufezekisa oku kukusebenzisa i- <label>element, okanye-kwimeko yamaqhosha-ukubandakanya isicatshulwa esichaza ngokwaneleyo njengenxalenye <button>...</button>yomxholo.

Kwiimeko apho kungakwazekiyo ukubandakanya <label>umxholo wombhalo obonakalayo okanye ofanelekileyo, kukho iindlela ezizezinye zokubonelela ngegama elifikelelekayo, elifana ne:

• <label>izinto ezifihliweyo kusetyenziswa .visually-hiddeniklasi
• Ukwalatha kwinto ekhoyo enokuthi isebenze njengeleyibhile esetyenziswayoaria-labelledby
• Ukubonelela titlengophawu
• Ukuseta ngokucacileyo igama elifikelelekayo kwinto usebenzisaaria-label

Ukuba akukho nanye kwezi ekhoyo, ubuchwephesha obuncedisayo busenokubhenela ekusebenziseni placeholderuphawu njengomba wokubuyela umva wegama elifikelelekayo <input>kunye <textarea>nezinto. Imizekelo ekweli candelo ibonelela ngeendlela ezimbalwa ezicetyisiweyo, ezijongene nemeko ethile.

Ngelixa usebenzisa umxholo ofihliweyo obonakalayo ( .visually-hidden, aria-label, kunye placeholdernomxholo, onyamalalayo xa ifom yefom inomxholo) iya kuba luncedo kubasebenzisi beteknoloji yokuncedisa, ukungabikho kombhalo welebula ebonakalayo kusenokuba yingxaki kubasebenzisi abathile. Olunye uhlobo lweleyibhile ebonakalayo ngokubanzi yeyona ndlela ilungileyo, yokufikeleleka kunye nokusebenziseka.

Sass

Iifomu ezininzi eziguquguqukayo zisetwa kwinqanaba eliqhelekileyo ukuba liphinde lisetyenziswe kwaye landiswe ngamacandelo efom nganye. Uya kuzibona ezi rhoqo njenge $btn-input-*kunye $input-*neziguquguqukayo.

Izinto eziguquguqukayo

$btn-input-*izinto eziguquguqukayo kwabelwana ngazo ngezinto eziguquguqukayo zehlabathi phakathi kwamaqhosha ethu kunye namalungu efom yethu. Uyakufumana ezi zikwabelwa ngokutsha rhoqo njengamaxabiso kwezinye iiguquguquki zecandelo elithile.

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