Foomamka

Dulmar

Koontaroolada foomamka Bootstrap waxay ku fidiyaan qaababkayada qaabka dib loo furay oo leh fasalo. Isticmaal fasalladan si aad u dooratid bandhigyadooda loo habeeyey si ay si joogto ah uga dhex muuqdaan daalacashada iyo qalabka.

Hubi inaad isticmaasho typesifo ku habboon dhammaan agabyada (tusaale, emailciwaanka iimaylka ama numbermacluumaadka nambarada) si aad uga faa'iidaysato kontaroolada cusub ee gelinta sida xaqiijinta iimaylka, xulashada lambarka, iyo in ka badan.

Waa kuwan tusaale degdeg ah oo lagu muujinayo qaababka foomka Bootstrap. Sii wad inaad akhrido dukumentiyada fasallada loo baahan yahay, qaabaynta foomka, iyo in ka badan.

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

Qoraalka foomka

Heerka xannibaadda ama qoraalka qaab-hoosaadka ayaa la samayn karaa iyadoo la isticmaalayo .form-text.

Qoraalka foomka hoos ku qoran waxa lagu dhejin karaa .form-text. Haddii curiyaha heerka block la isticmaali doono, margin sare ayaa lagu darayaa si ay u fududaato kala dheeraynta agabyada sare.

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

Qoraalka khadka dhexda ah wuxuu isticmaali karaa HTML kasta oo khad dhexdeed ah (ha ahaado a <span>, <small>, ama wax kale) oo aan waxba ka badan .form-textfasalka.

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

Foomamka naafada

Ku dar disabledsifada boolean gelinta si aad uga hortagto isdhexgalka isticmaalaha oo ay u muuqato mid fudud.

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

Ku dar disabledsifada a <fieldset>si aad u joojiso dhammaan kontaroolada ku jira. Browser-yadu waxay ula dhaqmaan dhammaan kontaroolada qaabka asalka ah ( <input>, <select>, iyo <button>walxaha) gudaha <fieldset disabled>sida naafo, iyaga oo ka hortagaya isdhexgalka kiiboodhka iyo jiirka labadaba.

Si kastaba ha ahaatee, haddii foomkaaga uu sidoo kale ku jiro walxaha u eg badhamada sida <a class="btn btn-*">...</a>, kuwan waxaa la siin doonaa oo kaliya qaabka pointer-events: none, taasoo la micno ah inay wali yihiin kuwo diirada lagu saari karo oo la shaqayn karo iyadoo la isticmaalayo kiiboodhka. Xaaladdan oo kale, waa inaad gacanta ku beddeshaa kontarooladan adigoo ku daraya tabindex="-1"si aad uga hortagto inay helaan diiradda iyo aria-disabled="disabled"inaad u muujiso xaaladdooda tignoolajiyada caawinta.

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

Helitaanka

Hubi in dhammaan kontaroolada foomku ay leeyihiin magac la heli karo oo ku habboon si ujeeddadooda loogu gudbiyo isticmaalayaasha tignoolajiyada caawinta. Habka ugu fudud ee tan lagu gaari karo waa in la isticmaalo <label>curiye, ama-haddii ay dhacdo badhamada-in lagu daro qoraal ku filan oo sifayn leh oo qayb ka ah <button>...</button>nuxurka.

Xaaladaha aysan suurtagal ahayn in lagu daro qoraal muuqda <label>ama habboon, waxaa jira habab kale oo weli loo bixin karo magac la heli karo, sida:

• <label>walxaha qarsoon ee isticmaalaya .visually-hiddenfasalka
• Tilmaanta shay jira oo u dhaqmi kara calaamad ahaan iyadoo la isticmaalayoaria-labelledby
• Bixinta titlesifo
• Si toos ah u deji magaca la heli karo ee shay isticmaalayaaria-label

Haddi kuwaan midkoodna uusan jirin, tignoolajiyada caawinta ayaa laga yaabaa inay u adeegsadaan placeholdersifada dib-u-dhac ku yimaada magaca la heli karo <input>iyo <textarea>walxaha. Tusaalooyinka qaybtan waxay bixiyaan dhowr la soo jeediyay, habab kiis gaar ah.

Iyadoo la isticmaalayo muuqaal qarsoon ( .visually-hidden, aria-label, iyo xitaa placeholdernuxurka , kaas oo baaba'aya mar haddii goobta foomku ay leedahay nuxur) waxay ka faa'iideysan doontaa isticmaalayaasha tignoolajiyada caawiya, la'aanta qoraalka calaamada muuqda ayaa wali dhibaato ku ah isticmaalayaasha qaarkood. Nooc ka mid ah calaamadda muuqata ayaa guud ahaan ah habka ugu wanaagsan, labadaba helitaanka iyo isticmaalka.

Sass

doorsoomayaal badan oo foom ah ayaa loo dejiyay heer guud si dib loogu isticmaalo laguna kordhiyo qaybaha qaabka gaarka ah. Waxaad u arki doontaa kuwan inta badan sida $input-btn-*iyo $input-*doorsoomayaasha.

Kala duwanaansho

$input-btn-*doorsoomayaasha waa doorsoomayaal caalami ah oo la wadaago inta u dhaxaysa badhamadayada iyo qaybaha qaabkeena. Waxaad ka heli doontaa kuwan oo si joogta ah dib loogu meeleeyay inay yihiin qiimeeyaal kale oo ka kooban qaybo gaar ah.

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