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

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

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, kodwa ukuze unikeze not-allowedikhesa ekuhambiseni phezulu komzali <label>, uzodinga ukungeza disabledisibaluli ku- .form-check-input. Isibaluli esikhubazekile sizofaka umbala okhanyayo ukusiza ukukhombisa isimo sokokufaka.

Amabhokisi okuhlola nokusetshenziswa kwemisakazo yakhelwe ukusekela ukuqinisekiswa kwefomu elisekelwe ku-HTML futhi inikeze 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" 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>

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" 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>
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 ngokulawula ukuqondanisa 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 kanye 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 kwamafomu aguquguqukayo 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 kufayela lakho le- <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 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>

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, usengawenza ngendlela oyifisayo 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" 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>

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 unikeze isimo esivumelekile.
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" 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>

Izakhi ezisekelwe

Amafomu ethu ayisibonelo abonisa umbhalo wendabuko <input>s ngenhla, kodwa izitayela zokuqinisekisa amafomu nazo ziyatholakala kuma- <textarea>s kanye nezilawuli zefomu ngokwezifiso.

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

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

Iswishi inomaka webhokisi lokuhlola langokwezifiso kodwa isebenzisa .custom-switchikilasi ukuze inikeze iswishi yokuguqula. Ukushintsha nakho kusekela disabledisibaluli.

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

Khetha imenyu

<select>Amamenyu angokwezifiso adinga isigaba sangokwezifiso kuphela, ukuze .custom-selectaqalise izitayela zangokwezifiso. Izitayela ngokwezifiso zikhawulelwe <select>ekubukekeni kokuqala futhi azikwazi ukushintsha u- <option>s ngenxa yemikhawulo yesiphequluli.

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

Ungase futhi ukhethe kokukhethwa kukho okungokwezifiso okuncane nokukhulu ukufanisa okokufaka kwethu kosayizi ofanayo wombhalo.

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

Isibaluli multiplenaso siyasekelwa:

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

Njengesibaluli size:

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

Ibanga

Dala <input type="range">izilawuli ngokwezifiso nge- .custom-range. Ithrekhi (ingemuva) nesithupha (inani) zombili zenziwe ngendlela yokuthi zibonakale zifana kuzo zonke iziphequluli. Njengoba kuphela i-IE neFirefox esekela “ukugcwalisa” ithrekhi yabo ukusuka kwesokunxele noma kwesokudla sesithupha njengendlela yokubonisa ngeso lengqondo inqubekelaphambili, asikusekeli okwamanje.

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

Okokufaka kobubanzi kunamanani asobala okuthi minkanye max- 0kanye 100, ngokulandelana. Ungacacisa amanani amasha kulabo abasebenzisa minizibaluli max.

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

Ngokuzenzakalela, okokufaka kobubanzi “kushintshela” kumanani ayinombolo. Ukuze ushintshe lokhu, ungacacisa stepinani. Esibonelweni esingezansi, siphinda kabili inani lezinyathelo ngokusebenzisa step="0.5".

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

Isiphequluli sefayela

I-plugin enconyiwe yokugqwayiza okokufaka kwefayela langokwezifiso: bs-custom-file-input , yilokho esikusebenzisa manje lapha kumadokhumenti ethu.

Okokufaka kwefayela kuyinqwaba yenqwaba futhi kudinga i-JavaScript eyengeziwe uma ungathanda ukuwahlanganisa nokusebenza Khetha ifayela... kanye nombhalo okhethiwe wegama lefayela.

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

Sifihla ifayela elizenzakalelayo <input>ngokusebenzisa opacityfuthi esikhundleni salokho senze isitayela se- <label>. Inkinobho ikhiqizwa futhi ibekwe nge- ::after. Okokugcina, simemezela u-a widthkanye heightnesikhala <input>esifanele sokuqukethwe okuzungezile.

Ukuhumusha noma ukwenza ngendlela oyifisayo uchungechunge nge-SCSS

Ikilasi :lang()-mbumbulu lisetshenziselwa ukuvumela ukuhunyushwa kombhalo othi "Phequlula" kwezinye izilimi. Khipha noma engeza okufakiwe $custom-file-textkokuhluka kwe-Sass ngomaka wolimi olufanele kanye neyunithi yezinhlamvu ezenziwe zasendaweni. Izintambo zesiNgisi zingenziwa ngendlela efanayo. Isibonelo, nansi indlela umuntu angangeza ngayo ukuhumusha kwesi-Spanish (ikhodi yolimi lwesi-Spanish ithi es):

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

Nakhu lang(es)okwenziwayo kokokufaka kwefayela langokwezifiso lokuhumusha kwe-Spanish:

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

Uzodinga ukusetha ulimi lwedokhumenti yakho (noma isihlahla esingaphansi) ngendlela efanele ukuze kuboniswe umbhalo olungile. Lokhu kungenziwa kusetshenziswa isibaluli sesici langnoma<html> unhlokweni we- Content-LanguageHTTP , phakathi kwezinye izindlela.

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>