Source

Amafomu

Izibonelo nemihlahlandlela yokusetshenziswa yezitayela zokulawula amafomu, izinketho zesakhiwo, kanye nezingxenye zangokwezifiso zokudala amafomu anhlobonhlobo.

Uhlolojikelele

Izilawuli zefomu le-Bootstrap zinwebeka kuzitayela zethu zefomu Eqaliswe kabusha ngamakilasi. Sebenzisa lawa makilasi ukuze ungene ezibonisini zazo ezenziwe ngokwezifiso ukuze uthole ukunikezwa okungaguquki kuzo zonke iziphequluli namadivayisi.

Qiniseka ukuthi usebenzisa typeisibaluli esifanelekile kukho konke okokufaka (isb., emailikheli le-imeyili noma numberulwazi lwezinombolo) ukuze usizakale ngezilawuli zokufakwayo ezintsha njengokuqinisekisa i-imeyili, ukukhetha izinombolo, nokuningi.

Nasi isibonelo esisheshayo sokubonisa izitayela zefomu le-Bootstrap. Qhubeka ufunda ukuze uthole imibhalo ngamakilasi adingekayo, ukwakheka kwefomu, nokunye.

Ngeke sabelane nge-imeyili yakho nanoma ubani omunye. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <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">
  </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>

Izilawuli zefomu

Izilawuli zefomu lombhalo—njengo- <input>s, <select>s, no <textarea>-s—zibhalwe ngendlela ehambisana .form-controlnekilasi. Kufakiwe izitayela zokubukeka okuvamile, isimo sokugxila, usayizi, nokunye.

Qiniseka ukuthi uhlola amafomu ethu angokwezifiso ukuze uqhubeke nesitayela <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>

Okokufaka kwefayela, shintsha .form-controlokuthi .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>

Ukulinganisa

Setha ubude usebenzisa amakilasi afana .form-control-lgnokuthi .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>

Funda kuphela

Engeza readonlyisibaluli se-boolean kokokufaka ukuze uvimbele ukuguqulwa kwevelu yokokufaka. Okokufaka kokufunda kuphela kubonakala kulula (njengokokufaka okukhutshaziwe), kodwa gcina ikhesa evamile.

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

Funda kuphela umbhalo ongenalutho

Uma ufuna ukuba nama <input readonly>-elementi efomini lakho abhalwe isitayela njengombhalo ongenalutho, sebenzisa .form-control-plaintextikilasi ukuze ususe isitayela senkambu yefomu ezenzakalelayo futhi ulondoloze imajini elungile kanye nokugxusha.

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

Okufakiwe Kwebanga

Setha okokufaka kobubanzi obunyakazayo obuvundlile usebenzisa .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>

Amabhokisi okuhlola namarediyo

Amabhokisi okuhlola azenzakalelayo namarediyo athuthukiswa ngosizo .form-check, isigaba esisodwa sazo zombili izinhlobo zokufaka ezithuthukisa ukwakheka nokuziphatha kwezinto zazo ze-HTML . Amabhokisi okuhlola awokukhetha inketho eyodwa noma ezimbalwa ohlwini, kuyilapho imisakazo ingeyokukhetha inketho eyodwa kweziningi.

Amabhokisi okuhlola akhubazekile namarediyo asekelwe. Isibaluli disabledsizosebenzisa umbala olula ukusiza ukukhombisa isimo sokokufaka.

Amabhokisi okuhlola nezinkinobho zomsakazo zisekela ukuqinisekiswa kwefomu elisekelwe ku-HTML futhi zinikeza amalebula amafushane, afinyelelekayo. Ngakho-ke, izingane zethu <input>nezakwethu <label>ziyizinto eziyizelamani ngokuphambene nengaphakathi <input>kwe- <label>. Lokhu kune-verbose kancane njengoba kufanele ucacise idkanye nezibaluli forukuze zihlobanise i- <input>and <label>.

Okuzenzakalelayo (kustakiwe)

Ngokuzenzakalela, noma yiliphi inani lamabhokisi okuhlola namarediyo ayizelamani ngokushesha azostakwa ngokuqondile futhi ahlukaniswe ngokufanele ne- .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>

Emugqeni

Qoqa amabhokisi okuhlola noma imisakazo kumugqa ofanayo ovundlile ngokwengeza .form-check-inlinekunoma iyiphi .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>

