Mga porma

Overview

Ang mga kontrol sa porma sa Bootstrap nagpalapad sa among Gi-reboot nga mga istilo sa porma nga adunay mga klase. Gamita kini nga mga klase aron makapili sa ilang gipahiangay nga mga pasundayag alang sa mas makanunayon nga paghubad sa mga browser ug aparato.

Siguruha nga mogamit usa ka angay typenga kinaiya sa tanan nga mga input (pananglitan, emailalang sa email address o numberalang sa numerical nga impormasyon) aron mapahimuslan ang mas bag-ong mga kontrol sa input sama sa pag-verify sa email, pagpili sa numero, ug uban pa.

Ania ang usa ka dali nga pananglitan aron ipakita ang mga istilo sa porma sa Bootstrap. Padayon sa pagbasa alang sa dokumentasyon sa gikinahanglan nga mga klase, porma layout, ug uban pa.

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

Porma nga teksto

Ang block-level o inline-level nga porma nga teksto mahimong himoon gamit ang .form-text.

Ang porma nga teksto sa ubos sa mga input mahimong i-istilo sa .form-text. Kung gamiton ang block-level nga elemento, usa ka taas nga margin ang idugang alang sa dali nga gilay-on gikan sa mga input sa ibabaw.

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

Ang inline nga teksto mahimong mogamit sa bisan unsang tipikal nga inline nga HTML nga elemento (bisan kini usa ka <span>, <small>, o uban pa) nga wala’y lain gawas sa .form-textklase.

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

Mga disabled nga porma

Idugang ang disabledboolean nga attribute sa usa ka input aron mapugngan ang mga interaksyon sa user ug himoon kini nga mas gaan.

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

Idugang ang disabledhiyas sa usa <fieldset>aron ma-disable ang tanang kontrol sa sulod. Gitratar sa mga browser ang tanan nga mga kontrol sa lumad nga porma ( <input>, <select>, ug <button>mga elemento) sa sulod sa usa <fieldset disabled>ingon nga baldado, nga nagpugong sa mga interaksyon sa keyboard ug mouse sa kanila.

Bisan pa, kung ang imong porma naglakip usab sa naandan nga mga elemento nga sama sa butones sama sa <a class="btn btn-*">...</a>, hatagan ra kini usa ka istilo nga pointer-events: none, nagpasabut nga mapokus ug magamit gihapon sila gamit ang keyboard. Sa kini nga kaso, kinahanglan nimo nga mano-mano nga usbon kini nga mga kontrol pinaagi sa pagdugang tabindex="-1"aron mapugngan sila nga makadawat og pokus ug aria-disabled="disabled"ipahibalo ang ilang estado sa mga teknolohiya nga makatabang.

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

Accessibility

Siguruha nga ang tanan nga mga kontrol sa porma adunay usa ka angay nga ma-access nga ngalan aron ang ilang katuyoan madala sa mga tiggamit sa mga teknolohiya nga makatabang. Ang pinakasimple nga paagi sa pagkab-ot niini mao ang paggamit sa usa ka <label>elemento, o—sa kaso sa mga buton—aron ilakip ang igo nga deskriptibong teksto isip bahin sa <button>...</button>sulod.

Alang sa mga sitwasyon diin dili posible nga maglakip sa usa ka makita <label>o angay nga sulod sa teksto, adunay mga alternatibong paagi sa paghatag gihapon og usa ka accessible nga ngalan, sama sa:

• <label>mga elemento nga gitago gamit ang .visually-hiddenklase
• Pagtudlo sa usa ka kasamtangan nga elemento nga mahimong molihok ingon usa ka label nga gigamitaria-labelledby
• Paghatag ug titlehiyas
• Tin-aw nga pagbutang sa accessible nga ngalan sa usa ka elemento nga gigamitaria-label

Kung walay bisan usa niini, ang mga teknolohiya sa pagtabang mahimong mogamit sa placeholderhiyas isip usa ka fallback alang sa accessible nga ngalan sa <input>ug <textarea>mga elemento. Ang mga pananglitan niini nga seksyon naghatag og pipila ka gisugyot, piho nga mga paagi sa kaso.

Samtang ang paggamit sa biswal nga tinago nga sulud ( .visually-hidden, aria-label, ug bisan placeholderang sulud, nga mawala sa higayon nga adunay sulud ang usa ka porma sa sulud) makabenepisyo sa mga tiggamit sa teknolohiya sa pagtabang, ang kakulang sa makita nga teksto sa label mahimo nga problema alang sa pipila nga mga tiggamit. Ang pila ka porma sa makita nga label sa kasagaran ang labing kaayo nga pamaagi, alang sa pagka-access ug pagkagamit.

Sass

Daghang mga baryable sa porma ang gibutang sa usa ka kinatibuk-ang lebel nga gamiton pag-usab ug gipalapdan sa indibidwal nga mga sangkap sa porma. Makita nimo kini kanunay ingon $btn-input-*ug $input-*mga variable.

Mga variable

$btn-input-*Ang mga variable gipaambit sa mga global variable tali sa among mga buton ug sa among mga sangkap sa porma. Makit-an nimo kini nga kanunay nga gi-reassign isip mga kantidad sa ubang mga variable nga piho nga sangkap.

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