Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Tlhamego

Efa diforomo tša gago sebopego se sengwe—go tloga go ka gare ga mothaladi go ya go go rapalala go ya go diphethagatšo tša keriti ya tlwaelo—ka dikgetho tša rena tša peakanyo ya foromo.

Letlakaleng le

Diforomo

Sehlopha se sengwe le se sengwe sa mafelo a foromo se swanetše go dula ka gare ga <form>elemente. Bootstrap e fana ka ha ho na setaele sa kamehla bakeng sa <form>elemente, empa ho na le litšobotsi tse ling tse matla tsa sebadi tse fuwang ka default.

  • E mpsha go diforomo tša sephephediši? Nagana ka go sekaseka ditokomane tša foromo ya MDN bakeng sa kakaretšo le lenaneo le le feletšego la dika tše di lego gona.
  • <button>s ka gare ga <form>default go type="submit", ka fao katanela go ba ye e itšego gomme ka mehla o akaretše a type.

Ka ge Bootstrap e šoma display: blockle width: 100%go mo e nyakilego go ba ditaolo tša rena ka moka tša foromo, diforomo di tla ka go ikemela go kgoboketša thwii. Diklase tša tlaleletšo di ka šomišwa go fapantšha peakanyo ye motheong wa foromo ka e tee.

Didirišwa tša go thuša

Didirišwa tša ka thoko ke tsela ye bonolo ya go oketša sebopego se sengwe go diforomo. Di fana ka sehlopha sa motheo sa dileibole, ditaolo, sengwalwa sa foromo sa boikgethelo, le melaetša ya netefatšo ya foromo. Re kgothaletša go kgomarela margin-bottomdidirišwa, le go diriša tlhahlo e tee go ralala le foromo bakeng sa go se fetoge.

Ikwe o lokologile go aga diforomo tša gago le ge go le bjalo o rata, ka <fieldset>s, <div>s, goba mo e nyakilego go ba elemente efe goba efe ye nngwe.

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>

Foromo ya keriti

Diforomo tše di raraganego kudu di ka agwa ka go šomiša diklase tša rena tša keriti. Šomiša tše bakeng sa dipeakanyo tša foromo tšeo di nyakago dikholomo tše dintši, bophara bjo bo fapanego, le dikgetho tša tlaleletšo tša go logaganya. E nyaka gore $enable-grid-classesphetogo ya Sass e kgontšhwa (e buletšwe ka go ikemela).

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>

Diphaephe tša go tšhela meetse

By adding gutter modifier classes , o ka ba le taolo ka bophara ba gutter ka hammoho le inline e le thibela tataiso. Gape e nyaka gore $enable-grid-classesphetogo ya Sass e kgontšhwa (e buletšwe ka go ikemela).

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>

Dipeakanyo tše di raraganego kudu le tšona di ka hlolwa ka tshepedišo ya keriti.

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>

Foromo e rapameng

Hlama diforomo ta go rapalala ka keriti ka go tlaleleta .rowsehlopha go bopa dihlopha le go omia .col-*-*diklase go laeta bophara bja dileibole ta gago le ditaolo. Kgonthiša gore o tlaleletša .col-form-labelgo s ya gago <label>gape gore di tsepame thwii ka ditaolo tša tšona tša foromo tše di sepedišanago le tšona.

Ka dinako tše dingwe, mo gongwe o swanetše go diriša didirišwa tša ka thoko goba tša go tlatša go bopa go logaganya moo mo go phethagetšego mo o go nyakago. Go fa mohlala, re tlošitše padding-topleibole ya rena ya ditseno tša radio tše di kgobokeditšwego go logaganya motheo wa sengwalwa gakaone.

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

Horizontal foromo leibole sizing

Kgonthiša gore o šomiša .col-form-label-smgoba .col-form-label-lggo <label>s goba s ya gago <legend>go latela ka nepagalo bogolo bja .form-control-lgle .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>

Go lekanyetša bogolo bja kholomo

Bjalo ka ge go bontšhitšwe mehlaleng ye e fetilego, tshepedišo ya rena ya keriti e go dumelela go bea palo efe goba efe ya .cols ka gare ga .row. Ba tla arola bophara bjo bo lego gona ka go lekana magareng ga bona. O ka kgetha gape sehlopha se senyenyane sa dikholomo tša gago go tšea sekgoba se segolo goba se senyenyane, mola .cols ye e šetšego e aroganya tše dingwe ka go lekana, ka diklase tša dikholomo tše di itšego tša go swana le .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>

Go dira bogolo bja go itiriša

Mohlala wo o lego ka mo tlase o šomiša sedirišwa sa flexbox go tsepamiša dikagare ka go otlologa le diphetogo .colgo .col-autogore dikholomo tša gago di tšee fela sekgoba se segolo ka moo go nyakegago. Ge re bea ka tsela ye nngwe, kholomo e itšeela bogolo go ya ka dikagare.

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

Ka morago o ka hlakanya seo gape gape ka diklase tša dikholomo tše di itšego tša bogolo.

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

Diforomo tša ka gare ga mothaladi

Šomiša .row-cols-*diklase go hlama dipeakanyo tša go rapalala tše di arabelago. By adding gutter modifier classes , re tla ba le gutters ka ditaelo tse rapameng le tse paatsepamang. Ka di-viewport tše di sesane tša sellathekeng, e .col-12thuša go kgoboketša ditaolo tša foromo le tše dingwe. The .align-items-centeraligns dielemente foromo ho bohareng, etsa ho .form-checklolamisiwa ga hantle.

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