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.

Na lokasa oyo

Contrôle ya formulaire Style ya ba entrées textuelles na ba textareas na soutien ya ba états ebele.

Kopona Bobongisa ba éléments ya pona par défaut ya navigateur na apparence ya ebandeli ya personnalisé.

Ba vérifications & ba radios Salelá ba boutons na biso ya radio personnalisé mpe ba cases ya kotiya bilembo na ba formulaire mpo na kopona ba options ya kokotisa.

Mingi Bobongola ba entrées ya gamme par défaut ya navigateur na version personnalisé na biso.

Lisanga ya bokoti Bokanga ba étiquettes na ba boutons na ba entrées na yo pona valeur sémantique emati.

Ba étiquettes oyo ezali ko flotter Bosala ba étiquettes ya formulaire kitoko ya pete oyo ezo flotter likolo ya ba champs na yo ya entrée.

Kobongisa Salá ba layouts inline, horizontal, to complexe oyo esalemi na grille na ba formulaire na yo.

Bondimisi ya mosala Valider ba formulaire na yo na ba comportements ya validation personnalisé to native na ba styles.

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

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

Bosala makomi

Mokanda ya formulaire ya niveau ya bloc to ya niveau ya kati ya ligne ekoki kosalama na kosalelaka .form-text.

Kosangisa makomi ya formulaire na ba contrôles ya formulaire

Texte ya formulaire esengeli ezala explicitement associé na contrôle ya formulaire oyo etali kosalela aria-describedbyattribut. Yango ekosala ete mayele ya kosalisa —lokola batángi ya écran —ekosakola makomi ya formulaire oyo ntango mosaleli azali kotya likebi to akokɔta na esika oyo batambwisaka yango.

Formulaire texte na se ya ba entrées ekoki kozala styled na .form-text. Soki élément ya niveau ya bloc ekosalelama, marge ya likolo ebakisami pona espacement facile na ba entrées oyo ezali likolo.

Mot de passe

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" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Mokanda ya kati ya molongo ekoki kosalela eloko nyonso ya HTML ya kati ya molongo ya momesano (ezala <span>, <small>, to eloko mosusu) na eloko mosusu te koleka .form-textkelasi.

Mot de passe

Esengeli kozala na bolai ya bilembo 8-20.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

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. Ba navigateurs e traité ba contrôles nionso ya forme native ( <input>, <select>, na ba <button>éléments) na kati ya a <fieldset disabled>comme 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-*">...</a>, bakopesa yango kaka lolenge ya pointer-events: none, elingi koloba ete ezali kaka oyo ekoki kotya likebi mpe ekoki kosalelama na lisalisi ya klaviatware. Na cas oyo, esengeli o modifier manuellement ba contrôles wana na kobakisa tabindex="-1"mpo na kopekisa yango kozua focus mpe aria-disabled="disabled"ko signaler état na yango na ba technologies d’assistance.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <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>

Kozala na makoki ya kozwa yango

Kosala ete ba contrôles nionso ya formulaire ezala na kombo oyo ebongi oyo ekoki kozuama mpo ete ntina na yango ekoki kopesama na basaleli ya ba technologies ya lisungi. Lolenge ya pete ya kokokisa yango ezali ya kosalela <label>eloko moko, to —na likambo ya ba boutons —kotia makomi oyo ekoki kolimbola yango lokola eteni ya <button>...</button>makambo oyo ezali na kati.

Mpo na makambo oyo ezali likoki te ya kotya makambo oyo ezali komonana <label>to oyo ebongi, ezali na banzela mosusu ya kopesa kaka nkombo oyo ekoki kozwama, na ndakisa:

<label>biloko oyo ebombami na kosaleláká .visually-hiddenkelasi
Kolakisa élément moko oyo ezali oyo ekoki kosala lokola étiquette kosalelaaria-labelledby
Kopesa titleezaleli moko
Kobongisa polele kombo oyo ekoki kozwama na eleman moko na kosalelakaaria-label

Soki moko te ya oyo ezali, ba technologies ya lisungi ekoki ko recours na kosalela placeholderattribut lokola fallback mpo na kombo accessible na <input>mpe <textarea>ba éléments. Bandakisa oyo ezali na eteni oyo epesi mwa mayele oyo epesami, oyo etali likambo moko boye.

Atako kosalela makambo oyo ebombami na miso ( .visually-hidden, aria-label, mpe ata placeholdermakambo, oyo elimwaka ntango esika ya formulaire ezali na makambo) ekopesa matomba na basaleli ya tekiniki ya kosalisa, kozanga makomi ya elembo oyo emonanaka ekoki kaka kozala mokakatano mpo na basaleli mosusu. Lolenge moko ya étiquette oyo emonanaka ezali mingi mingi lolenge ya malamu koleka, ezala mpo na bozwi mpe bosaleli.

Sass oyo azali

Ba variables ya forme mingi etiamaki na niveau général mpo na kosalelama lisusu mpe epanzani na ba composants ya forme moko moko. Okomona oyo mingi mingi lokola $btn-input-*mpe $input-*ba variables.

Ba variables oyo ezali

$btn-input-*ba variables ezali ba variables mondiales partagées entre ba boutons na biso na ba composants ya formulaire na biso. Okokuta oyo mbala mingi ezongisamaka lokola ba valeurs na ba variables misusu spécifiques ya composant.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;