Source

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.

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="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group 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>

Ditaolo tša foromo

Ditaolo tša sebopego sa sengwalwa—go swana le <input>s, <select>s le <textarea>s—di setaele le .form-controlsehlopha. Go akaretšwa mekgwa ya ponagalo ya kakaretšo, boemo bja go tsepamiša kgopolo, go lekanyetša bogolo le tše dingwe.

Kgonthiša gore o hlahloba diforomo tša rena tša tlwaelo go tšwetša pele setaele <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Bakeng sa ditshenyegelo tša faele, fapantšha .form-controlbakeng sa .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Go lekanyetša bogolo

Beakanya bophagamo o šomiša diklase tša go swana .form-control-lgle le .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Bala feela

Oketša readonlyseka sa boolean go tsenyo go thibela phetošo ya boleng bja tsenyo. Ditseno tša go bala fela di bonala di le bofefo (go swana le ditseno tše di golofetšego), eupša boloka khesara ya maemo.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Sengwalwa se se tlwaelegilego fela

Ge o nyaka go ba le <input readonly>dielemente ka foromong ya gago di setaele bjalo ka sengwalwa se se tlwaelegilego, omia .form-control-plaintextsehlopha go tloa setaele sa tšhemo ya foromo ya maitirelo le go boloka moedi wa maleba le go tlatša.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Ditseno tša Range

Beakanya ditshenyegelo tša legoro tšeo di ka kgokološwago ka go rapalala ka go šomiša .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Mapokisi a go hlahloba le diradio

Mapokisi a go hlahloba a maitirelo le diradio di kaonafatšwa ka thušo ya .form-check, sehlopha se tee sa mehuta ka bobedi ya tsenyo yeo e kaonafatšago peakanyo le boitshwaro bja dielemente tša tšona tša HTML . Mapokisi a go hlahloba ke a go kgetha kgetho e tee goba tše mmalwa lenaneong, mola diradio e le tša go kgetha kgetho e tee go tšwa go tše dintši.

Mapokisi a go hlahloba le diradio tše di golofetšego di a thekgwa, eupša go fa not-allowedkhesara go hover ya motswadi <label>, o tla swanelwa ke go oketša disabledseka go .form-check-input. Sebopego se se golofetšego se tla diriša mmala wo bofefo go thuša go laetša seemo sa tsenyo.

Mapokisi a go hlahloba le diradio ao a omiwago di agilwe go thekga netefato ya foromo ye e theilwego godimo ga HTML le go fa dileibole te di kopana, te di fihlelelwago. Ka ge go le bjalo, <input>s le <label>s ya rena ke dielemente tša bana babo rena go fapana le an <input>ka gare ga a <label>. Se se na le mantšu a mantši go se nene ka ge o swanetše go laetša idle fordika go amana le <input>le <label>.

Default (e kgobokeditšwe) .

Ka go ikemela, palo le ge e le efe ya mapokisi a go hlahloba le diradio tšeo e lego ngwanešo wa kgaufsi di tla kgoboketšwa ka go otlologa gomme tša arolwa ka mo go swanetšego ka .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Ka gare ga mothaladi

Hlopha mapokisi a go hlahloba goba diradio mothalong o swanago wa go rapalala ka go tlaleletša .form-check-inlinego efe goba efe .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Ntle le dileibole

