Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Diforomo

Mehlala le ditlhahlo ta tirio ta mekgwa ya taolo ya foromo, dikgetho ta peakanyo, le dikarolo ta tlwaelo ta go hlama mehutahuta ya diforomo.

Letlakaleng le
Taolo ya foromo Setaele sa ditseno ta sengwalwa le mafelo a sengwalwa ka thekgo ya dilete te nti.
Kgetha Kaonafatša dielemente tša go kgetha tša go se fetoge tša sephephediši ka ponagalo ya mathomo ya tlwaelo.
Ditshekatsheko & diradio Šomiša dikonope tša rena tša radio tša tlwaelo le mapokisi a go hlahloba ka diforomong tša go kgetha dikgetho tša go tsenya.
Mehutahuta Efa sebadi sebakeng sa ditshenyegelo tša mohuta wa go se fetoge ka phetolelo ya rena ya tlwaelo.
Sehlopha sa tsenyo Kgomaretša dileibole le dikonope go ditseno tša gago bakeng sa boleng bjo bo oketšegilego bja semantiki.
Dileibole tše di phaphametšego Hlama dileibole tša foromo tše bonolo gabotse tšeo di phaphametšego godimo ga mafelo a gago a tsenyo.
Tlhamego Hlama dipeakanyo tša ka gare ga mothaladi, tše di rapaletšego, goba tše di raraganego tše di theilwego godimo ga keriti ka diforomo tša gago.
Netefatšo Netefatša diforomo tša gago ka maitshwaro le mekgwa ya netefatšo ya tlwaelo goba ya setlogo.

Kakaretšo

Ditaolo tša foromo tša Bootstrap di atološa go mekgwa ya rena ya foromo ya Rebooted ka diklase. Šomiša diklase tše go kgetha go tsena dipontšhong tša tšona tše di rulagantšwego bakeng sa phetolelo ye e sa fetogego kudu go ralala le diphensele le didirišwa.

Kgonthiša gore o šomiša typeseka sa maleba go ditseno ka moka (mohlala, emailbakeng sa aterese ya imeile goba numberbakeng sa tshedimošo ya dipalo) go diriša mohola wa ditaolo tše mpsha tša tsenyo go swana le netefatšo ya imeile, kgetho ya dinomoro, le tše dingwe.

Mohlala wa ka pela wa go bontšha mekgwa ya foromo ya Bootstrap ke ye. Tšwela pele o bala bakeng sa ditokomane tša diklase tše di nyakegago, peakanyo ya foromo, le tše dingwe.

Re ka se tsoge re abelana imeile ya gago le motho yo mongwe. 
<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>

Foromo sengwalwa

Sengwalwa sa foromo sa maemo a boloko goba sa maemo a ka gare ga mothaladi se ka hlolwa ka go šomiša .form-text.

Go tswalanya sengwalwa sa foromo le ditaolo ta foromo

Sengwalwa sa foromo se swanetše go tswalanywa ka go lebanya le taolo ya foromo yeo e amanago le go šomiša aria-describedbyseka. Se se tla netefatša gore theknolotši ya go thuša—go swana le dibadi tša skrine—di tla tsebiša sengwalwa se sa foromo ge modiriši a tsepamiša kgopolo goba a tsena taolong.

Sengwalwa sa foromo ka fase ga ditseno se ka setaele ka .form-text. Ge e le gore elemente ya maemo a boloko e tla šomišwa, moedi wa godimo o okeletšwa bakeng sa sekgoba se bonolo go tšwa go ditseno tše di lego ka godimo.

Phasewete ya gago e swanetše go ba le botelele bja ditlhaka tše 8-20, e be le ditlhaka le dinomoro, gomme ga se ya swanela go ba le dikgoba, ditlhaka tše di kgethegilego, goba emoji. 
<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>

Sengwalwa sa ka gare ga mothaladi se ka šomiša elemente efe goba efe ye e tlwaelegilego ya HTML ya ka gare ga mothaladi (e ka ba <span>, <small>, goba se sengwe) ka go se be le selo go feta .form-textsehlopha.

