in English

Baformilɛrɛ

Bandakisa mpe malako ya bosaleli mpo na mitindo ya bokonzi ya formulaire, ba options ya layout, mpe ba composants personnalisés mpo na kosala ba formulaire ndenge na ndenge.

Botali ya mozindo

Ba contrôles ya formulaire ya Bootstrap epanzani na ba styles na biso ya formulaire Rebooted na ba classes. Salelá bakelasi oyo mpo na kopona na ba écrans na bango oyo ebongisami mpo na kosala rendu oyo ezali na boyokani mingi na kati ya ba navigateurs mpe ba appareils.

Sala makasi osalela typeattribut oyo ebongi na ba entrées nionso (ndakisa, emailpona adresse email to numberpona ba informations numériques) pona ko profiter na ba contrôles ya sika ya entrée lokola vérification ya email, pona numero, pe ebele.

Tala ndakisa ya mbangu mpo na kolakisa ba styles ya formulaire ya Bootstrap. Koba kotanga mpo na mikanda na ntina ya bakelasi oyo esengeli, ndenge ya kosala formulaire, mpe mingi mosusu.

Tokokabola email na yo na moto mosusu ata mokolo moko te. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ba contrôles ya formulaire

Ba contrôles ya formulaire textuel —lokola <input>s, <select>s, na <textarea>s —ezali na style na .form-controlclasse. Ezali na ba styles mpo na appearance générale, état ya focus, sizing, mpe mingi mosusu.

Bozala sûr ya ko explorer ba formulaires na biso personnalisés pona ko continuer style <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Mpo na bokɔtisi ya fisyé, swap the .form-controlfor .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Kosala bonene ya biloko

Botia ba hauteurs na kosalelaka ba classes lokola .form-control-lgna .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Bobele kotánga

Bakisa readonlyattribut boolean na entrée moko pona kopekisa modification ya valeur ya entrée. Ba entrées ya kotanga kaka emonanaka pete (kaka lokola ba entrées oyo ekangami), kasi batela curseur standard.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Kotánga kaka makomi ya pɛtɛɛ

Soki olingi kozala na ba <input readonly>éléments na formulaire na yo oyo esalemi na style lokola texte ya pamba, salela .form-control-plaintextclasse mpo na kolongola styling ya champ ya formulaire par défaut mpe kobatela marge mpe padding oyo ebongi.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Ba Entrées ya Gamme

Set ba entrées ya gamme oyo ekoki ko défiler horizontalement na nzela ya .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Ba cases ya kotiya bilembo mpe ba radios

Ba cases ya kotiya bilembo ya liboso mpe ba radio ebongisami na lisalisi ya .form-check, kelasi moko mpo na mitindo nyonso mibale ya bokɔti oyo ebongisaka ndenge mpe bizaleli ya biloko na bango ya HTML . Ba case ya kotiya bilembo ezali mpo na kopona option moko to mingi na liste, nzokande ba radios ezali mpo na kopona option moko kati na mingi.

Ba cases ya kotiya elembo mpe ba radio oyo ekangami ezali na lisungi. Attribut disabledekosalela langi ya pete mpo na kosalisa kolakisa état ya entrée.

Ba cases ya kotiya bilembo mpe ba boutons ya radio esalisaka validation ya formulaire oyo esalemi na HTML mpe epesaka ba étiquettes ya mokuse, oyo ekoki kozuama. Lokola yango, <input>s mpe <label>s na biso ezali biloko ya bandeko na bokeseni na oyo ezali na <input>kati ya <label>. Oyo ezali mwa verbose mingi lokola esengeli o préciser idmpe ba forattributs mpo na ko relater na <input>mpe <label>.

Par défaut (ezali ebele) .

Na ndenge ya libela, motángo nyonso ya bakɛsi ya kotya bilembo mpe ya radio oyo ezali ndeko ya penepene ekozala etandami na ngámbo ya semba mpe ekozala na esika oyo ebongi na .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Na kati ya molongo

Bosangisi ba cases ya kotiya elembo to ba radios na molongo moko ya horizontal na kobakisa .form-check-inlinena nionso .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Kozanga ba étiquettes

