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.
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="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<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" placeholder="Password">
</div>
<div class="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 forme textuel —lokola <input>
s, <select>
s, na <textarea>
s —ezali na style na .form-control
classe. Esangisi ba styles pona apparence générale, état ya focus, sizing, pe ebele.
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 bokotisi ya fisyé, swap the .form-control
for .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>
Botia ba hauteurs na kosalelaka ba classes lokola .form-control-lg
na .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>
Bakisa readonly
attribut 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>
Soki olingi kozala na ba <input readonly>
éléments na formulaire na yo oyo esalemi na style lokola texte ya pamba, salela .form-control-plaintext
classe 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" placeholder="Password">
</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 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 esungami, kasi mpo na kopesa not-allowed
curseur na hover ya moboti <label>
, ekosenga obakisa disabled
attribut na .form-check-input
. Attribut oyo ekangami ekosalela langi ya pete mpo na kosalisa kolakisa état ya entrée.
Ba cases ya kotiya bilembo mpe ba radios oyo basalelaka etongami mpo na kosunga validation ya formulaire oyo esalemi na HTML mpe kopesa 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 id
mpe ba for
attributs mpo na ko relater na <input>
mpe <label>
.
Na ndenge ya libela, motángo nyonso ya bakɛsi mpe radio oyo ezali ndeko ya penepene ekozala na esika oyo ebongi 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 disabled">
<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>
Bosangisi ba cases ya kotiya elembo to ba radios na molongo moko ya horizontal na kobakisa .form-check-inline
na 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>
Bakisa .position-static
na ba entrées na kati .form-check
oyo eza na texte ya étiquette moko te. Kobosana te kopesa naino lolenge moko ya elembo mpo na mayele ya kosalisa (na 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>
Lokola Bootstrap esalemaka display: block
mpe 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.
Kelasi .form-group
ezali lolenge ya pɛtɛɛ ya kobakisa mwa ebongiseli na baformilɛrɛ. Ezali kopesa kelasi ya kobongola oyo elendisaka kosangisa malamu 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-inline
ndenge 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">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
Ba formulaires plus complexes ekoki kotongama na nzela ya 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>
Okoki mpe ko swap .row
mpo 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" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</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>
Bosala ba formulaire horizontal na grille na kobakisa .row
classe 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-label
na 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-top
na étiquette na biso ya ba entrées ya radio oyo etandami mpo na ko aligner malamu baseline ya texte.
<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" placeholder="Email">
</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" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<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>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<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>
Kobosana te kosalela .col-form-label-sm
to .col-form-label-lg
na <label>
s to <legend>
s na yo mpo na kolanda malamu bonene ya .form-control-lg
mpe .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>
Ndenge emonisami na bandakisa oyo eleki, système na biso ya grille epesaka yo nzela ya kotya motango nyonso ya .col
s na kati ya .row
to .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 .col
s 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>
Ndakisa oyo ezali awa na nse esaleli utilitaire flexbox mpo na ko centrer verticalement makambo oyo ezali na kati mpe ebongwanaka .col
mpo .col-auto
ete 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" 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>
Salelá .form-inline
kelasi 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: auto
pona ko superposer défaut ya Bootstrapwidth: 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 bapaya oyo bazali batangi ya é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 inline, okoki kobomba ba étiquettes na kosalelaka .sr-only
classe. Ezali na mayele mosusu ya kopesa elembo mpo na mayele ya kosalisa, na ndakisa aria-label
, aria-labelledby
to title
attribut. Soki moko te kati na yango ezali, mayele ya kosunga ekoki kosalela placeholder
ezaleli yango, soki ezali, kasi yebá ete kosalela yango placeholder
lokola esika ya mayele mosusu ya kotya bilembo ezali malamu te.
Mokanda ya lisalisi ya nivo ya bloc na ba formulaire ekoki kosalama na kosalelaka .form-text
(eyebanaki liboso lokola .help-block
na v3). Mokanda ya lisalisi ya kati ya molongo ekoki kosalelama na lolenge ya kobongola na kosalelaka eleman HTML nyonso ya 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-describedby
attribut. Yango ekosala ete mayele ya kosalisa —na ndakisa batángi ya écran —ekosakola makomi oyo ya lisalisi ntango mosaleli azali kotya likebi 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: block
na mpe ebakisi mwa marge ya likolo mpo na espacement facile uta na ba entrées oyo ezali likolo.
<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.
<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>
Bobakisa disabled
attribut boolean na entrée moko mpo na kopekisa ba interactions ya mosaleli mpe kosala ete emonana pete.
Bakisa disabled
attribut na a <fieldset>
pona ko désactiver ba contrôles nionso na kati.
<form>
<fieldset disabled>
<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-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat na ba ancres
Par défaut, ba navigateurs eko traité ba contrôles nionso ya formulaire native ( <input>
, <select>
na ba <button>
éléments) na kati ya a <fieldset disabled>
comme désactivé, epekisa ba interactions ya clavier na souris na bango. Kasi, soki formulaire na yo ezali mpe na ba <a ... class="btn btn-*">
éléments, bakopesa yango kaka style 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 d’ancre), propriété oyo ya CSS ezali naino standardisé te mpe esungami mobimba te na Opera 18 mpe na nse, to na Internet Explorer 10, mpe elongi 't kopekisa basaleli ya clavier kozala na makoki ya ko focuser to ko activer ba liens oyo. Na yango, mpo ozala na libateli, salelá JavaScript oyo obongisi mpo na kokanga ba liens ya ndenge wana.
Bokokani ya navigateur croisé
Atako Bootstrap ekosalela ba styles oyo na ba navigateurs nionso, Internet Explorer 11 mpe na se esimbaka mobimba te disabled
attribut na <fieldset>
. Salelá JavaScript oyo obongisi mpo na kokanga esika oyo ozali kosala na ba navigateurs oyo.
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.
Tosengi mingi ba styles ya validation personnalisé lokola ba défauts ya navigateur natif esakolamaka te na ba lecteurs ya écran.
Tala ndenge validation ya formulaire esalaka na Bootstrap:
- Validation ya formulaire HTML esalemi na nzela ya ba pseudo-classes mibale ya CSS,
:invalid
mpe:valid
. Etaleli<input>
,<select>
, mpe<textarea>
biloko. - Bootstrap esali ba styles ya
:invalid
mpe:valid
na 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). - Lokola fallback,
.is-invalid
mpe.is-valid
ba classes ekoki kosalelama na esika ya ba pseudo-classes mpo na validation ya côté serveur . Bazali kosɛnga te.was-validated
kelasi 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
setCustomValidity
na 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.
Mpo na ba messages ya validation ya formulaire ya Bootstrap personnalisé, ekosenga obakisa novalidate
attribut 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 :invalid
mpe :valid
mitindo oyo esalelami na ba contrôles ya formulaire na yo.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</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" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide 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" placeholder="Zip" 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>
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 retours 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-4 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
</div>
</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" placeholder="City" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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>
Tosengi kosalela validation ya côté client, kasi na cas oza na besoin ya côté serveur, okoki kolakisa ba champs ya formulaire oyo ezali na valeur te mpe oyo ezali valide na .is-invalid
mpe .is-valid
. Boyeba ete .invalid-feedback
ezali mpe kosungama na bakelasi oyo.
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</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" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
<div class="invalid-feedback">
Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
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>
Ba formulaire na biso ya ndakisa elakisaka ba s textuels natifs <input>
likolo, kasi ba styles ya validation ya formulaire ezali mpo na ba contrôles na biso ya formulaire personnalisé, mpe.
<form class="was-validated">
<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="form-group">
<select class="custom-select" required>
<option value="">Open this select menu</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">
<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>
</form>
Soki bobongisi ya formulaire na yo epesi nzela, okoki kobongola .{valid|invalid}-feedback
bakelasi mpo na .{valid|invalid}-tooltip
bakelasi mpo na kolakisa makanisi ya bondimi na lisalisi ya bisaleli oyo ezali na lolenge. Kobosana te kozala na moboti na position: relative
likolo 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.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</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" placeholder="City" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
<div class="invalid-tooltip">
Please provide 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" placeholder="Zip" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
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.
Boîte de coche mpe radio moko na moko ezingami na a <div>
na ndeko moko <span>
mpo na kosala contrôle personnalisé na biso mpe a <label>
mpo na makomi oyo ezali elongo na yango. 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-label
kelasi, tokoki mpe kosala style ya makomi mpo na eloko moko na moko na kotalela <input>
ezalela ya 's.
Tobombaka default <input>
na opacity
mpe tosalelaka .custom-control-label
mpo na kotonga elembo ya sika ya formulaire personnalisé na esika na yango na ::before
mpe ::after
. Malheureusement tokoki kotonga moko personnalisé te à partir ya kaka ya <input>
po CSS's content
esalaka 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.
<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 elembo na ndenge ya moto ye moko ekoki mpe kosalela :indeterminate
kelasi ya pseudo ntango etiamaki na maboko na nzela ya JavaScript (ezali na attribut HTML oyo ezali te mpo na kolakisa yango).
Soki ozali kosalela jQuery, eloko lokola oyo esengeli ekoki:
<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>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" 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="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Ba cases ya kotiya elembo mpe ba radios personnalisés ekoki mpe kozala désactivé. Bakisa disabled
attribut 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="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>
Ba menu personnalisé <select>
esengeli kaka na classe personnalisée, .custom-select
pona ko déclencher ba styles personnalisés.
<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 multiple
yango 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 size
ezaleli 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>
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 opacity
mpe na esika na yango style ya <label>
. Bouton yango esalemi mpe etyami na esika oyo ezali na ::after
. Na nsuka, tozali kosakola a width
mpe height
na <input>
mpo na esika oyo ebongi mpo na makambo oyo ezali zingazinga.
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-text
variable Sass na balise ya monoko oyo etali yango mpe ba chaînes localisées. Ba cordes ya Anglais ekoki kozala personnalisé ndenge moko. Na ndakisa, talá ndenge moto akoki kobakisa libongoli ya Espagnol (code ya monɔkɔ ya Espagnol ezali es
):
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 lang
na élément <html>
to Content-Language
motó ya HTTP , kati na mayele mosusu.