Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Rêz

Bi vebijarkên meya xêzkirina formên me re hin avahiyek bidin formên xwe - ji hundurîn heya horizontî heya pêkanînên tora xwerû-.

Li ser vê rûpelê

Forms

Divê her komek zeviyên formê di hêmanekê de bimîne <form>. Bootstrap ji bo <form>hêmanê şêwazek xwerû peyda nake, lê hin taybetmendiyên gerokê yên hêzdar hene ku ji hêla xwerû ve têne peyda kirin.

  • Ji bo formên gerokê nû ne? Ji bo serpêhatî û navnîşek bêkêmasî ya taybetmendiyên berdest binihêrin ku belgeyên forma MDN-ê binirxînin .
  • <button>s di nav <form>xwerûyek to type="submit"de ye, ji ber vê yekê hewl bidin ku taybetî bin û her dem a-yek têxin nav xwe type.
  • Hûn dikarin her hêmanên formê yên di nav formek bi disabledtaybetmendiya li ser de neçalak bikin <form>.

Ji ber ku Bootstrap display: blockû width: 100%hema hema li ser hemî kontrolên forma me bicîh tîne, form dê ji hêla xwerû ve vertîkal werin berhev kirin. Dersên pêvek dikarin werin bikar anîn da ku vê sêwiranê li ser bingeha per-formê biguhezînin.

Utilities

Karûbarên margin awayê herî hêsan e ku meriv hin avahî li formayan zêde bike. Ew komkirina bingehîn a etîketan, kontrol, nivîsa forma vebijarkî, û peyamên pejirandina formê peyda dikin. Em pêşniyar dikin ku li ser amûran margin-bottombisekinin, û ji bo hevgirtinê rêgezek yekane li seranserê formê bikar bînin.

Hûn bi <fieldset>s, <div>s, an hema hema hêmanek din, bi dilxwazî ​​​​formên xwe ava bikin.

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

Grid form

Formên tevlihevtir dikarin bi karanîna dersên torê yên me werin çêkirin. Vana ji bo sêwirana formên ku hewceyê pir stûnan, firehiyên cihêreng, û vebijarkên hevrêziyê yên din hewce dikin bikar bînin. Pêdivî ye ku $enable-grid-classesguhêrbar Sass were çalak kirin (ji hêla xwerû ve girêdayî ye).

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

Gutters

Bi lêzêdekirina dersên guhêrbarkerê gutterê , hûn dikarin li ser firehiya gûzê di nav rêzê de wekî rêgeza blokê jî xwedan kontrol bin. Di heman demê de pêdivî ye ku $enable-grid-classesguhêrbar Sass were çalak kirin (ji hêla xwerû ve girêdayî ye).

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

Di heman demê de bi pergala torê re sêwiranên tevlihevtir jî têne afirandin.

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

Forma Horizontal

.rowBi lêzêdekirina polê ji bo avakirina koman û bi karanîna .col-*-*çînan re ji bo diyarkirina firehiya etîket û kontrolên xwe bi tevrê re formên horizontî biafirînin . Jê bawer bin ku hûn li s-yên xwe jî zêde .col-form-labelbikin <label>da ku ew bi kontrolên formên xwe yên têkildar ve bi navendê verastî bin.

Carinan, dibe ku hûn hewce ne ku karûbarên marjînal an peldankê bikar bînin da ku ew hevrêziya bêkêmasî ya ku hûn hewce ne biafirînin. Mînakî, padding-topme etîketa li ser têketina radyoya xweya stêrk jê kir da ku xêza bingehîn a nivîsê çêtir birêkûpêk bike.

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

Mezinahiya labelê forma Horizontal

Bawer bin ku bikar bînin .col-form-label-sman jî .col-form-label-lgs <label>an <legend>sên xwe rast bişopînin mezinahiya .form-control-lgû .form-control-sm.

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

Mezinbûna stûnê

Wekî ku di mînakên berê de hate xuyang kirin, pergala meya torê dihêle hûn her jimareyek .cols-yê di hundurê de cîh bikin .row. Ew ê firehiya berdest di navbera xwe de wekhev parve bikin. Di heman demê de hûn dikarin binkeyek stûnên xwe hilbijêrin da ku pir an hindik cîh bigire, dema ku yên mayî yên mayî .colbi heman rengî, bi çînên stûnên taybetî yên mîna .col-sm-7.

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

Auto-sizing

Mînaka jêrîn karûbarek flexbox bikar tîne da ku naverok vertîkal bike naverok û diguhezîne da .colku .col-autostûnên we tenê bi qasî ku hewce bike cîh digirin. Bi awayek din, stûn li gorî naverokê xwe mezin dike.

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

Dûv re hûn dikarin wê carek din bi dersên stûnê yên bi pîvan-taybetî re tevlihev bikin.

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

Formên inline

Dersan bikar bînin .row-cols-*da ku nexşeyên horizontî yên bersivdar biafirînin. Bi lêzêdekirina dersên guhêrkerê gutterê , em ê di rêwerzên horizontî û vertîkal de zozanan hebin. Li ser dîmenderên teng ên mobîl, ev .col-12alîkarî li ser kontrolên formê û hêj bêtir dike. Hêmanên .align-items-centerformê ber bi nîvê ve li hev dike, bi .form-checkboxrêkûpêk lihevkirinê dike.

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