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 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 type
attribut oyo ebongi na ba entrées nionso (ndakisa, email
pona adresse email to number
pona 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-describedby
attribut. 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.
<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-text
kelasi.
<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 disabled
attribut 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 disabled
attribut 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-hidden
kelasi- Kolakisa élément moko oyo ezali oyo ekoki kosala lokola étiquette kosalela
aria-labelledby
- Kopesa
title
ezaleli moko - Kotiya polele kombo oyo ekoki kozwama na eleman moko na kosalelaka
aria-label
Soki moko te ya oyo ezali, ba technologies ya lisungi ekoki ko recours na kosalela placeholder
attribut 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 placeholder
makambo, 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;