Mafomu

Overview

Bootstrap's fomu inodzora inowedzera pane yedu Rebooted fomu masitaera nemakirasi. Shandisa makirasi aya kuti usarudze mumaratidziro awo akagadziridzwa kuti awedzere kuenderana mumabhurawuza nemidziyo.

Iva nechokwadi chekushandisa typehunhu hwakakodzera pane zvese zvinopinda (semuenzaniso, emailyeemail kero kana numberyenhamba ruzivo) kutora mukana wezvitsva zvidzoreso zvekupinza sekuona email, kusarudza nhamba, nezvimwe.

Heino muenzaniso wekukurumidza kuratidza Bootstrap's fomu masitaera. Ramba uchiverengera zvinyorwa pamakirasi anodiwa, chimiro chemafomu, nezvimwe.

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

Fomu chinyorwa

Block-level kana inline-level fomu zvinyorwa zvinogona kugadzirwa uchishandisa .form-text.

Mameseji efomu ari pazasi anogona kunyorwa ne .form-text. Kana block-level element ichashandiswa, mucheto wepamusoro unowedzerwa kuti zvive nyore kupatsanura kubva kune izvo zviri pamusoro.

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

Inline text inogona kushandisa chero yakajairwa inline HTML element (ingave a <span>, <small>, kana chimwe chinhu) pasina chimwe chinopfuura .form-textkirasi.

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

Mafomu akaremara

Wedzera iyo disabledboolean hunhu pane inopinza kudzivirira kusangana kwevashandisi uye kuita kuti iite seyakareruka.

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

Wedzera disabledhunhu kune a <fieldset>kudzima zvese zvinodzora mukati. Mabhurawuza anobata ese ekuzvarwa mafomu ekutonga (,, <input>uye <select>zvinhu <button>) mukati <fieldset disabled>seakaremara, kudzivirira zvese zviri zviviri kiibhodhi nembeva kupindirana pazviri.

Nekudaro, kana fomu rako richisanganisira tsika bhatani- senge zvinhu senge <a class="btn btn-*">...</a>, izvi zvinongopihwa maitiro e pointer-events: none, zvichireva kuti zvichiri kutarisika uye kushanda uchishandisa keyboard. Muchiitiko ichi, iwe unofanirwa kushandura magadzirirwo aya nekuwedzera tabindex="-1"kudzivirira kuti asagashire kutarisa uye aria-disabled="disabled"kusaina mamiriro avo kune anobatsira matekinoroji.

<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

Ita shuwa kuti zvese zvinodzorwa mafomu zvine zita rakakodzera rinosvikika kuitira kuti chinangwa chazvo chikwanise kuendeswa kune vashandisi vetekinoroji inobatsira. Nzira iri nyore yekuita izvi ndeye kushandisa <label>chinhu, kana-kana mabhatani-kusanganisira zvinokwana zvinyorwa zvinotsanangura sechikamu <button>...</button>chezvirimo.

Pamamiriro ezvinhu apo zvisingabviri kuisa zvinyorwa zvinooneka <label>kana zvakakodzera, pane dzimwe nzira dzekuramba uchipa zita rinowanikwa, sekuti:

• <label>zvinhu zvakavanzwa uchishandisa .visually-hiddenkirasi
• Kunongedzera kune chinhu chiripo chinogona kuita sechinyorwa chinoshandisaaria-labelledby
• Kupa titlehunhu
• Kunyatso kuseta zita rinosvikika pane chinhu uchishandisaaria-label

Kana pasina chimwe cheizvi chiripo, tekinoroji dzekubatsira dzinogona kushandisa placeholderhunhu sechidzoreso chezita rinosvikika pa <input>uye <textarea>zvinhu. Mienzaniso iri muchikamu chino inopa nzira shoma dzakakurudzirwa, dzakanangana nenyaya.

Paunenge uchishandisa zvinoonekwa zvakavanzika zvemukati (,, .visually-hiddenuye aria-labelkunyange placeholderzvirimo, izvo zvinonyangarika kana fomu remumunda riine zvirimo) zvichabatsira vashandisi vehunyanzvi tekinoroji, kushaikwa kwemavara anooneka angangove achinetsa kune vamwe vashandisi. Imwe mhando yemavara anooneka kazhinji ndiyo nzira yakanakisa, yekuwanika uye kushandiswa.

Sass

Mazhinji mafomu akasiyana akaiswa pamwero wakajairwa kuti ushandiswezve uye kuwedzerwa nezvikamu zvefomu zvega. Iwe uchaona izvi kakawanda se $btn-input-*uye $input-*zvakasiyana.

Variables

$btn-input-*misiyano inogovaniswa machinjiro epasirese pakati pemabhatani edu nemafomu edu ezvikamu. Iwe uchawana izvi zvinowanzo kupihwa zvakare sezviyero kune zvimwe zvikamu-chaiwo zvakasiyana.

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