Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Kamangidwe

Perekani mafomu anu kamangidwe kake—kuchokera pamizere mpaka yopingasa mpaka yokhazikika pagululi—ndi zosankha zathu zamapangidwe.

Patsamba ili

Mafomu

Gulu lililonse la minda yama fomu liyenera kukhala mu <form>chinthu. Bootstrap silipereka masitayilo osasinthika a <form>chinthucho, koma pali mawonekedwe amphamvu osatsegula omwe amaperekedwa mwachisawawa.

  • Zatsopano kwa mafomu osatsegula? Lingalirani kuwunikanso zolemba za MDN kuti muwone mwachidule komanso mndandanda wathunthu wazopezeka.
  • <button>s mkati mwa <form>kusakhulupirika ku type="submit", choncho yesetsani kunena zachindunji ndikuphatikiza a type.
  • Mutha kuletsa chinthu chilichonse cha fomu mkati mwa mawonekedwe ndi mawonekedwe omwe disabledali pa <form>.

Popeza Bootstrap imagwira ntchito display: blockndipo width: 100%pafupifupi pafupifupi mawonekedwe athu onse amawongolera, mafomu amangounjika mokhazikika. Makalasi owonjezera angagwiritsidwe ntchito kusinthira masinthidwe awa pamtundu uliwonse.

Zothandizira

Zida zam'mphepete ndi njira yosavuta yowonjezeramo mawonekedwe. Amapereka magulu ofunikira a zilembo, zowongolera, mawu osankha, ndi mauthenga otsimikizira mafomu. Tikukulimbikitsani kumamatira kuzinthu margin-bottomzothandizira, ndikugwiritsa ntchito njira imodzi mwanjira yonseyo kuti mukhale osasinthasintha.

Khalani omasuka kupanga mafomu anu momwe mungakonde, ndi <fieldset>s, <div>s, kapena pafupifupi china chilichonse.

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

Fomu ya grid

Mafomu ovuta kwambiri amatha kupangidwa pogwiritsa ntchito makalasi athu a gridi. Gwiritsani ntchito izi pamapangidwe amafomu omwe amafunikira mizati ingapo, m'lifupi mwake mosiyanasiyana, ndi njira zina zoyankhulirana zina. Imafunikira kuti $enable-grid-classeskusintha kwa Sass kuyambitsidwe (mosakhazikika).

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

Mitsinje

Powonjezera makalasi osinthira gutter , mutha kukhala ndi mphamvu pakukula kwa ngalande komanso munjira yolowera ngati block. Imafunikanso kuti $enable-grid-classeskusintha kwa Sass kuyambitsidwe (mosakhazikika).

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

Mapangidwe ovuta kwambiri amathanso kupangidwa ndi grid system.

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

Chopingasa mawonekedwe

Pangani mafomu opingasa ndi gululi powonjezera .rowkalasi kuti mupange magulu ndikugwiritsa ntchito .col-*-*makalasiwo kuti mutchule m'lifupi mwamalebulo ndi zowongolera zanu. Onetsetsani kuti muwonjezenso .col-form-labelku ma <label>s anu kuti akhazikike molunjika ndikuwongolera mawonekedwe awo.

Nthawi zina, mungafunike kugwiritsa ntchito maginito kapena ma padding zida kuti mupange mawonekedwe abwino omwe mukufuna. Mwachitsanzo, padding-toptachotsa lebulo yapawailesi yosanjidwa kuti tigwirizane bwino ndi zoyambira.

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

Kukula kwa zilembo zopingasa

Onetsetsani kuti mukugwiritsa ntchito .col-form-label-smkapena s kapena s kuti mutsatire molondola kukula kwa ndi ..col-form-label-lg<label><legend>.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>

Kukula kwa mizati

Monga tawonera m'zitsanzo zam'mbuyomu, makina athu a gridi amakulolani kuyika nambala iliyonse ya .cols mkati mwa .row. Adzagawaniza kukula komwe kulipo mofanana pakati pawo. Mukhozanso kusankha kagawo kakang'ono kamipingo yanu kuti mutenge malo ochulukirapo kapena ochepa, pamene otsalawo .colamagawanitsa ena onse, ndi makalasi apadera monga .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-saizi

Chitsanzo chomwe chili pansipa chimagwiritsa ntchito chida cha flexbox kuti chikhazikike pakati pazomwe zili mkati ndikusintha kotero .colkuti .col-automizati yanu imangotenga malo ochulukirapo momwe mungafunire. Mwa njira ina, ndime imadzikulitsa yokha kutengera zomwe zili mkati.

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

Kenako mutha kusakanizanso izi ndi makalasi otengera kukula kwake.

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

Mafomu apaintaneti

Gwiritsani ntchito .row-cols-*makalasi kuti mupange masanjidwe opingasa omvera. Powonjezera makalasi osinthira matope , tidzakhala ndi mabwato opingasa komanso oyima. Pamawonedwe ang'onoang'ono am'manja, .col-12amathandizira kusungitsa zowongolera mafomu ndi zina zambiri. The .align-items-centeraligns mawonekedwe zinthu pakati, kupanga .form-checkboxkugwirizanitsa bwino.

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