Ffoomu

Okulaba okutwalira awamu

Ebifuga foomu bya Bootstrap bigaziya ku sitayiro zaffe eza foomu eya Rebooted ne kiraasi. Kozesa kiraasi zino okulonda mu kwolesebwa kwazo okulongooseddwa okusobola okulaga okukwatagana obulungi mu bulawuzi n’ebyuma.

Kakasa nti okozesa ekintu ekituufu typeku biyingizibwa byonna (okugeza, emailku ndagiriro ya email oba numberku mawulire ag’omuwendo) okweyambisa ebifuga ebipya ebiyingizibwa nga okukakasa email, okulonda ennamba, n’ebirala.

Wano waliwo ekyokulabirako eky'amangu okulaga emisono gya Bootstrap egya ffoomu. Sigala ng’osoma okufuna ebiwandiiko ku bibiina ebyetaagisa, ensengeka ya foomu, n’ebirala.

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

Foomu ekiwandiiko

Ebiwandiiko bya foomu eby'omutendera gwa bbulooka oba ogw'omu layini bisobola okutondebwa nga okozesa .form-text.

Ebiwandiiko bya foomu wansi w'ebiyingizibwa bisobola okukolebwako sitayiro ne .form-text. Singa elementi ya block-level ejja kukozesebwa, margin eya waggulu eyongerwako okusobola okwanguyirwa ebanga okuva ku inputs waggulu.

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

Ebiwandiiko ebiri mu layini bisobola okukozesa ekintu kyonna ekya bulijjo ekya HTML ekiri mu layini (kabeere <span>, <small>, oba ekintu ekirala) nga tewali kisingako ku .form-textkiraasi.

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

Ffoomu z’abalema

Okwongerako ekintu kya disabledboolean ku kiyingizibwa okuziyiza enkolagana y'abakozesa n'okukifuula okulabika ng'ekitangaala.

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

Okwongerako disabledekintu ku a <fieldset>okulemesa ebifuga byonna ebiri munda. Browsers zitwala byonna ebifuga ffoomu enzaaliranwa ( <input>, <select>, ne <button>elements) munda mu a <fieldset disabled>nga ebiremeseddwa, okulemesa byombi keyboard ne mouse enkolagana ku byo.

Naye singa foomu yo era erimu ebintu ebiringa bbaatuuni eya bulijjo nga <a class="btn btn-*">...</a>, bino bijja kuweebwa sitayiro ya pointer-events: none, ekitegeeza nti bikyali bisobola okussa essira era nga bikola ng’okozesa kiiboodi. Mu mbeera eno, olina okukyusa mu ngalo ebifuga bino ng’ogattako tabindex="-1"okubiziyiza okufuna essira n’okulaga aria-disabled="disabled"embeera yabyo eri tekinologiya ayamba.

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

Okutuuka ku bantu

Okukakasa nti ebifuga foomu byonna birina erinnya erisaanira erituukirirwa ekigendererwa kyabyo kisobole okutuusibwa eri abakozesa tekinologiya ayamba. Engeri ennyangu ey’okutuukiriza kino kwe kukozesa <label>ekintu, oba —mu mbeera ya buttons —okussaamu ebiwandiiko ebinnyonnyola ekimala ng’ekitundu <button>...</button>ky’ebirimu.

Ku mbeera nga tekisoboka kussaamu <label>bigambo bya biwandiiko ebirabika oba ebituufu, waliwo engeri endala ez’okukyawa erinnya erituukirirwa, gamba nga:

• <label>elements ezikwekebwa nga tukozesa .visually-hiddenekibiina
• Okusonga ku elementi eriwo eyinza okukola nga label nga okozesaaria-labelledby
• Okuwa ekintu ekiyitibwa titleattribute
• Okuteeka mu bulambulukufu erinnya erituukirirwa ku elementi nga okozesaaria-label

Singa tewali n’emu ku bino ebaawo, tekinologiya ayamba ayinza okuddukira mu kukozesa placeholderekintu ng’okudda emabega ku linnya erituukirirwa ku <input>n’ebintu <textarea>. Ebyokulabirako ebiri mu kitundu kino biwa enkola entonotono eziteeseddwa, ezikwata ku nsonga ezitali zimu.

Wadde ng’okukozesa ebirimu ebikwekebwa mu ngeri ey’okulaba ( .visually-hidden, aria-label, placeholdern’ebirimu, ebibula oluvannyuma lw’ennimiro ya foomu okuba n’ebirimu) kijja kuganyula abakozesa tekinologiya ayamba, obutaba na biwandiiko bya kiwandiiko ebirabika kiyinza okuba nga kikyali kizibu eri abakozesa abamu. Engeri emu ey’akabonero akalabika okutwalira awamu y’enkola esinga obulungi, ey’okutuuka n’okukozesebwa.

Sass nga bwe kiri

Enkyukakyuka za ffoomu nnyingi ziteekebwa ku mutendera ogw’awamu okuddamu okukozesebwa n’okugaziwa ebitundu bya ffoomu ssekinnoomu. Bino ojja kusinga okulaba nga $btn-input-*ne $input-*variables.

Enkyukakyuka ezikyukakyuka

$btn-input-*enkyukakyuka zigabanyizibwa enkyukakyuka ez’ensi yonna wakati wa buttons zaffe n’ebitundu byaffe ebya ffoomu. Ojja kusanga bino nga biddamu okuweebwa nga emiwendo eri enkyukakyuka endala ezikwata ku kitundu.

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