E swanetše go ba le botelele bja ditlhaka tše 8-20. 
<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>

Diforomo tša bao ba golofetšego

Oketša disabledseka sa boolean go tsenyo go thibela ditirišano tša modiriši le go dira gore e bonagale e le bofefo.

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

Oketša disabledseka go a <fieldset>go šitiša ditaolo ka moka ka gare. Diphensele di swara ditaolo ka moka tša foromo ya setlogo ( <input>, <select>, le <button>dielemente) ka gare ga a <fieldset disabled>bjalo ka tšeo di golofetšego, go thibela bobedi ditirišano tša khiiboto le toeba go tšona.

Le ge go le bjalo, ge e le gore foromo ya gago e akaretša gape le dielemente tša go swana le konope ya tlwaelo tša go swana le <a class="btn btn-*">...</a>, tše di tla fiwa fela setaele sa pointer-events: none, go ra gore di sa tsepama ebile di šoma ka go šomiša khiiboto. Tabeng ye, o swanetše go fetoša ka seatla ditaolo tše ka go tlaleletša tabindex="-1"go di thibela go amogela nepo le aria-disabled="disabled"go laetša boemo bja tšona go theknolotši ya go thuša.

Mohlala wa sete ya tšhemo ye e golofetšego 
<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>

Phihlelelo

Netefatša gore ditaolo ka moka tša foromo di na le leina la maleba leo le fihlelelwago gore morero wa tšona o kgone go fetišetšwa go badiriši ba theknolotši ya go thuša. Tsela ye bonolo ya go fihlelela se ke go šomiša <label>elemente, goba—mo tabeng ya dikonope—go akaretša sengwalwa seo se hlalošago ka mo go lekanego bjalo ka karolo ya <button>...</button>diteng.

Bakeng sa maemo ao go ona go sa kgonegego go akaretša <label>diteng tša sengwalwa tše di bonagalago goba tša maleba, go na le ditsela tše dingwe tša go sa fa leina leo le fihlelelwago, go swana le:

  • <label>elements patiloeng sebelisa .visually-hiddensehlopha
  • Go šupa elemente ye e lego gona yeo e ka šomago bjalo ka leina ka go šomišaaria-labelledby
  • Go fana ka titleseka
  • Beakanya ka go lebanya leina leo le fihlelelwago godimo ga elemente ka go šomišaaria-label

Ge e le gore ga go le e tee ya tše yeo e lego gona, theknolotši ya go thuša e ka retologela go šomiša placeholderseka bjalo ka go boela morago bakeng sa leina leo le fihlelelwago godimo <input>le <textarea>dielemente. Mehlala yeo e lego karolong ye e fa mekgwa ye mmalwa ye e šišintšwego, yeo e lebanego le taba ye e itšego.

Le ge go šomiša diteng tše di utilwego ka pono ( .visually-hidden, aria-label, gaešita le placeholderditeng, tšeo di nyamelelago ge tšhemo ya foromo e šetše e na le diteng) go tla hola badiriši ba theknolotši ya go thuša, go hloka sengwalwa sa leibole seo se bonagalago go sa dutše go ka ba bothata go badiriši ba itšego. Mohuta o itšego wa leina le le bonagalago ka kakaretšo ke mokgwa wo mokaone, bobedi bakeng sa phihlelelo le go šomišega.

Sass

Diphetogo tše ntši tša foromo di bewa maemong a kakaretšo go šomišwa gape le go katološwa ke dikarolo tša foromo ka botee. O tla bona tše gantši kudu bjalo ka $btn-input-*le $input-*diphetogo.

Diphetogo

$btn-input-*diphetogo ke diphetogo tša lefase ka bophara tšeo di abelanwago magareng ga dikonope tša rena le dikarolo tša rena tša foromo. O tla hwetša tše di abelwa gape gantši bjalo ka dikelo go diphetogo tše dingwe tše di itšego tša karolo.

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