Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

Isakhiwo

Nikeza amafomu akho ukwakheka okuthile—kusuka emgqeni kuya kokuvundlile ukuya ekusetshenzisweni kwegridi yangokwezifiso—ngezinketho zethu zesakhiwo sefomu.

Kuleli khasi

Amafomu

Iqembu ngalinye lezinkambu zefomu kufanele lihlale endaweni ethile <form>. I-Bootstrap ayihlinzeki ngesitayela esizenzakalelayo sesici <form>, kodwa kunezici ezithile zesiphequluli ezinamandla ezinikezwa ngokuzenzakalelayo.

  • Umusha kumafomu esiphequluli? Cabangela ukubuyekeza amadokhumenti efomu le-MDN ukuze uthole umbono kanye nohlu oluphelele lwezibaluli ezitholakalayo.
  • <button>s ngaphakathi <form>kokuzenzakalelayo kokuthi type="submit", ngakho-ke lwela ukucacisa futhi njalo ufake i- type.

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.

Izinsiza

Izinsiza ze-margin ziyindlela elula yokwengeza isakhiwo kumafomu. Bahlinzeka ngokuhlanganisa okuyisisekelo kwamalebula, izilawuli, umbhalo wefomu ozikhethela wona, kanye nemiyalezo yokuqinisekisa yefomu. Sincoma ukuthi unamathele margin-bottomkuzinsiza, futhi usebenzise isiqondiso esisodwa kulo lonke ifomu ukuze uthole ukuvumelana.

Zizwe ukhululekile ukwakha amafomu akho ngendlela othanda ngayo, nge- <fieldset>s, <div>s, nanoma iyiphi enye into.

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

Igridi yefomu

Amafomu ayinkimbinkimbi kakhulu angakhiwa kusetshenziswa amakilasi ethu egridi. Sebenzisa lokhu ngezakhiwo zefomu ezidinga amakholomu amaningi, ububanzi obuhlukahlukene, nezinketho ezengeziwe zokuqondanisa. Idinga $enable-grid-classesokuguquguqukayo kwe-Sass ukuthi kuvulwe (kuvulwe ngokuzenzakalela).

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

Ama-Gutters

Ngokungeza amakilasi okulungisa udoti , ungaba nokulawula phezu kobubanzi be-gutter kanye ne-inline njengendlela yebhulokhi. Futhi idinga $enable-grid-classesokuguquguqukayo kwe-Sass ukuthi kuvulwe (kuvulwe ngokuzenzakalela).

html 
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Izakhiwo eziyinkimbinkimbi kakhulu zingaphinda zidalwe ngesistimu yegridi.

html 
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</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
html 
<form>
  <div class="row mb-3">
    <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="row mb-3">
    <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="row mb-3">
    <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>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</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.

html 
<div class="row mb-3">
  <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="row mb-3">
  <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="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>

Usayizi wekholomu

Njengoba kuboniswe ezibonelweni ezedlule, isistimu yethu yegridi ikuvumela ukuthi ubeke noma iyiphi inombolo ka- .cols ngaphakathi kuka- .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-sm-7.

html 
<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

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.

@
html 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

Ungakwazi ke ukuxuba kabusha lokho futhi ngamakholomu amakholomu athize.

@
html 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Amafomu asemgqeni

Sebenzisa .row-cols-*amakilasi ukuze udale izakhiwo ezivundlile eziphendulayo. Ngokungeza amakilasi okulungisa udoti , sizoba nama- gutter ezikhombisi-ndlela ezivundlile nezime mpo. Kumachweba wokubuka amaselula amancane, .col-12isiza ukupakisha izilawuli zefomu nokunye okwengeziwe. I .align-items-center-elementi iqondanisa izakhi zefomu phakathi nendawo, yenza .form-checkukuqondanisa kahle.

@
html 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>