in English

Kobongisa

Pesa ba formulaire na yo mwa structure —kobanda na inline tii na horizontal tii na ba implémentations ya grille personnalisé —na ba options na biso ya layout ya formulaire.

Na lokasa oyo

Baformilɛrɛ

Lisanga nyonso ya bisika ya formulaire esengeli kofanda na kati ya <form>eleman moko. Bootstrap epesaka styling ya défaut te mpo na <form>élément, kasi ezali na mwa ba fonctionnalités ya navigateur ya makasi oyo epesami na ndenge ya défaut.

Ya sika na ba formulaire ya navigateur? Tala kotala lisusu ba docs ya formulaire ya MDN pona botali ya mozindo pe liste mobimba ya ba attributs oyo ezali.
<button>s na kati ya <form>default to type="submit", yango wana sala makasi ozala spécifique mpe otia ntango nyonso a type.

Lokola Bootstrap esalemaka display: blockmpe width: 100%na presque ba contrôles na biso nionso ya formulaire, ba formulaire ekozala par défaut empiler verticalement. Ba kelasi ya kobakisa ekoki kosalelama mpo na kobongola lolenge oyo na kotalela formulaire moko.

Ba utilités

Ba utilitaires ya marge ezali lolenge ya pete ya kobakisa mwa structure na ba formulaire. Bazali kopesa groupement ya base ya ba étiquettes, ba contrôles, texte ya formulaire optionnel, mpe messagerie ya validation ya formulaire. Tosengi kokangama na margin-bottomba utilités, mpe kosalela direction moko na formulaire mobimba mpo na boyokani.

Bozala na bonsomi ya kotonga baformilɛrɛ na bino ndenge nini bolingi, na <fieldset>s, <div>s, to pene na eloko mosusu nyonso.

Ndakisa ya étiquette

Etiquette mosusu

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>

Formulaire ya grille

Ba formulaire ya complexe mingi ekoki kotongama na kosalelaka ba classes na biso ya grille. Salelá yango mpo na mabongisi ya baformilɛrɛ oyo esɛngaka makonzí mingi, bonene ndenge na ndenge, mpe banzela mosusu ya kosala boyokani. Esengaka $enable-grid-classesvariable ya Sass ezala activé (on par défaut).

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>

Ba gouttières

Na kobakisa ba classes ya modificateur ya gouttière , okoki kozala na contrôle ya largeur ya gouttière na ndenge moko na direction ya inline lokola bloc. Esengi pe $enable-grid-classesvariable Sass ezala activé (on par défaut).

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>

Ba layouts ya complexe mingi ekoki pe kosalama na système ya grille.

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>

Forme horizontale

Bosala ba formulaire horizontal na grille na kobakisa .rowclasse na ba groupes ya ba formes mpe kosalela ba .col-*-*classes mpo na kolakisa largeur ya ba étiquettes mpe ba contrôles na yo. Bozala sûr ya kobakisa .col-form-labelna s na bino <label>lokola po bazala verticalement centré na ba contrôles ya formulaire na bango associé.

Na bantango mosusu, mbala mosusu osengeli kosalela ba utilitaires ya marge to ya padding mpo na kosala alignment wana ya kokoka oyo osengeli na yango. Ndakisa, tolongoli padding-topna étiquette na biso ya ba entrées ya radio oyo etandami mpo na ko aligner malamu baseline ya texte.

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>

Taille ya étiquette ya formulaire horizontale

Kobosana te kosalela .col-form-label-smto .col-form-label-lgna <label>s to <legend>s na yo mpo na kolanda malamu bonene ya .form-control-lgmpe .form-control-sm.

Email na nzela ya Internet

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>

Kosala bonene ya makonzí

Ndenge emonisami na bandakisa oyo eleki, système na biso ya grille epesaka yo nzela ya kotya motango nyonso ya .cols na kati ya .row. Bako kabola largeur oyo ezali également entre bango. Okoki mpe kopona mwa ndambo ya makonzí na yo mpo na kozwa esika mingi to moke, nzokande .cols oyo etikali ekabolaka ndenge moko oyo etikali, na bakelasi ya makonzí ya sikisiki lokola .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>

Kosala bonene na yango moko

Ndakisa oyo ezali awa na nse esaleli utilitaire flexbox mpo na ko centrer verticalement makambo oyo ezali na kati mpe ebongwanaka .colmpo .col-autoete ba colonne na yo ezwa kaka esika mingi ndenge esengeli. Soki tolobeli yango na ndenge mosusu, makonzí yango ekómaka na bonene na kotalela makambo oyo ezali na kati.

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>

Na sima okoki ko remixer yango mbala moko lisusu na ba classes ya colonne spécifique ya taille.

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>

Baformilɛrɛ oyo ezali na kati ya molɔngɔ

Salelá .row-cols-*bakelasi mpo na kosala ba layouts horizontales oyo ekoki koyanola. By adding gutter modifier classes , tokozala na ba gouttières na ba direction horizontale na verticale. Na ba portes de vue mobile étroit, ba .col-12aides empiler ba contrôles ya formulaire et plus. The .align-items-centeraligner ba éléments ya forme na kati, kosala .form-checkalignment malamu.

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>