Oketša .position-staticgo ditseno ka gare ga .form-checktšeo di se nago sengwalwa sa leina. Gopola go sa dutše o nea mohuta o itšego wa leina bakeng sa thekinolotši ya go thuša (mohlala, go diriša aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Tlhamego

Ka ge Bootstrap e šoma display: blockle width: 100%go mo e nyakilego go ba ditaolo tša rena ka moka tša foromo, diforomo di tla ka go ikemela go kgoboketša thwii. Diklase tša tlaleletšo di ka šomišwa go fapantšha peakanyo ye motheong wa foromo ka e tee.

Bopa dihlopha

Tlelase .form-groupke tsela ye bonolo ya go oketša sebopego se sengwe go diforomo. E fa sehlopha se se fetofetogago seo se hlohleletšago go hlopha ka tshwanelo ga dileibole, ditaolo, sengwalwa sa thušo sa boikgethelo, le melaetša ya netefatšo ya foromo. By default it only applies margin-bottom, empa e lata mekhoa e eketsehileng ka .form-inlinee le ho hlokahala. E diriše le <fieldset>s, <div>s goba mo e nyakilego go ba elemente le ge e le efe e nngwe.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Foromo ya keriti

Diforomo tše di raraganego kudu di ka agwa ka go šomiša diklase tša rena tša keriti. Šomiša tše bakeng sa dipeakanyo tša foromo tšeo di nyakago dikholomo tše dintši, bophara bjo bo fapanego, le dikgetho tša tlaleletšo tša go logaganya.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Mothaladi wa foromo

O ka boela wa fapantšha .rowbakeng sa .form-row, e lego phetogo ya mothaladi wa rena wa keriti wa maemo wo o tlošago diphaephe tša kholomo tša go se fetoge bakeng sa dipeakanyo tše di tiilego le tše di kopanego kudu.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Dipeakanyo tše di raraganego kudu le tšona di ka hlolwa ka tshepedišo ya keriti.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Foromo e rapameng

Hlama diforomo ta go rapalala ka keriti ka go tlaleleta .rowsehlopha go bopa dihlopha le go omia .col-*-*diklase go laeta bophara bja dileibole ta gago le ditaolo. Kgonthiša gore o tlaleletša .col-form-labelgo s ya gago <label>gape gore di tsepame thwii ka ditaolo tša tšona tša foromo tše di sepedišanago le tšona.

Ka dinako tše dingwe, mo gongwe o swanetše go diriša didirišwa tša ka thoko goba tša go tlatša go bopa go logaganya moo mo go phethagetšego mo o go nyakago. Go fa mohlala, re tlošitše padding-topleibole ya rena ya ditseno tša radio tše di kgobokeditšwego go logaganya motheo wa sengwalwa gakaone.

Diradio
Lepokisi la go hlahloba 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Horizontal foromo leibole sizing

Kgonthiša gore o šomiša .col-form-label-smgoba .col-form-label-lggo <label>s goba s ya gago <legend>go latela ka nepagalo bogolo bja .form-control-lgle .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Go lekanyetša bogolo bja kholomo

Bjalo ka ge go bontšhitšwe mehlaleng ye e fetilego, tshepedišo ya rena ya keriti e go dumelela go bea palo efe goba efe ya .cols ka gare ga .rowgoba .form-row. Ba tla arola bophara bjo bo lego gona ka go lekana magareng ga bona. O ka kgetha gape sehlopha se senyenyane sa dikholomo tša gago go tšea sekgoba se segolo goba se senyenyane, mola .cols ye e šetšego e aroganya tše dingwe ka go lekana, ka diklase tša dikholomo tše di itšego tša go swana le .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Go dira bogolo bja go itiriša

Mohlala wo o lego ka mo tlase o šomiša sedirišwa sa flexbox go tsepamiša dikagare ka go otlologa le diphetogo .colgo .col-autogore dikholomo tša gago di tšee fela sekgoba se segolo ka moo go nyakegago. Ge re bea ka tsela ye nngwe, kholomo e itšeela bogolo go ya ka dikagare.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Ka morago o ka hlakanya seo gape gape ka diklase tša dikholomo tše di itšego tša bogolo.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Gomme go ba gona ditaolo tša foromo ya tlwaelo di a thekgwa.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Diforomo tša ka gare ga mothaladi

Šomiša .form-inlinesehlopha go bontšha lelokelelo la dileibole, ditaolo tša foromo, le dikonope mo moleng o tee wo o rapaletšego. Ditaolo tša foromo ka gare ga diforomo tša ka gare ga mothaladi di fapana gannyane go tšwa go maemo a tšona a go se fetoge.

  • Ditaolo ke display: flex, go phuhlama sekgoba sefe goba sefe se sešweu sa HTML le go go dumelela go fa taolo ya go logaganya ka sekgoba le didirišwa tša flexbox .
  • Ditaolo le dihlopha tša tsenyo di amogela width: autogo tloša Bootstrap ya go se fetoge width: 100%.
  • Ditaolo di tšwelela fela ka gare ga mothaladi ka go dipono tša go lebelela tšeo di nago le bonyane bja 576px ka bophara go ikarabela ka dipono tše tshesane go didirišwa tša sellathekeng.

O ka swanelwa ke go rarolla ka seatla bophara le go logaganya ga ditaolo tša foromo ka botee ka didirišwa tša sekgoba (bjalo ka ge go bontšhitšwe ka mo tlase). Labofelo, kgonthišetša gore ka mehla o akaretša <label>le taolo e nngwe le e nngwe ya foromo, gaešita le ge o swanetše go e uta go baeti bao e sego babadi ba skrine ka .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Ditaolo tša foromo ya tlwaelo le dikgetho le tšona di a thekgwa.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Dilo tše dingwe go e na le dileibole tše di utilwego

Dithekinolotši tša go thuša tša go swana le dibadi tša skrine di tla ba le bothata ka diforomo tša gago ge o sa akaretše leina la tsenyo ye nngwe le ye nngwe. Bakeng sa diforomo te ta ka gare ga mothaladi, o ka uta dileibole o omia .sr-onlysehlopha. Go na le mekgwa ye mengwe ye mengwe ya go fa leina la theknolotši ya go thuša, go swana le aria-label, aria-labelledbygoba titleseka. 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, ge e le gona, eupša ela hloko gore tšhomišo ya placeholderbjalo ka legato la mekgwa ye mengwe ya go swaya ga e eletšwe.

Sengwalwa sa thušo

Sengwalwa sa thušo sa maemo a boloko ka diforomong se ka hlolwa ka go šomiša .form-text(yeo pele e bego e tsebja bjalo .help-blockka go v3). Sengwalwa sa thušo sa ka gare ga mothaladi se ka phethagatšwa ka go fetofetoga ka go šomiša elemente efe goba efe ya HTML ya ka gare ga mothaladi le diklase tša mohola go swana le .text-muted.

Go tswalanya sengwalwa sa thušo le ditaolo tša foromo

Sengwalwa sa thušo 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 thušo ge modiriši a tsepamiša kgopolo goba a tsena taolong.

Sengwalwa sa thušo ka fase ga ditseno se ka setaele ka .form-text. Sehlopha se se akaretša display: blockle go tlaleletša ka thoko ye nngwe ya godimo 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">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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 <small>, <span>, goba se sengwe) seo se se nago selo go feta sehlopha sa mohola.

E swanetše go ba le botelele bja ditlhaka tše 8-20. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Temošo ka ditshetledi

Ka go ikemela, diphensele di tla 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 gape e akaretša <a ... class="btn btn-*">dielemente, tše di tla fiwa fela setaele sa pointer-events: none. Bjalo ka ge go lemogilwe karolong ya mabapi le boemo bjo bo golofetšego bakeng sa dikonope (gomme ka go lebanya karolong ya ka tlase bakeng sa dielemente tša ankora), thepa ye ya CSS ga se ya hlwa e bewa maemong e bile ga e thekgwe ka botlalo go Internet Explorer 10, gomme e ka se thibele badiriši ba khiiboto go ba bjalo kgona go tsepamiša kgopolo goba go tsenya tirišong dikgokagano tše. Ka gona gore o bolokege, diriša JavaScript ya tlwaelo go šitiša dikgokagano tše bjalo.

Go sepelelana ga sefapano sa sephephediši

Le ge Bootstrap e tla diriša mekgwa ye go diphensele ka moka, Internet Explorer 11 le ka tlase ga e thekge ka botlalo disabledseka go a <fieldset>. Šomiša JavaScript ya tlwaelo go šitiša sete ya tšhemo go diphensele tše.

Netefatšo

Fana ka ditshwaelo tša bohlokwa, tše di ka tšewago kgato go badiriši ba gago ka netefatšo ya foromo ya HTML5– yeo e hwetšagalago go diphensele tša rena ka moka tšeo di thekgwago . Kgetha go tšwa go ditshwayotshwayo tša netefatšo ya go se fetoge ya sephephediši, goba phethagatša melaetša ya tlwaelo ka diklase tša rena tše di agetšwego ka gare le JavaScript ya go thoma.

Ga bjale re kgothaletša go šomiša mekgwa ya netefatšo ya tlwaelo, ka ge melaetša ya netefatšo ya go se fetoge ya sephephediši sa setlogo e sa pepentšhitšwe ka go se fetoge go theknolotši ya go thuša go diphensele ka moka (kudukudu, Chrome go komporong le sellathekeng).

Kamoo e šomago ka gona

Mona ke kamoo netefatšo ya foromo e šomago ka gona ka Bootstrap:

  • Netefatšo ya foromo ya HTML e dirišwa ka dihlopha tše pedi tša maaka tša CSS, :invalidle :valid. E šoma go <input>, <select>, le <textarea>dielemente.
  • Bootstrap e akaretša :invalidle :validmekgwa go sehlopha sa motswadi .was-validated, gantši e dirišwa go <form>. Go sego bjalo, tšhemo efe goba efe ye e nyakegago ye e se nago boleng e bontšha bjalo ka yeo e sa šomego go laetša letlakala. Ka tsela ye, o ka kgetha gore o tla di tsenya tirišong neng (ka tlwaelo ka morago ga ge go lekile go romela foromo).
  • Go seta gape ponagalo ya foromo (mohlala, tabeng ya ditlhagišo tša foromo ye e fetogago ka go šomiša AJAX), tloša .was-validatedsehlopha go tšwa go <form>gape ka morago ga thomelo.
  • Bjalo ka fallback, .is-invalidgomme .is-validdiklase di ka šomišwa go e na le diklase tša maaka bakeng sa netefatšo ya lehlakore la seva . Ga di nyake .was-validatedsehlopha sa motswadi.
  • Ka lebaka la dithibelo tša ka fao CSS e šomago ka gona, re ka se kgone (ga bjale) go diriša mekgwa go a <label>yeo e tlago pele ga taolo ya foromo ka go DOM ntle le thušo ya JavaScript ya tlwaelo.
  • Diphensele ka moka tša sebjalebjale di thekga API ya netefatšo ya thibelo , letoto la mekgwa ya JavaScript ya go netefatša ditaolo tša foromo.
  • Melaetša ya ditshwayotshwayo e ka šomiša dilo tša go se fetoge tša sephephediši (tše di fapanego bakeng sa sephephediši se sengwe le se sengwe, le tšeo di sa setaelego ka CSS) goba mekgwa ya rena ya ditshwayotshwayo ya tlwaelo ka HTML le CSS ya tlaleletšo.
  • O ka fana ka melaetša ya go nepagala ya tlwaelo ka setCustomValidityka go JavaScript.

Ka seo ka kgopolong, nagana ka di-demo tše di latelago bakeng sa mekgwa ya rena ya go netefatša foromo ya tlwaelo, diklase tša lehlakore la seva tša boikhethelo, le dilo tša go se fetoge tša sephephediši.

Mekgwa ya tlwaelo

Bakeng sa melaetša ya netefatšo ya foromo ya Bootstrap ya tlwaelo, o tla swanelwa ke go oketša novalidateseka sa boolean go ya gago <form>. Se se šitiša didirišwa tša ditshwayotshwayo tša maitirelo tša sephephediši, eupša se sa fa phihlelelo go di-API tša netefatšo ya foromo ka go JavaScript. Leka go romela foromo ye e lego ka mo tlase; JavaScript ya rena e tla thibela konope ya go romela gomme ya go fetišetša ditshwayotshwayo.

Ge o leka go romela, o tla bona :invalidle :validditaele di dirišitšwe go ditaolo tša gago tša foromo.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Di-default tša sephephediši

Ga o na kgahlego go melaetša ya ditshwayotshwayo tša netefatšo ya tlwaelo goba go ngwala JavaScript go fetoša maitshwaro a foromo? All molemo, o ka sebelisa sebadi defaults. Leka go romela foromo ye e lego ka mo tlase. Go ya ka sephephediši sa gago le OS, o tla bona setaele se se fapanego ganyenyane sa ditshwayotshwayo.

Le ge e le gore mekgwa ye ya ditshwaotshwao e ka se kgone go setaele ka CSS, o sa kgona go tlwaetša sengwalwa sa ditshwaotshwao ka JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Lehlakore la seva

Re kgothaletša go diriša netefatšo ya lehlakore la moreki, eupša ge go ka direga gore o nyaka lehlakore la seva, o ka bontšha mafelo a foromo ao a sa šomego le ao a šomago ka .is-invalidle .is-valid. Hlokomela gore .invalid-feedbackgape e thekgwa ka diklase tše.

E bonala e le e botse!
E bonala e le e botse!
@
Hle kgetha leina la mosediriši.
Hle fana ka motse wo o šomago.
Hle fana ka boemo bjo bo šomago.
Hle fana ka zip e šomago.
O swanetše go dumela pele o romela. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Dielemente tše di thekgwago

Diforomo tša rena tša mohlala di bontšha s ya sengwalwa sa setlogo <input>ka godimo, eupša mekgwa ya netefatšo ya foromo e a hwetšagala bakeng sa ditaolo tša rena tša foromo ya tlwaelo, le tšona.

Mohlala wa sengwalwa sa ditshwaotshwao seo se sa šomego
Mohlala o montši sengwalwa sa ditshwaotshwao se se sa šomego
Mohlala sa nepahetseng tloaelo kgetha ditshwaelo
Mohlala ditshwaelo tša faele ya tlwaelo ye e sa šomego 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Dikeletšo tša didirišwa

Ge e le gore peakanyo ya gago ya foromo e e dumelela, o ka fapantšha .{valid|invalid}-feedbackdiklase ka .{valid|invalid}-tooltipdiklase go bontšha ditshwaotshwao tša netefatšo ka go keletšo ya sedirišwa ya setaele. Kgonthišetša gore o na le motswadi yo a nago le position: relativegodimo ga yona bakeng sa go beakanya keletšo ya didirišwa. Mohlaleng wo o lego ka mo tlase, diklase tša rena tša dikholomo di šetše di na le se, eupša porojeke ya gago e ka nyaka peakanyo ye nngwe.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Diforomo tša tlwaelo

Bakeng sa go tlwaetša le go feta le go se fetoge ga sephephediši sa sefapano, diriša dielemente tša rena tša foromo ya tlwaelo ka botlalo go tšea legato la dilo tša go se fetoge tša sephephediši. Di agilwe godimo ga go swaya ga semantiki le mo go fihlelelwago, ka fao ke diphetogo tše di tiilego tša taolo efe goba efe ya foromo ya go se fetoge.

Mapokisi a go hlahloba le diradio

Lepokisi le lengwe le le lengwe la go hlahloba le radio di phuthetšwe ka a <div>le ngwanešo <span>go hlama taolo ya rena ya tlwaelo le a <label>bakeng sa sengwalwa seo se sepelago le yona. Ka sebopego, ye ke mokgwa o swanago le wa rena wa go se fetoge .form-check.

Re diriša mokgethi wa bana babo rena ( ~) bakeng sa <input>dilete tša rena ka moka—go swana le :checked—go setaele gabotse sešupo sa rena sa foromo ya tlwaelo. Ge re kopantšwe le .custom-control-labelsehlopha, re ka boela ra setaele sa sengwalwa sa selo se sengwe le se sengwe go ya ka seemo sa <input>'s.

Re uta default <input>ka opacityle go šomiša .custom-control-labelgo aga sešupo se sefsa sa foromo ya tlwaelo lefelong la sona ka ::beforele ::after. Ka bomadimabe re ka se kgone go aga ya tlwaelo go tšwa go feela ka <input>gobane CSS's contentga e šome go elemente yeo.

Ka e re hlahlojoa, re sebelisa base64 embedded SVG diaekhone ho tloha Open Iconic . Se se re fa taolo ye kaone ya go dira setaele le go beakanya go ralala le diphensele le didirišwa.

Mapokisi a go hlahloba

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Mapokisi a go hlahloba a tlwaelo a ka šomiša gape :indeterminatesehlopha sa maaka ge se beakantšwe ka seatla ka JavaScript (ga go na seka sa HTML seo se lego gona sa go se laetša).

Ge e ba o diriša jQuery, selo se sengwe sa go swana le se se swanetše go lekana:

$('.your-checkbox').prop('indeterminate', true)

Diradio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Ka gare ga mothaladi

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Šitišitšwe

Mapokisi a go hlahloba a tlwaelo le diradio le tšona di ka šitišwa. Oketša disabledseka sa boolean go <input>le sešupo sa tlwaelo le tlhalošo ya leina di tla bewa setaele ka go iketla.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Kgetha menu ya

Dimenu tša tlwaelo <select>di nyaka fela sehlopha sa tlwaelo, .custom-selectgo hlohleletša mekgwa ya tlwaelo. Mekgwa ya tlwaelo e lekanyeditšwe go <select>ponagalo ya mathomo ya 's gomme e ka se fetoše <option>s ka lebaka la mellwane ya sephephediši.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

O ka kgetha gape go tšwa go dikgetho tša tlwaelo tše nnyane le tše kgolo go swana le ditseno tša rena tša sengwalwa tša bogolo bjo bo swanago.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sebopego multiplese a thekgwa gape:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Bjalo ka ge go le bjalo ka sizeseka:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Mehutahuta

Hlama <input type="range">ditaolo tša tlwaelo ka .custom-range. Pina (morago) le monwana o mogolo (boleng) ka bobedi di setaele go tšwelela go swana go ralala le diphensele. Bjalo ka ge e le feela IE le Firefox tšeo di thekgago go “tlatša” pina ya tšona go tšwa ka go le letshadi goba ka go le letona la monwana o mogolo e le mokgwa wa go bontšha tšwelopele ka pono, ga bjale ga re e thekge.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Range inputs na le boleng implicit bakeng sa minle max— 0le 100, ka ho latellana. O ka laetša dikelo tše mpsha tša bao ba šomišago dika tša minle max.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Ka default, fapaneng inputs “snap” ho boleng palo e feletseng. Go fetola se, o ka laeta stepboleng. Mohlaleng wo o lego ka mo tlase, re oketša palo ya megato gabedi ka go diriša step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Sephephediši sa faele

Tsenyo ya faele ke yeo e nago le gnarly kudu ya sehlopha gomme e nyaka JavaScript ya tlaleletšo ge o rata go di kgokaganya ka Kgetha faele ye e šomago... le sengwalwa sa leina la faele seo se kgethilwego.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Re uta faele ya go se fetoge <input>ka opacitygomme go e na le moo re setaele <label>. Konopo e tšweletšwa le go bewa ka ::after. Labofelo, re tsebagatša a widthle heightgodimo ga <input>bakeng sa sekgoba se se swanetšego bakeng sa dikagare tše di dikologilego.

Go fetolela goba go tlwaetša dithapo

Sehlopha sa :lang()maaka se šomišwa go dumelela go fetolelwa ga sengwalwa sa “Browse” go malemeng a mangwe. Tloša goba o tlaleletša dikeno go $custom-file-textphetogo ya Sass ka leswao la polelo la maleba le dithapo tša selegae. Dithapo tša Seisemane di ka rulaganywa ka tsela e swanago. Ka mohlala, mo ke kamoo motho a ka oketšago phetolelo ya Sepaniši (khoutu ya polelo ya Sepaniši ke es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Mona ke lang(es)ka tiro ka tsenyo ya faele ya tlwaelo bakeng sa phetolelo ya Sepanishe:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

O tla swanelwa ke go beakanya polelo ya tokumente ya gago (goba sehlare sa ka fasana sa yona) ka nepagalo gore sengwalwa se se nepagetšego se bontšhwe. Se se ka dirwa ka go šomiša seka langgodimo ga <html>elemente goba Content-Languagehlogo ya HTTP , gare ga mekgwa ye mengwe.