Mefuta

Kakaretso

Litaolo tsa foromo ea Bootstrap li hola ho mefuta ea rona ea Rebooted ka litlelase. Sebelisa litlelase tsena ho kena ho liponts'o tsa tsona tse ikhethileng bakeng sa ho fana ka mokhoa o ts'oanang ho libatli le lisebelisoa.

Netefatsa hore o sebelisa typetšobotsi e nepahetseng linthong tsohle tse kentsoeng (mohlala, emailbakeng sa aterese ea lengolo-tsoibila kapa numberlintlha tsa linomoro) ho nka monyetla ka taolo e ncha ea ho kenya joalo ka netefatso ea lengolo-tsoibila, khetho ea linomoro, le tse ling.

Mona ke mohlala o potlakileng oa ho bonts'a mekhoa ea sebopeho sa Bootstrap. Tsoela pele ho bala litokomane tsa litlelase tse hlokahalang, sebopeho sa liforomo, le tse ling.

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

Sengoloa sa sebopeho

Sengoloa sa sebopeho sa block-level kapa inline-level se ka etsoa ho sebelisoa .form-text.

Mongolo o ka tlase oa mongolo o ka ngoloa ka .form-text. Haeba ho tla sebelisoa elemente ea block-level, moeli o kaholimo o eketsoa bakeng sa sebaka se bonolo ho tsoa ho tse kentsoeng ka holimo.

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

Mongolo o ka hare o ka sebelisa ntho efe kapa efe e tloaelehileng ea inline HTML (e ka ba <span>, <small>, kapa ntho e 'ngoe) ntle le .form-textsehlopha.

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

Liforomo tse holofetseng

Kenya disabledtšobotsi ea boolean ho kenyeletso ho thibela litšebelisano tsa basebelisi le ho etsa hore e bonahale e le bobebe.

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

Kenya disabledtšobotsi ho a <fieldset>ho tima litaolo tsohle tse ka hare. Libatli li tšoara litaolo tsohle tsa liforomo ( <input>, <select>, le <button>elements) ka har'a sesebelisoa <fieldset disabled>e le tse holofetseng, li thibela ho sebelisana ha keyboard le mouse ho tsona.

Leha ho le joalo, haeba foromo ea hau e boetse e kenyelletsa lintho tse kang likonopo tse tloahelehileng joalo ka <a class="btn btn-*">...</a>, tsena li tla fuoa feela mofuta oa pointer-events: none, ho bolelang hore li ntse li ka tsepamisoa maikutlo ebile li sebetsa ka ho sebelisa keyboard. Tabeng ena, o tlameha ho fetola litsamaiso tsena ka letsoho ka ho eketsa tabindex="-1"ho li thibela ho fumana maikutlo le aria-disabled="disabled"ho bontša boemo ba tsona ho theknoloji e thusang.

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

Ho fihlella

Netefatsa hore litsamaiso tsohle tsa liforomo li na le lebitso le nepahetseng le fumanehang e le hore sepheo sa tsona se ka fetisetsoa ho basebelisi ba mahlale a thusang. Mokhoa o bonolo oa ho fihlela sena ke ho sebelisa <label>element, kapa-tabeng ea likonopo-ho kenyelletsa mongolo o hlalosang ka ho lekaneng e le karolo ea <button>...</button>litaba.

Maemong ao ho sa khoneheng ho kenyelletsa mongolo o bonahalang <label>kapa o nepahetseng, ho na le mekhoa e meng ea ho fana ka lebitso le fumanehang, joalo ka:

• <label>likarolo tse patiloeng ka ho sebelisa .visually-hiddensehlopha
• Ho supa ntho e teng e ka sebetsang joalo ka leibole e sebelisangaria-labelledby
• Ho fana ka titlesemelo
• Ho beha ka ho hlaka lebitso le fumanehang ho element o sebelisaaria-label

Haeba ha ho le e 'ngoe ea tsena e teng, litheknoloji tse thusang li ka sebelisa placeholdertšobotsi e le tšitiso bakeng sa lebitso le fumanehang holima <input>le <textarea>likarolo. Mehlala e karolong ena e fana ka mekhoa e 'maloa e khothalelitsoeng, e tobane le maemo a itseng.

Ha u ntse u sebelisa litaba tse patiloeng ka pono ( .visually-hidden,, aria-labelesita le placeholderlitaba, tse nyamelang hang ha sebaka sa foromo se na le litaba) se tla thusa basebelisi ba theknoloji e thusang, ho haella ha mongolo oa label e bonahalang e ntse e ka ba bothata ho basebelisi ba itseng. Mofuta o mong oa li-label tse bonahalang hangata ke mokhoa o motle ka ho fetisisa, oa ho fumaneha le ho sebelisoa.

Sass

Mefuta e mengata ea mefuta e behiloe boemong bo akaretsang hore bo sebelisoe hape le ho atolosoa ke likarolo tsa foromo ka bomong. U tla bona tsena hangata joalo ka $btn-input-*le $input-*mefuta e fapaneng.

Lintho tse fapaneng

$btn-input-*mefuta e fapaneng e arolelanoa ka mefuta e fapaneng ea lefats'e lipakeng tsa likonopo tsa rona le likarolo tsa rona tsa foromo. U tla fumana tsena hangata li abeloa bocha e le boleng ho likarolo tse ling tse ikhethileng.

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