Labɛn cogo

Aw ye sigicogo dɔw di aw ka sɛbɛnw ma—k’a ta inline la ka taa a bila horizontale la ka taa a bila custom grid implementations la—ni an ka formulairew labɛncogo suganditaw ye.

Nin ɲɛ in kan

Sɛbɛnw

Foroforo kulu bɛɛ ka kan ka sigi <form>fɛn dɔ kɔnɔ. Bootstrap tɛ default styling (fɔcogo fɔlɔ) di <form>element (fɛn) ma, nka navigatɛri (navigatɛri) fɛɛrɛ barikama dɔw bɛ yen minnu bɛ dilan default (dafalen) fɛ.

Ko kura don navigatɛri sɛbɛnw kɔnɔ wa? Aw ye jateminɛ kɛ ka MDN foroko sɛbɛnw lajɛ walasa ka kunnafoni kunbabaw sɔrɔ ani ka fɛnw bɛɛ lajɛlen sɔrɔ minnu bɛ sɔrɔ.
<button>s kɔnɔna <form>na type="submit", o la , i jija ka kɛ kɛrɛnkɛrɛnnen ye ani ka a don a kɔnɔ tuma bɛɛ type.

Komin Bootstrap bɛ baara Kɛ display: blockani width: 100%an ka forobaciyɛn-kɔlɔsili-minɛnw bɛɛ lajɛlen na, foroko-sɛbɛnw bɛna ɲɔgɔn Sɔrɔ ka Kɛɲɛ ni jɔlen ye. Kalanso wɛrɛw bɛ se ka kɛ walasa ka o labɛncogo caman ɲɔgɔnna kɛ ka kɛɲɛ ni sɛbɛn kelen-kelen bɛɛ ye.

Nafamafɛnw

Margin nafalanw ye fɛɛrɛ nɔgɔman ye ka sigicogo dɔw fara sɛbɛnw kan. U bɛ labeliw, kɔrɔsiliw, sɛbɛnfura sɛbɛnni minnu bɛ se ka sugandi, ani sɛbɛnw tiɲɛni cikanw kulu jɔnjɔnw di. An b’a ɲini aw fɛ aw ka nɔrɔ margin-bottomnafamafɛnw na, ani ka baara kɛ ni sira kelen ye sɛbɛnfura bɛɛ kɔnɔ walasa ka bɛn ɲɔgɔn ma.

Aw kana siga k’aw ka sɛbɛnw jɔ cogo o cogo, ni <fieldset>s, <div>s, walima fɛn wɛrɛw ye minnu bɛ se ka fɔ.

Misali labeli

Labeli wɛrɛ

html ye

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

Formulaire grid

Foroko gɛlɛnw bɛ se ka jɔ ni an ka grid classes ye. Baara kɛ ni ninnu ye sɛbɛnw labɛncogo kama minnu bɛ kulu caman wajibiya, bonya caman wɛrɛw, ani ɲɔgɔndan sugandicogo wɛrɛw. A b’a ɲini $enable-grid-classesSass bεε bε se ka baara kε (on by default).

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

Gutɛriw

Ni aw ye gutter modifier classes fara a kan , aw bɛ se ka kuntigiya sɔrɔ gutter bonya kan in as well the inline as block direction. Fana a b’a ɲini $enable-grid-classesSass fɛnsɛbɛnni ka kɛ baarakɛminɛn ye (on by default).

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

Layidu minnu ka gɛlɛn kosɛbɛ, olu fana bɛ se ka dilan ni grid system ye.

html ye

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

Foro horizontal (fɔcogo tilennen).

Aw bɛ foroko tilennenw da ni jatebɔlan ye ni .rowkalasi farali ye kuluw dilancogo kan ani ka baara kɛ ni .col-*-*kalasiw ye walasa k’aw ka labeliw ni kɔrɔsiliw bonya jira. Aw ye aw jija ka fara .col-form-labelaw ka <label>s kan fana walasa u ka kɛ vertically centered ni u ni u ni ɲɔgɔn cɛ formulaire controls ye.

Tuma dɔw la, i bɛ se ka baara kɛ ni margin walima padding utilities ye walasa ka o alignment dafalen dilan i mago bɛ min na. Misali la, an ye padding-topan ka arajo dondaw label min bɛ ɲɔgɔn kan, o bɔ yen walasa ka sɛbɛnni daminɛcogo labɛn ka ɲɛ.

html ye

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

Formulaire horizontale label sizing

Aw ye aw jija ka baara kɛ ni .col-form-label-smwalima .col-form-label-lgka aw ka <label>s walima <legend>s kɛ walasa ka tugu a bonya la ka ɲɛ .form-control-lgani .form-control-sm.

Email fɛ

html ye

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

Kolonw bonya

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .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>

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

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>

You can then remix that once again with size-specific column classes.

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>

Inline forms

Use the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more. The .align-items-center aligns the form elements to the middle, making the .form-check align properly.

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>