Amafomu

Uhlolojikelele

Izilawuli zefomu le-Bootstrap zinwebeka kuzitayela zethu zefomu Eqaliswe kabusha ngamakilasi. Sebenzisa lawa makilasi ukuze ungene ezibonisini zazo ezenziwe ngokwezifiso ukuze uthole ukunikezwa okungaguquki kuzo zonke iziphequluli namadivayisi.

Qiniseka ukuthi usebenzisa typeisibaluli esifanelekile kukho konke okokufaka (isb., emailikheli le-imeyili noma numberulwazi lwezinombolo) ukuze usizakale ngezilawuli zokufakwayo ezintsha njengokuqinisekisa i-imeyili, ukukhetha izinombolo, nokuningi.

Nasi isibonelo esisheshayo sokubonisa izitayela zefomu le-Bootstrap. Qhubeka ufunda ukuze uthole imibhalo ngamakilasi adingekayo, ukwakheka kwefomu, 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>

Umbhalo wefomu

Umbhalo wezinga lokuvimba noma izinga eliphakathi komugqa ungadalwa kusetshenziswa i- .form-text.

Umbhalo wefomu ongezansi ungabhalwa ngokuthi .form-text. Uma kuzosetshenziswa i-elementi yeleveli yebhulokhi, i-margin ephezulu iyengezwa ukuze kube lula ukuhlukanisa okokufaka ngenhla.

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

Umbhalo osemgqeni ungasebenzisa noma iyiphi into evamile ye-HTML esemgqeni (kungaba i- <span>, <small>, noma enye into) ngaphandle kokunye ngaphandle .form-textkwekilasi.

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

Amafomu akhutshaziwe

Engeza disabledisibaluli se-boolean kokokufaka ukuze uvimbele ukusebenzisana komsebenzisi futhi ukwenze kubonakale kulula.

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

Engeza disabledisibaluli kokuthi a <fieldset>ukuze ukhubaze zonke izilawuli ezingaphakathi. Iziphequluli ziphatha zonke izilawuli zefomu lomdabu ( <input>, <select>, <button>nezici) ngaphakathi <fieldset disabled>njengezikhutshaziwe, zivimbela kokubili ukusebenzisana kwekhibhodi negundane kuzo.

Kodwa-ke, uma ifomu lakho lihlanganisa nezinto ezifana nenkinobho yangokwezifiso njengokuthi <a class="btn btn-*">...</a>, lezi zizonikezwa kuphela isitayela se- pointer-events: none, okusho ukuthi zisagxila futhi zisebenziseka kusetshenziswa ikhibhodi. Kulesi simo, kufanele uguqule lezi zilawuli mathupha ngokungeza tabindex="-1"ukuze uzivikele ekutholeni ukugxila futhi aria-disabled="disabled"ubonise isimo sazo kubuchwepheshe obusizayo.

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

Ukufinyeleleka

Qinisekisa ukuthi zonke izilawuli zefomu zinegama elifanele elifinyelelekayo ukuze injongo yazo idluliselwe kubasebenzisi bobuchwepheshe obusizayo. Indlela elula yokufeza lokhu ukusebenzisa <label>isici, noma—uma kuyizinkinobho—ukufaka umbhalo ochazayo ngokwanele njengengxenye <button>...</button>yokuqukethwe.

Ezimweni lapho kungenzeki khona ukufaka umbhalo obonakalayo <label>noma ofanelekile, kunezindlela ezihlukile zokuhlinzeka ngegama elifinyelelekayo, njenge:

• <label>izici ezifihliwe kusetshenziswa .visually-hiddenikilasi
• Ikhomba into ekhona engase isebenze njengelebula esetshenziswayoaria-labelledby
• Ukunikeza titleisibaluli
• Ukusetha ngokusobala igama elifinyeleleka ku-elementi usebenzisaaria-label

Uma kungekho kulokhu okukhona, ubuchwepheshe obusizayo bungase buphendukele ekusebenziseni placeholderisibaluli njengembuyiselo yegama elifinyelelekayo elikuwo <input>nama - <textarea>elementi. Izibonelo kulesi sigaba zinikeza izindlela ezimbalwa eziphakanyisiwe, eziqondene necala elithile.

Ngenkathi usebenzisa okuqukethwe okufihliwe okubonakalayo ( .visually-hidden, aria-label, ngisho placeholdernokuqukethwe, okunyamalalayo uma inkambu yefomu inokuqukethwe) kuzozuzisa abasebenzisi bobuchwepheshe obusizayo, ukuntuleka kombhalo welebula obonakalayo kungase kube inkinga kubasebenzisi abathile. Olunye uhlobo lwelebula ebonakalayo ngokuvamile luyindlela engcono kakhulu, kokubili yokufinyeleleka nokusebenziseka.

Sass

Amafomu amaningi aguquguqukayo asethwe ezingeni elijwayelekile ukuze aphinde asetshenziswe futhi andwe ngezingxenye zefomu ngazinye. Uzobona lezi kaningi njengama $btn-input-*- $input-*variables.

Okuguquguqukayo

$btn-input-*okuguquguqukayo kwabelwana ngezinto eziguquguqukayo zomhlaba wonke phakathi kwezinkinobho zethu nezingxenye zethu zefomu. Uzothola lezi zivame ukwabiwa kabusha njengamanani kwezinye izinto eziguquguqukayo eziqondene nengxenye.

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