Bakisa .position-staticna ba entrées na kati .form-checkoyo eza na texte ya étiquette moko te. Kobosana te kopesa naino lolenge moko ya nkombo oyo ekoki kozwama mpo na mayele ya kosalisa (ndakisa, kosalela aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Kobongisa

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.

Bosala bituluku

Kelasi .form-groupezali lolenge ya pɛtɛɛ ya kobakisa mwa ebongiseli na baformilɛrɛ. Ezali kopesa kelasi ya kobongola oyo elendisaka kosangisa malamu ya bilembo, bokonzi, makomi ya lisalisi oyo okoki kopona, mpe nsango ya bondimi ya formulaire. Par défaut esalemaka kaka margin-bottom, kasi ezuaka ba styles ya kobakisa na .form-inlinendenge esengeli. Salelá yango elongo na <fieldset>s, <div>s, to pene na eloko mosusu nyonso.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

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.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Formulaire ya molongo

Okoki mpe ko swap .rowmpo na .form-row, mbongwana ya molongo na biso ya grille standard oyo elongolaka ba gouttières ya colonne par défaut mpo na ba layouts ya makasi mpe ya compact.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

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

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</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.

Ba radios 
<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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="form-group row">
    <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>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</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.

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group 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>
</form>

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

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

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.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <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 mb-2">Submit</button>
    </div>
  </div>
</form>

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

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <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 my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Et bien sûr ba contrôles ya formulaire personnalisé ezali soutenu.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <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 my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

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

Salelá .form-inlinekelasi mpo na kolakisa molɔngɔ́ ya bilembo, ba contrôles ya formulaire, mpe ba boutons na molongo moko ya horizontal. Ba contrôles ya formulaire na kati ya ba formulaires inline ekeseni mwa moke na ba états na yango ya défaut.

  • Ba contrôles ezali display: flex, ko collapser espace blanc HTML nionso mpe ko permettre yo opesa contrôle ya alignment na ba utilitaires ya espacement na flexbox .
  • Ba contrôles na ba groupes ya entrée bazuaka width: autopona ko superposer défaut ya Bootstrap width: 100%.
  • Ba contrôles emonanaka kaka na kati ya ligne na ba portes de vue oyo ezali au moins 576px ya largeur pona ko comptabiliser ba portes de vue ya mike na ba appareils mobiles.

Ekoki kozala ete osengeli kotalela na mabɔkɔ bonene mpe boyokani ya ba contrôles ya formulaire mokomoko na ba utilitaires ya espacement (ndenge emonisami awa na nse). Na nsuka, kobosana te kotya ntango nyonso a <label>na contrôle ya formulaire moko na moko, ata soki osengeli kobomba yango mpo na ba visiteurs oyo bazali lecteurs d’écran te na .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Ba contrôles ya formulaire personnalisé na ba selections ezali pe ko soutenir.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Ba alternatives na ba étiquettes oyo ebombami

Ba technologies ya kosunga lokola ba lecteurs ya écran ekozala na problème na ba formulaire na yo soki otie étiquette te pona entrée nionso. Mpo na ba formulaire oyo ya kati, okoki kobomba ba étiquettes na kosalelaka .sr-onlykelasi. Ezali na mayele mosusu ya kopesa elembo mpo na mayele ya kosalisa, na ndakisa aria-label, aria-labelledbyto titleattribut. Soki moko te kati na yango ezali, mayele ya kosalisa ekoki kosalela placeholderezaleli yango, soki ezali, kasi yebá ete kosalela yango placeholderlokola esika ya mayele mosusu ya kotya bilembo ezali malamu te.

Mokanda ya lisalisi

Mokanda ya lisalisi ya nivo ya bloc na ba formulaire ekoki kosalama na kosalelaka .form-text(eyebanaki liboso lokola .help-blockna v3). Mokanda ya lisalisi ya kati ya molongo ekoki kosalelama na ndenge ya kobongola na kosalelaka eloko nyonso ya HTML oyo ezali na kati ya molongo mpe bakelasi ya utilitaire lokola .text-muted.

Kosangisa makomi ya lisalisi na ba contrôles ya formulaire

Mokanda ya lisalisi esengeli kozala na boyokani ya polele na bokonzi ya formulaire oyo ezali na boyokani na kosalela aria-describedbyattribut. Yango ekosala ete mayele ya kosalisa —lokola batángi ya écran —ekosakola makomi oyo ya lisalisi ntango mosaleli azali kotya makanisi na ye to akokɔta na esika oyo batambwisaka yango.

Mokanda ya lisalisi na nse ya bokɔti ekoki kozala na lolenge na .form-text. Kelasi oyo ezali display: blockna mpe ebakisi mwa marge ya likolo mpo na espacement facile uta na ba entrées oyo ezali likolo.

Mot de passe na yo esengeli kozala na bolai ya bilembo 8-20, kozala na balɛtrɛ mpe mituya, mpe esengeli te kozala na bisika, bilembo ya sipesiale, to emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Mokanda ya kati ya molongo ekoki kosalela eloko nyonso ya HTML ya kati ya molongo (ezala <small>, <span>, to eloko mosusu) na eloko mosusu te bobele kelasi ya utilitaire.

Esengeli kozala na bolai ya bilembo 8-20. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Ba formulaire ya ba handicapés

Bobakisa disabledattribut boolean na entrée moko mpo na kopekisa ba interactions ya mosaleli mpe kosala ete emonana pete.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Bakisa disabledattribut na a <fieldset>pona ko désactiver ba contrôles nionso na kati.

Ndakisa ya ensemble ya bilanga oyo ekangami 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat na ba ancres

Ba navigateurs e traité ba contrôles nionso ya forme native ( <input>, <select>, na ba <button>éléments) na kati ya a <fieldset disabled>lokola désactivé, epekisaka ba interactions ya clavier na souris na bango.

Kasi, soki formulaire na yo ezali mpe na biloko oyo ezali lokola bouton oyo esalemi na kolanda bamposa na yo lokola <a ... class="btn btn-*">, bakopesa yango kaka lolenge ya pointer-events: none. Ndenge emonisami na eteni oyo elobeli état désactivé mpo na ba boutons (mpe mingimingi na eteni moke mpo na ba éléments ya anchor), propriété oyo ya CSS ezali naino standardisé te mpe esungami mobimba te na Internet Explorer 10. Ba contrôles oyo esalemi na anchor ekozala mpe kaka bongo focusable mpe ekoki kosala na nzela ya clavier. Esengeli o modifier manuellement ba contrôles oyo na kobakisa tabindex="-1"mpo na kopekisa yango kozua focus mpe aria-disabled="disabled"ko signaler état na yango na ba technologies d’assistance.

Bokokani ya navigateur croisé

Atako Bootstrap ekosalela ba styles oyo na ba navigateurs nionso, Internet Explorer 11 mpe na se esimbaka mobimba te disabledattribut na <fieldset>. Salelá JavaScript oyo obongisi mpo na kokanga esika oyo ozali kosala na ba navigateurs oyo.

Bondimisi ya mosala

Pesa makanisi ya motuya, oyo ekoki kosala na basaleli na yo na bondimi ya formulaire HTML5– oyo ezali na ba navigateurs na biso nyonso oyo tosungami . Pona na kati ya ba réactions ya validation par défaut ya navigateur, to salela ba messages personnalisés na ba classes na biso oyo etongami na kati mpe JavaScript ya démarrage.

Toyebi ete na tango oyo ba styles ya validation personnalisé ya côté client na ba toli ya bisaleli ezali accessible te, puisque ezali exposés te na ba technologies ya assistance. Ntango tozali kosala na solution, tokopesa toli ya kosalela option ya côté serveur to méthode ya validation ya navigateur par défaut.

Ndenge oyo esalaka

Tala ndenge validation ya formulaire esalaka na Bootstrap:

  • Validation ya formulaire HTML esalemi na nzela ya ba pseudo-classes mibale ya CSS, :invalidmpe :valid. Etaleli <input>, <select>, mpe <textarea>biloko.
  • Bootstrap esali ba styles ya :invalidmpe :validna classe ya moboti .was-validated, mingi mingi esalelamaka na <form>. Soki te, esika nyonso oyo esengeli kozanga motuya ekolakisama lokola oyo ezali na ntina te na bokɔti ya lokasa. Na ndenge yango, okoki kopona ntango nini okofungola yango (mingimingi nsima ya komeka kotinda formulaire).
  • Mpo na kozongisa lolenge ya komonana ya formulaire (ndakisa, na likambo ya botindiki ya formulaire dynamique na kosalelaka AJAX), longola .was-validatedkelasi na <form>lisusu nsima ya kotinda.
  • Lokola fallback, .is-invalidmpe .is-validba classes ekoki kosalelama na esika ya ba pseudo-classes mpo na validation ya côté serveur . Bazali kosɛnga te .was-validatedkelasi ya baboti.
  • Na tina ya ba contraintes na ndenge CSS esalaka, tokoki te (na tango oyo) kosalela ba styles na a <label>oyo eyaka liboso ya contrôle ya formulaire na DOM sans aide ya JavaScript personnalisé.
  • Ba navigateurs nionso ya mikolo oyo esungaka API ya validation ya contrainte , série ya ba méthodes ya JavaScript pona ko valider ba contrôles ya formulaire.
  • Ba messages ya ba réactions ekoki kosalela ba défauts ya navigateur (ekeseni mpo na navigateur moko na moko, mpe ekoki kozala na style te na nzela ya CSS) to ba styles na biso ya ba réactions personnalisés na HTML mpe CSS ya kobakisa.
  • Okoki kopesa ba messages ya validité personnalisé na setCustomValidityna JavaScript.

Na makanisi wana, talelá ba démonstrations oyo elandi mpo na ba styles na biso ya validation ya formulaire personnalisé, ba classes ya côté serveur oyo okoki kopona, mpe ba défauts ya navigateur.

Ba styles oyo esalemi na kolanda bamposa ya bato

Mpo na ba messages ya validation ya formulaire ya Bootstrap personnalisé, ekosenga obakisa novalidateattribut boolean na <form>. Yango e désactiver ba conseils ya retour par défaut ya navigateur, kasi epesaka kaka accès na ba API ya validation ya formulaire na JavaScript. Meká kotinda formulaire oyo ezali awa na nse; JavaScript na biso ekokanga bouton ya kotinda mpe ekopesa yo makanisi. Ntango ozali komeka kotinda, okomona :invalidmpe :validmitindo oyo esalelami na ba contrôles ya formulaire na yo.

Ba styles ya ba retours personnalisés esalelaka ba couleurs personnalisées, ba frontières, ba styles ya focus, na ba icônes ya fond pona ko communiquer malamu ba réactions. Ba icônes ya fond ya <select>s ezali kaka na .custom-select, mpe te .form-control.

Emonani malamu!
Emonani malamu!
Tosengi yo opesa engumba oyo ezali na ntina.
Svp pona état oyo ezali valide.
Svp bopesa zip ya malamu.
Esengeli ondima liboso ya kotinda. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Navigateur ezo défaut

Ozali na mposa te ya ba messages ya rétroaction ya validation personnalisée to kokoma JavaScript mpo na kobongola bizaleli ya formulaire? Nionso bien, okoki kosalela ba défauts ya navigateur. Meká kotinda formulaire oyo ezali awa na nse. Na kotalela navigateur mpe OS na yo, okomona lolenge ya kopesa makanisi oyo ekeseni mwa moke.

Atako ba styles oyo ya ba réactions ekoki kozala style na CSS te, okoki kaka ko personnaliser texte ya ba réactions na nzela ya JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Côté ya serveur

Tosengi kosalela validation côté client, kasi na cas osengi validation côté serveur, okoki kolakisa ba champs ya formulaire oyo ezali na valeur te mpe oyo ezali valide na .is-invalidmpe .is-valid. Boyeba ete .invalid-feedbackezali mpe kosungama na bakelasi oyo.

Mpo na bisika oyo ezali malamu te, sala ete nsango ya bozongisi makanisi/libunga oyo ezali malamu te ezala na boyokani na esika ya formulaire oyo etali yango na kosalelaka aria-describedby. Attribut oyo epesaka nzela ya idkosala référence koleka moko, na cas oyo champ elakisaka déjà texte ya formulaire ya kobakisa.

Emonani malamu!
Emonani malamu!
Tosengi yo opesa engumba oyo ezali na ntina.
Svp pona état oyo ezali valide.
Svp bopesa zip ya malamu.
Esengeli ondima liboso ya kotinda. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ba éléments oyo esungami

Ba styles ya validation ezali pona ba contrôles ya formulaire na ba composants oyo elandi:

  • <input>s na <textarea>s na.form-control
  • <select>s na .form-controlto.custom-select
  • .form-checks
  • .custom-checkboxs mpe .custom-radios
  • .custom-file
Svp kotia message na esika ya texte.
Ndakisa ya makomi ya bozongisi makanisi oyo ezali na ntina te
Ndakisa mingi texte ya rétroaction ya mabe
Ndakisa ya bozongisi makanisi ya kopona ya momesano oyo ezali malamu te
Ndakisa ya bozongisi makanisi ya fisyé ya momesano oyo ezali na ntina te
@
Ndakisa ya bozongisi makanisi ya etuluku ya bokɔti oyo ezali malamu te
Ndakisa ya bozongisi makanisi ya etuluku ya bokɔti oyo ezali malamu te
Ndakisa ya bozongisi makanisi ya etuluku ya bokɔti oyo ezali malamu te 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Batoli ya bisaleli

Soki bobongisi ya formulaire na yo epesi yango nzela, okoki kobongola .{valid|invalid}-feedbackbakelasi mpo na .{valid|invalid}-tooltipbakelasi mpo na kolakisa makanisi ya bondimi na lisalisi ya bisaleli oyo ezali na lolenge. Kobosana te kozala na moboti na position: relativelikolo na yango mpo na positionnement ya tooltip. Na ndakisa oyo ezali awa na nse, ba classes na biso ya colonne ezali déjà na oyo, kasi projet na yo ekoki kosenga configuration alternative.

Emonani malamu!
Emonani malamu!
Tosengi yo opesa engumba oyo ezali na ntina.
Svp pona état oyo ezali valide.
Svp bopesa zip ya malamu. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Kosala na ndenge ya moto ye moko

Ba états ya validation ekoki kozala personnalisé via Sass na $form-validation-statescarte. Ezwami na _variables.scssfichier na biso, carte oyo ya Sass ezali na boucle mpo na kobimisa ba états par défaut valid/ invalidvalidation. Ezali na kati ya karte oyo ezali na kati mpo na kosala langi mpe elembo ya etúká mokomoko. Atako ba états mosusu te esungami na ba navigateurs, ba oyo basalelaka ba styles personnalisés bakoki kobakisa na pete ba retours ya formulaire ya complexe mingi.

Svp bo yeba que to recommandé te ko personnaliser ba valeurs oyo sans pe ko modifier form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Validation ya groupe ya entrée

Pona ko détecter ba éléments nini esengeli na ba coins arrondis na kati ya groupe ya entrée na validation, groupe ya entrée esengaka .has-validationclasse ya kobakisa.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Svp pona kombo ya mosaleli.

Ba formulaire oyo esalemi na kolanda bamposa ya bato

Mpo na kosala lisusu mingi mpe kozala na boyokani ya navigateur oyo ekulusu, salelá ba éléments na biso ya formulaire oyo ezali mpenza personnalisé mpo na kozwa esika ya ba défauts ya navigateur. Batongami likolo ya marquage sémantique mpe accessible, yango wana bazali ba remplacements solides mpo na contrôle nionso ya formulaire par défaut.

Ba cases ya kotiya bilembo mpe ba radios

Boîte de coche moko na moko na radio <input>na <label>pairing ezali enveloppé na a <div>pona ko créer contrôle personnalisé na biso. Na structure, oyo ezali ndenge moko na ndenge na biso ya défaut .form-check.

Tosalelaka moponi ya bandeko ( ~) mpo na ba <input>états na biso nyonso —lokola :checked—mpo na kosala malamu elembo ya formulaire na biso ya momesano. Ntango tosangani na .custom-control-labelkelasi, tokoki mpe kosala style ya makomi mpo na eloko moko na moko na kotalela <input>ezalela ya 's.

Tobombaka default <input>na opacitympe tosalelaka .custom-control-labelmpo na kotonga elembo ya sika ya formulaire personnalisé na esika na yango na ::beforempe ::after. Malheureusement tokoki kotonga moko personnalisé te à partir ya kaka ya <input>po CSS's contentesalaka te na élément wana.

Na ba états oyo ba vérifier, tosalelaka ba icônes SVG intégrées base64 à partir ya Open Iconic . Yango epesaka biso contrôle ya malamu koleka mpo na styling mpe positionnement na kati ya ba navigateurs mpe ba appareils.

Ba cases ya kotiya bilembo

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Ba cases ya kotiya bilembo ya personnalisé ekoki pe kosalela :indeterminateclasse ya pseudo tango etiamaki manuellement na nzela ya JavaScript (ezali na attribut HTML oyo ezali te pona ko préciser yango).

Soki ozali kosalela jQuery, eloko lokola oyo esengeli ekoki:

$('.your-checkbox').prop('indeterminate', true)

Ba radios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Na kati ya molongo

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Bakanga

Ba cases ya kotiya elembo mpe ba radios personnalisés ekoki mpe kozala désactivé. Bakisa disabledattribut boolean na <input>mpe indicateur personnalisé mpe description ya étiquette ekozala automatiquement styled.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Ba interrupteurs

Commutateur ezali na marquage ya case ya kotiya elembo ya personnalisé kasi esalela .custom-switchclasse mpo na ko rendre commutateur ya toggle. Ba commutateurs pe ezo sunga disabledattribut.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Pona menu

Ba menu personnalisé <select>esengeli kaka na classe personnalisée, .custom-selectpona ko déclencher ba styles personnalisés. Ba styles personnalisés ezali limité na <select>'s appearance ya ebandeli mpe ekoki ko modifier <option>s te mpo na ba limitations ya navigateur.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Okoki mpe kopona kati na ba selects ya mike mpe ya minene oyo esalemi na kolanda bamposa ya moto mpo na kokokana na ba entrées na biso ya makomi ya bonene ya ndenge moko.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Attribut multipleyango mpe esungami:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Ndenge ezali mpe sizeezaleli yango:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Mingi

Bosala ba <input type="range">contrôles personnalisés na .custom-range. Track (fond) mpe thumb (valeur) nyonso mibale ezali na style mpo na komonana ndenge moko na kati ya ba navigateurs. Lokola kaka IE mpe Firefox nde esungaka “kotondisa” piste na bango uta na loboko ya mwasi to na loboko ya mobali ya mosapi monene lokola nzela ya kolakisa na miso bokende liboso, tozali kosunga yango te na ntango oyo.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Ba entrées ya gamme ezali na ba valeurs implicites mpo minna mpe max— 0mpe 100, respectivement. Okoki kolakisa motuya ya sika mpo na baye bazali kosalela bizaleli minmpe max.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Na ndenge ya libela, ba entrées ya range “snap” na ba valeurs ya nombre entier. Mpo na kobongola yango, okoki kolakisa stepmotuya moko. Na ndakisa oyo ezali awa na nse, tozali kobakisa mbala mibale motángo ya matambe na kosaleláká step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Navigateur ya ba fichiers

Plugin recommandé pona ko animer entrée ya fichier personnalisé: bs-custom-file-input , yango nde tozali kosalela actuellement awa na docs na biso.

Entrée ya fichier ezali plus gnarly ya bunch mpe esengaka JavaScript ya kobakisa soki olingi ko connecter bango na fonctionnel Pona fichier... mpe texte ya kombo ya fichier oyo oponi.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Tobombaka fichier par défaut <input>via opacitympe na esika na yango style ya <label>. Bouton yango esalemi mpe etyami na esika oyo ezali na ::after. Na nsuka, tozali kosakola a widthmpe heightna <input>mpo na esika oyo ebongi mpo na makambo oyo ezali zingazinga.

Kobongola to kosala ba chaînes na ndenge ya moto ye moko na SCSS

Pseudo :lang()-classe esalelamaka mpo na kopesa nzela na kobongola makomi “Browse” na minɔkɔ mosusu. Bolongola to bobakisa ba entrées na $custom-file-textvariable Sass na balise ya monoko oyo etali yango mpe ba chaînes localisées. Ba cordes ya Anglais ekoki kozala personnalisé ndenge moko. Ndakisa, talá ndenge moto akoki kobakisa libongoli ya Espagnol (code ya monɔkɔ ya Espagnol ezali es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Tala lang(es)na action na entrée ya fichier personnalisé pona traduction ya espagnol:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Okozala na posa ya kotiya monoko ya mokanda na yo (to nzete ya moke na yango) malamu mpo ete makomi ya malamu elakisama. Yango ekoki kosalema na kosalelaka attribut langna élément <html>to Content-Languagemotó ya HTTP , kati na mayele mosusu.

Kobongola to kobongisa ba chaînes na HTML

Bootstrap epesaka mpe lolenge ya kobongola makomi ya “Browse” na HTML na data-browseattribut oyo ekoki kobakisa na étiquette ya entrée personnalisé (ndakisa na Néerlandais):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>