Ngaphandle kwamalebula

Engeza .position-statickokokufaka ngaphakathi .form-checkkwalokho awunawo umbhalo welebula. Khumbula ukuthi usanikeze uhlobo oluthile lwelebula lobuchwepheshe obusizayo (ngokwesibonelo, ukusebenzisa 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>

Isakhiwo

Njengoba i-Bootstrap isebenza display: blockfuthi width: 100%cishe kuzo zonke izilawuli zethu zefomu, amafomu azonqwabeleka ngokuzenzakalelayo. Amakilasi engeziwe angasetshenziswa ukushintsha lesi sakhiwo ngokwefomu ngalinye.

Yakha amaqembu

Ikilasi .form-groupliyindlela elula yokwengeza isakhiwo kumafomu. Ihlinzeka ngekilasi elivumelana nezimo elikhuthaza ukuqoqwa okufanele kwamalebula, izilawuli, umbhalo wosizo ozikhethela wona, kanye nemiyalezo yokuqinisekisa yefomu. Ngokuzenzakalelayo isebenza kuphela margin-bottom, kodwa ithatha izitayela ezengeziwe .form-inlinenjengoba kudingeka. Yisebenzise no- <fieldset>s, <div>s, noma cishe nanoma iyiphi enye into.

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

Igridi yefomu

Amafomu ayinkimbinkimbi kakhulu angakhiwa kusetshenziswa amakilasi ethu egridi. Sebenzisa lokhu ngezakhiwo zefomu ezidinga amakholomu amaningi, ububanzi obuhlukahlukene, nezinketho ezengeziwe zokuqondanisa.

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

Umugqa wefomu

Ungase futhi ushintshele .rowokuthi .form-row, okuhlukile komugqa wethu wegridi ojwayelekile oweqa ama-gutter ekholomu azenzakalelayo ukuze uthole izakhiwo eziqinile nezihlangene.

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

Izakhiwo eziyinkimbinkimbi kakhulu zingaphinda zidalwe ngesistimu yegridi.

<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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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>

Ifomu elivundlile

Dala amafomu avundlile ngegridi ngokwengeza .rowikilasi ukuze wakhe amaqembu futhi usebenzise .col-*-*amakilasi ukuze ucacise ububanzi bamalebula nezilawuli zakho. Qiniseka ukuthi ungeza .col-form-labelnezakho <label>ukuze zimiswe ziqonde phakathi nezilawuli zazo zefomu ezihlotshaniswayo.

Ngezinye izikhathi, kungase kudingeke usebenzise imajini noma izinsiza zokunamathisela ukuze udale lokho kuqondanisa okuphelele okudingayo. Isibonelo, sisuse padding-topilebula yokokufaka kwerediyo estakiwe ukuze siqondanise kangcono isisekelo sombhalo.

Imisakazo
Ibhokisi lokuhlola 
<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">
    </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">
    </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>
Ukulinganisa kwelebula yefomu evundlile

Qiniseka ukuthi usebenzisa .col-form-label-smnoma .col-form-label-lgku- <label>s noma <legend>u-s wakho ukulandela kahle usayizi .form-control-lgwe- .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>

Usayizi wekholomu

Njengoba kuboniswe ezibonelweni ezedlule, isistimu yethu yegridi ikuvumela ukuthi ubeke noma iyiphi inombolo ka- .cols ngaphakathi kuka-a .rownoma .form-row. Bazohlukanisa ububanzi obutholakalayo ngokulinganayo phakathi kwabo. Ungase futhi ukhethe isethi engaphansi yamakholomu akho ukuze uthathe isikhala esiningi noma esincane, kuyilapho u- .cols esele ehlukanisa ngokulinganayo okunye, ngamakholomu athile amakilasi afana .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>

Ukulinganisa okuzenzakalelayo

Isibonelo esingezansi sisebenzisa insiza ye-flexbox ukubeka phakathi ngokuqondile okuqukethwe nezinguquko .colukuze .col-autoamakholomu akho athathe kuphela isikhala esiningi njengoba kudingeka. Faka enye indlela, ubukhulu bekholomu ngokwawo ngokusekelwe kokuqukethwe.

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

Ungakwazi ke ukuxuba kabusha lokho futhi ngamakholomu amakholomu athize.

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

Futhi-ke izilawuli zefomu langokwezifiso ziyasekelwa.

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

Amafomu asemgqeni

Sebenzisa .form-inlineikilasi ukuze ubonise uchungechunge lwamalebula, izilawuli zefomu, nezinkinobho kumugqa owodwa ovundlile. Izilawuli zefomu ngaphakathi kwamafomu asemgqeni ziyahluka kancane ezimeni zazo ezizenzakalelayo.

  • Izilawuli zingukuthi , zigoqa display: flexnoma yisiphi isikhala esimhlophe se-HTML futhi zikuvumela ukuthi unikeze ulawulo lokuqondanisa ngesikhala nezinsiza ze- flexbox .
  • Izilawuli namaqembu okokufaka athola width: autoukukhipha okumisiwe kwe-Bootstrap width: 100%.
  • Izilawuli zivela kuphela emgqeni kuzimbobo zokubuka okungenani ezinobubanzi obungu-576px ukuze kubhekelelwe izinkundla zokubuka eziwumngcingo kumadivayisi eselula.

Ungase udinge ukulungisa mathupha ububanzi nokuqondanisa kwezilawuli zefomu ngalinye ngezinsiza zokuhlukanisa izikhala (njengoba kuboniswe ngezansi). Okokugcina, qiniseka ukuthi ufaka phakathi njalo uhlelo <label>olunesilawuli sefomu ngalinye, ngisho noma udinga ukulifihla ezivakashini ezingafundi isikrini nge- .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>

Izilawuli zefomu ngokwezifiso nokukhetha nakho kuyasekelwa.

<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>
Ezinye izindlela zamalebula afihliwe

Ubuchwepheshe obusizayo obufana nezifundi zesikrini buzoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa mafomu asemgqeni, ungafihla amalebula usebenzisa .sr-onlyikilasi. Kukhona ezinye izindlela zokuhlinzeka ngelebula lobuchwepheshe obusizayo, obufana ne- aria-label, aria-labelledbynoma titleisibaluli. Uma kungekho kulokhu okukhona, ubuchwepheshe obusizayo bungase buphendukele ekusebenziseni placeholderisibaluli, uma bukhona, kodwa qaphela ukuthi ukusetshenziswa placeholdernjengokumiselela ezinye izindlela zokulebula akwelulekwa.

Usizo lombhalo

Umbhalo wosizo wezinga lokuvimba kumafomu ungadalwa kusetshenziswa .form-text(ngaphambilini owawaziwa ngokuthi .help-blockku-v3). Umbhalo wosizo olusemgqeni ungasetshenziswa kalula kusetshenziswa noma iyiphi into ye-HTML esemgqeni namakilasi okusetshenziswa afana .text-muted.

Ukuhlobanisa umbhalo wosizo nezilawuli zefomu

Umbhalo wosizo kufanele uhlotshaniswe ngokusobala nokulawula kwefomu ohlobene nokusebenzisa aria-describedbyisibaluli. Lokhu kuzoqinisekisa ukuthi ubuchwepheshe obusizayo—njengabafundi besikrini—buzomemezela lo mbhalo wosizo lapho umsebenzisi egxile noma engena ekulawuleni.

Umbhalo wosizo ongezansi ungabhalwa ngokuthi .form-text. Lesi sigaba sihlanganisa display: blockfuthi sengeza imajini ephezulu ukuze kube lula ukuhlukanisa okokufaka ngenhla.

Iphasiwedi yakho kufanele ibe nezinhlamvu ezingu-8-20 ubude, ibe nezinhlamvu nezinombolo, futhi akumele iqukathe izikhala, izinhlamvu ezikhethekile, noma i-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>

Umbhalo osemgqeni ungasebenzisa noma iyiphi into evamile ye-HTML esemgqeni (kungaba i- <small>, <span>, noma enye into) ngaphandle kwesigaba sosizo.

Kufanele kube nezinhlamvu ezingu-8-20 ubude. 
<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>

Amafomu akhutshaziwe

Engeza disabledisibaluli se-boolean kokokufaka ukuze uvimbele ukusebenzisana komsebenzisi futhi ukwenze kubonakale kulula.

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

Engeza disabledisibaluli kokuthi a <fieldset>ukuze ukhubaze zonke izilawuli ezingaphakathi.

<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-group">
      <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>
Caveat ngamahange

Ngokuzenzakalela, iziphequluli zizophatha zonke izilawuli zefomu lomdabu ( <input>, <select>nezici <button>) ngaphakathi <fieldset disabled>njengokukhutshaziwe, ukuvimbela kokubili ukusebenzisana kwekhibhodi negundane kuzo. Kodwa-ke, uma ifomu lakho lihlanganisa <a ... class="btn btn-*">nezakhi, lezi zizonikezwa kuphela isitayela se- pointer-events: none. Njengoba kuphawuliwe esigabeni esimayelana nezinkinobho ezikhubaziwe (futhi ikakhulukazi esigatshaneni sezinto zokunamathisela odongeni), lesi sakhiwo se-CSS asikakamiswa futhi asikasekelwa ngokugcwele ku-Internet Explorer 10, futhi ngeke ivimbele abasebenzisi bekhibhodi ukuthi babe khona. ekwazi ukugxila noma ukwenza lezi zixhumanisi zisebenze. Ngakho ukuze uphephe, sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi ezinjalo.

Ukuhambisana kwesiphequluli esiphambanayo

Nakuba i-Bootstrap izosebenzisa lezi zitayela kuzo zonke iziphequluli, i-Internet Explorer 11 nangaphansi ayisekeli ngokugcwele disabledisici ku- <fieldset>. Sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze isethi yasensimini kulezi ziphequluli.

Ukuqinisekisa

Nikeza ngempendulo ebalulekile, esebenzayo kubasebenzisi bakho ngokuqinisekisa kwefomu le-HTML5– kutholakala kuzo zonke iziphequluli zethu ezisekelwayo . Khetha kumpendulo yokuqinisekisa okuzenzakalelayo yesiphequluli, noma sebenzisa imilayezo yangokwezifiso ngamakilasi ethu akhelwe ngaphakathi kanye ne-JavaScript yokuqala.

Okwamanje sincoma ukusebenzisa izitayela zokuqinisekisa ngokwezifiso, njengoba imilayezo yokuqinisekisa okuzenzakalelayo yesiphequluli ayivezwa njalo kubuchwepheshe obusiza kuzo zonke iziphequluli (ikakhulukazi, i-Chrome kudeskithophu neselula).

Isebenza kanjani

Nakhu ukuthi ukuqinisekiswa kwefomu kusebenza kanjani nge-Bootstrap:

  • Ukuqinisekiswa kwefomu le-HTML kusetshenziswa ngamakilasi amabili mbumbulu we-CSS, :invalidkanye :valid. Isebenza ku- <input>, <select>, kanye <textarea>nezakhi.
  • I-Bootstrap ihlanganisa izitayela :invalidnezitayela ekilasini :validlabazali .was-validated, ngokuvamile zisetshenziswa kufayela le- <form>. Uma kungenjalo, noma iyiphi inkambu edingekayo engenavelu ibonakala njengengavumelekile ekulayisheni kwekhasi. Ngale ndlela, ungakhetha ukuthi uzozivula nini (imvamisa ngemuva kokuzanywa kokuthunyelwa kwefomu).
  • Ukuze usethe kabusha ukubukeka kwefomu (ngokwesibonelo, esimweni sokuhanjiswa kwefomu eliguqukayo kusetshenziswa i-AJAX), susa .was-validatedikilasi kusukela <form>futhi ngemva kokuhambisa.
  • Njengembuyiselo, .is-invalidfuthi .is-validamakilasi angasetshenziswa esikhundleni samakilasi mbumbulu wokuqinisekisa uhlangothi lweseva . Abadingi .was-validatedikilasi labazali.
  • Ngenxa yemikhawulo endleleni i-CSS esebenza ngayo, asikwazi (okwamanje) ukusebenzisa izitayela <label>kulokho okuza ngaphambi kokulawula kwefomu ku-DOM ngaphandle kosizo lweJavaScript yangokwezifiso.
  • Zonke iziphequluli zesimanje zisekela i- API yokuqinisekisa umkhawulo , uchungechunge lwezindlela ze-JavaScript zokuqinisekisa izilawuli zefomu.
  • Imilayezo yempendulo ingase isebenzise okumisiwe kwesiphequluli (okuhlukile kusiphequluli ngasinye, futhi akunasitayela nge-CSS) noma izitayela zethu zempendulo zangokwezifiso nge-HTML ne-CSS eyengeziwe.
  • Unganikeza imilayezo yokuqinisekisa ngokwezifiso nge setCustomValidity-JavaScript.

Unalokho engqondweni, cabangela amademo alandelayo ezitayela zethu zokuqinisekisa amafomu angokwezifiso, amakilasi ohlangothi lweseva ozikhethela, kanye nokuzenzakalelayo kwesiphequluli.

Izitayela ngokwezifiso

Ukuze uthole imilayezo yokuqinisekisa yefomu le-Bootstrap yangokwezifiso, uzodinga ukungeza novalidateisibaluli se-boolean ku- <form>. Lokhu kukhubaza amathiphu empendulo ezenzakalelayo yesiphequluli, kodwa kusahlinzeka ngokufinyelela kuma-API okuqinisekisa amafomu ku-JavaScript. Zama ukuhambisa leli fomu elingezansi; I-JavaScript yethu izobamba inkinobho yokuhambisa futhi idlulisele kuwe impendulo. Uma uzama ukuthumela, uzobona izitayela :invalidnezitayela :validzisetshenziswa kuzilawuli zakho zefomu.

Izitayela zempendulo yangokwezifiso zisebenzisa imibala yangokwezifiso, imingcele, izitayela zokugxila, nezithonjana zangemuva ukuze kudluliselwe impendulo kangcono. Izithonjana zangemuva ze- <select>s zitholakala kuphela nge- .custom-select, hhayi .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>

Okuzenzakalelayo kwesiphequluli

Awunantshisekelo kumilayezo yempendulo yokuqinisekisa ngokwezifiso noma ukubhala i-JavaScript ukuze ushintshe indlela yokuziphatha yefomu? Konke kuhle, ungasebenzisa okuzenzakalelayo kwesiphequluli. Zama ukuthumela ifomu elingezansi. Ngokuya ngesiphequluli sakho ne-OS, uzobona isitayela esihluke kancane sempendulo.

Yize lezi zitayela zempendulo zingenakwenziwa isitayela nge-CSS, usengakwazi ukwenza ngokwezifiso umbhalo wempendulo nge-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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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>

Uhlangothi lweseva

Sincoma ukusebenzisa ukuqinisekiswa kohlangothi lweklayenti, kodwa uma udinga ukuqinisekiswa kohlangothi lweseva, ungabonisa izinkambu zefomu ezingavumelekile nezivumelekile .is-invalidnge- .is-valid. Qaphela ukuthi .invalid-feedbackfuthi kuyasekelwa nalawa makilasi.

Kubukeka kukuhle!
Kubukeka kukuhle!
@
Sicela ukhethe igama lomsebenzisi.
Sicela unikeze idolobha elivumelekile.
Sicela ukhethe izwe elivumelekile.
Sicela unikeze i-zip evumelekile.
Kufanele uvume ngaphambi kokuhambisa. 
<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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>

Izakhi ezisekelwe

Izitayela zokuqinisekisa ziyatholakala kuzilawuli zefomu ezilandelayo nezingxenye:

  • <input>s kanye no <textarea>-s .form-control(okuhlanganisa kufika kwelilodwa .form-controlemaqenjini okokufaka)
  • <select>s .form-controlnoma.custom-select
  • .form-checks
  • .custom-checkboxs kanye .custom-radios
  • .custom-file
Sicela ufake umlayezo endaweni yombhalo.
Isibonelo sombhalo wempendulo ongavumelekile
Isibonelo esengeziwe umbhalo wempendulo ongavumelekile
Isibonelo sempendulo ekhethiwe yangokwezifiso engavumelekile
Isibonelo sempendulo yefayela yangokwezifiso engavumelekile 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

Amathuluzi

Uma isakhiwo sakho sefomu sikuvumela, ungashintsha .{valid|invalid}-feedbackamakilasi .{valid|invalid}-tooltipukuze ubonise impendulo yokuqinisekisa ethiphu yamathuluzi enesitayela. Qiniseka ukuthi position: relativeunomzali okhona ukuze amise ithiphu lamathuluzi. Esibonelweni esingezansi, amakilasi ethu ekholomu asenakho lokhu, kodwa iphrojekthi yakho ingase idinge okunye ukusetha.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ukwenza ngokwezifiso

Izimo zokuqinisekisa zingenziwa ngendlela oyifisayo nge-Sass $form-validation-statesngemephu. Itholakala _variables.scsskufayela lethu, le mephu ye-Sass iboshiwe ukuze ikhiqize izimo ezizenzakalelayo valid/ invalidzokuqinisekisa. Kufakwe imephu ebekiwe yokwenza ngokwezifiso umbala nesithonjana sesifunda ngasinye. Nakuba zingekho ezinye izifunda ezisekelwa iziphequluli, lezo ezisebenzisa izitayela zangokwezifiso zingangeza kalula impendulo yefomu eyinkimbinkimbi.

Sicela uqaphele ukuthi asincomi ukwenza lawa manani ngendlela oyifisayo ngaphandle kokuphinda ulungise i- form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Amafomu ngokwezifiso

Ukuze wenze ngokwezifiso nakakhulu kanye nokungaguquguquki kwesiphequluli, sebenzisa izici zethu zefomu elingokwezifiso ukuze umiselele okumisiwe kwesiphequluli. Akhelwe phezu kwemakhaphu ye-semantic nefinyelelekayo, ngakho angamiselela okuqinile kwanoma yikuphi ukulawulwa kwefomu okuzenzakalelayo.

Amabhokisi okuhlola namarediyo

<input>Ibhokisi likaqhwishi ngalinye kanye nomsakazo <label>nokumatanisa kusongwe ngo-a <div>ukuze kudalwe ukulawula kwethu ngokwezifiso. Ngokwesakhiwo, le yindlela efanayo neyethu ezenzakalelayo .form-check.

Sisebenzisa isikhethi esiyizelamani ( ~) kuzo zonke <input>izifundazwe zethu—njengo— :checkedukwenza isitayela ngendlela efanele inkomba yethu yefomu langokwezifiso. Uma kuhlanganiswe .custom-control-labelnekilasi, singakwazi futhi isitayela umbhalo wento ngayinye ngokusekelwe esimweni <input>sika.

Sifihla okuzenzakalelayo <input>futhi opacitysisebenzise .custom-control-labelukwakha inkomba yefomu ngokwezifiso entsha endaweni yaso ::beforenge- ::after. Ngeshwa asikwazi ukwakha engokwezifiso kusukela nje <input>ngenxa yokuthi ama-CSS contentawasebenzi kuleyo nto.

Ezimweni ezihloliwe, sisebenzisa izithonjana ze-SVG ezishumekiwe ze-base64 ukusuka ku- Open Iconic . Lokhu kusinikeza ukulawula okungcono kakhulu kwesitayela nokubeka kuzo zonke iziphequluli namadivayisi.

Amabhokisi okuhlola

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

Amabhokisi okuhlola angokwezifiso angaphinda asebenzise :indeterminateiklasi mbumbulu uma esethwe ngesandla nge-JavaScript (asikho isibaluli se-HTML esitholakalayo sokusicacisa).

Uma usebenzisa i-jQuery, into efana nalena kufanele yanele:

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

Imisakazo

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

Emugqeni

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

Ikhutshaziwe

Amabhokisi okuhlola angokwezifiso namarediyo kungaphinda kukhutshazwe. Engeza disabledisibaluli se-boolean <input>futhi inkomba yangokwezifiso nencazelo yelebula izokwenziwa isitayela ngokuzenzakalelayo.

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

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

Ukushintsha

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Select menu

Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

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

You may also choose from small and large custom selects to match our similarly sized text inputs.

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

The multiple attribute is also supported:

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

As is the size attribute:

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

Range

Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

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

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

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

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

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

File browser

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

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

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings with SCSS

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

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

Here’s lang(es) in action on the custom file input for a Spanish translation:

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

You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the lang attribute on the <html> element or the Content-Language HTTP header, among other methods.

Ukuhumusha noma ukwenza ngendlela oyifisayo uchungechunge nge-HTML

I-Bootstrap iphinde inikeze indlela yokuhumusha umbhalo othi "Phequlula" ku-HTML ngesibaluli esingangezwa data-browsekulebula yokufaka yangokwezifiso (isibonelo ngesi-Dutch):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>