in English

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.
Aw bɛ se ka foroko yɔrɔ bɛɛ bali foroko kɔnɔ ni disabledfɛnsɛbɛn ye min bɛ <form>.

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ɛ

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

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

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

<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 ɲɛ.

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

<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

I n’a fɔ a jiralen bɛ cogo min na misali tɛmɛnenw na, an ka jatebɔcogo b’a to i bɛ se ka .cols hakɛ o hakɛ bila a kɔnɔ .row. U bɛna bonya sɔrɔlenw tila u ni ɲɔgɔn cɛ cogo kelen na. Aw bɛ se fana k’aw ka kuluw kulu fitinin dɔ ta walasa ka yɔrɔ caman walima yɔrɔ fitinin ta, k’a sɔrɔ .cols tɔw bɛ tɔw tila ɲɔgɔn na, ni kuluw kalasi kɛrɛnkɛrɛnnenw ye i n’a fɔ .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>

Oto-sizing (yɛrɛ-sɛgɛsɛgɛli).

Misali min bɛ duguma o bɛ baara Kɛ ni flexbox nafamafɛn ye walasa ka kɔnɔkow cɛmancɛ jɔlen na ani ka fɛn caman Changer .colka Kɛ .col-autowalasa i ka kuluw bɛ yɔrɔ caman dɔrɔn Ta i n’a fɔ u mago bɛ cogo min na. Ni an y’a fɔ cogo wɛrɛ la, kulu bɛ a yɛrɛ bonya ka da a kɔnɔkow kan.

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

O kɔfɛ, aw bɛ se k’o ɲagami kokura siɲɛ kelen ni hakɛ kɛrɛnkɛrɛnnenw kuluw kalanw ye.

<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 sɛbɛnw

Baara kɛ ni .row-cols-*kalanw ye walasa ka jaabiw dilancogo tilennenw dilan. Ni an ye gutter modifier classes fara a kan , an bɛna gutterw sɔrɔ horizontal ani vertical siraw la. Mobili filɛli-yɔrɔ fitininw kan, .col-12dɛmɛ bɛ foroko kunkankow lajɛ ani fɛn wɛrɛw. The .align-items-centerbɛ foroko yɔrɔw Labɛn ka Taa cɛmancɛ la, ka ɲɔgɔndan Kɛ .form-checkboxka ɲɛ.

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