Dagiti Pormas
Dagiti pagarigan ken dagiti pagalagadan ti panagusar para kadagiti estilo ti panagtengngel ti porma, dagiti pagpilian ti layout, ken dagiti kostumbre a paset para iti panagpartuat kadagiti nadumaduma a porma.
Dagiti kontrol ti porma ti Bootstrap ket mangpalawa kadagiti estilo ti pormatayo a Rebooted nga addaan kadagiti klase. Usaren dagitoy a klase tapno agpili kadagiti napasadaan a displayda para iti ad-adu a naurnos a panagiparang iti ballasiw dagiti browser ken alikamen.
Siguraduen nga agusar ti maitutop type
a kababalin kadagiti amin nga input (kas pagarigan, email
para iti pagtaengan ti email wenno number
para iti numero nga impormasion) tapno magundawayan dagiti baro a kontrol ti input a kas ti panangipaneknek ti email, panagpili ti numero, ken dadduma pay.
Adda ditoy ti napardas a pagarigan tapno maipakita dagiti estilo ti porma ti Bootstrap. Itultuloymo ti agbasa para iti dokumentasion kadagiti kasapulan a klase, layout ti porma, ken dadduma pay.
<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>
Dagiti kontrol ti porma ti teksto—kas <input>
iti s, <select>
s, ken <textarea>
s—ket estilo a kadua ti .form-control
klase. Nairaman dagiti estilo para iti sapasap a langa, kasasaad ti pokus, panagdakkel, ken dadduma pay.
Siguraduenyo a sukimaten dagiti kostumbre a pormami tapno ad-adda pay nga estilo <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>
Para kadagiti panagserrek ti papeles, isukat ti .form-control
para iti .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>
Itakderan dagiti kangato babaen ti panagusar kadagiti klase a kas .form-control-lg
ken .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>
Inayon ti readonly
boolean a kababalin iti maysa nga input tapno malapdan ti pannakabalbaliw ti pateg ti input. Agparang a nalaglag-an dagiti mabasa laeng nga input (kas met laeng kadagiti nabaldado nga input), ngem pagtalinaeden ti gagangay a kursor.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
No kayatmo ti maaddaan kadagiti <input readonly>
elemento iti pormam a naistilo a kas plain text, usarem ti .form-control-plaintext
klase tapno ikkaten ti default nga estilo ti tay-ak ti porma ken mangpreserba ti umno a margin ken padding.
<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>
Dagiti kasisigud a kahon ti tsek ken dagiti radio ket mapasayaat babaen ti tulong ti .form-check
, ti maymaysa a klase para kadagiti agpada a kita ti panagserrek a mangpasayaat ti layout ken kababalin dagiti elementoda ti HTML . Dagiti kahon ti tsek ket para iti panagpili iti maysa wenno sumagmamano a pagpilian iti maysa a listaan, idinto ta dagiti radio ket para iti panagpili iti maysa a pagpilian manipud iti adu.
Dagiti baldado a kahon ti tsek ken dagiti radio ket nasuportaran, ngem tapno mangipaay ti not-allowed
kursor iti hover ti nagannak <label>
, kasapulam nga inayon ti disabled
attribute iti .form-check-input
. Ti baldado a kababalin ket mangyaplikar ti nalaglag-an a kolor tapno makatulong a mangipakita ti kasasaad ti input.
Dagiti kahon ti tsek ken dagiti panagusar kadagiti radio ket naibangon tapno mangsuporta ti HTML-a naibatay a panangipaneknek ti porma ken mangipaay kadagiti ababa, madanon nga etiketa. Kas kasta, dagiti <input>
s ken <label>
stayo ket agkakabsat nga elemento a maikontra iti maysa iti <input>
uneg ti maysa <label>
. Daytoy ket bassit nga ad-adu a berboso a kas masapul nga ikeddengmo id
ken for
dagiti attribute tapno mainaig ti <input>
ken <label>
.
Babaen ti default, aniaman a bilang dagiti kahon ti tsek ken radio a dagus a kabsat ket bertikal a maitumpok ken maitutop nga espasyo iti .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>
Grupoen dagiti kahon ti tsek wenno dagiti radio iti isu met laeng a horisontal a hilera babaen ti pananginayon .form-check-inline
iti ania man .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>
Inayon .position-static
kadagiti input iti uneg .form-check
nga awan ti aniaman a teksto ti etiketa. Laglagipem nga ipaay pay laeng ti sumagmamano a porma ti etiketa para kadagiti makatulong a teknolohia (kas pagarigan, panagusar 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>
Gapu ta ti Bootstrap ket agaplikar display: block
ken width: 100%
kadagiti gangani amin a kontrol ti pormatayo, dagiti porma ket babaen ti default ket agtumpok a bertikal. Mabalin nga usaren dagiti kanayonan a klase a mangbalbaliw iti daytoy a layout iti tunggal porma a batayan.
Ti .form-group
klase ti kalalakaan a wagas a mangnayon iti sumagmamano nga estruktura kadagiti porma. Daytoy ket mangipaay ti nalaka a maibagay a klase a mangparegta ti umno a panaggrupo kadagiti etiketa, dagiti kontrol, opsional a teksto ti tulong, ken panagmensahe ti panangipaneknek ti porma. Babaen ti kasisigud daytoy ket agaplikar laeng margin-bottom
, ngem daytoy ket mangala kadagiti kanayonan nga estilo iti .form-inline
kas kasapulan. Usaren dayta iti <fieldset>
s, <div>
s, wenno dandani aniaman a sabali nga elemento.
<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>
Mabalin a maibangon dagiti ad-adu a komplikado a porma babaen ti panangusar kadagiti klasetayo iti grid. Usaren dagitoy para kadagiti layout ti porma a kasapulan ti adu a kolum, nadumaduma a kalawa, ken dagiti kanayonan a pagpilian ti panagtunos.
<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>
Mabalinmo pay ti agsinnukat .row
para iti .form-row
, ti maysa a panagbalbaliw ti pagalagadan a grid rowmi a mangbalbaliw kadagiti default a kanal ti adigi para kadagiti naing-inget ken ad-adu a kompakto a layout.
<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>
Dagiti ad-adu a komplikado a layout ket mabalin pay a mapartuat babaen ti sistema ti grid.
<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>
Mangpartuat kadagiti horisontal a porma babaen ti grid babaen ti pananginayon ti .row
klase kadagiti grupo ti panagporma ken panagusar kadagiti .col-*-*
klase tapno mangibaga ti kalawa dagiti etiketa ken dagiti kontrolmo. Siguraduen nga inayon .col-form-label
ti <label>
s mo pay tapno bertikal a naisentro dagitoy kadagiti nainaig a kontrol ti pormada.
No dadduma, mabalin a kasapulam ti agusar kadagiti margin wenno padding utilities tapno makaaramidka iti dayta perpekto a panagtunos a kasapulam. Kas pagarigan, inikkatmi ti padding-top
iti naurnong nga etiketa ti radio inputs-mi tapno nasaysayaat ti pannakaitunos ti batayan ti teksto.
<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>
Siguraduenyo nga usaren .col-form-label-sm
wenno .col-form-label-lg
iti <label>
s wenno <legend>
s-yo tapno umiso a masurot ti kadakkel ti .form-control-lg
ken .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>
Kas naipakita kadagiti napalabas a pagarigan, ti sistemami a grid ket mangipalubos kenka a mangikabil ti ania man a bilang ti .col
s iti uneg ti maysa .row
wenno .form-row
. Biningayda ti magun-odan a kalawa a padapada iti nagbaetan dagitoy. Mabalinmo pay ti agpili ti subgrupo dagiti kolummo tapno mangala ti ad-adu wenno basbassit nga espasio, bayat a dagiti nabati .col
nga s ket agpapada a mangbingay kadagiti nabati, nga addaan kadagiti espesipiko a klase ti adigi a kas ti .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>
Ti pagarigan iti baba ket agus-usar ti flexbox a utilidad tapno bertikal a mangisentro kadagiti linaon ken agbaliw .col
tapno .col-auto
dagiti adigimo ket mangala laeng ti adu nga espasio a kas kasapulan. Iti sabali a pannao, ti kolum ket agdakkel ti bagina maibatay kadagiti linaonna.
<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>
Kalpasanna mabalinmo nga i-remix manen dayta kadagiti klase ti kolum a naisangsangayan iti kadakkel.
<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>
Ket siempre dagiti custom form controls ket nasuportaran.
<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>
Usaren ti .form-inline
klase tapno maipakita ti serye dagiti etiketa, kontrol ti porma, ken buton iti maymaysa a horizontal a hilera. Dagiti kontrol ti porma iti uneg dagiti inline a porma ket agdumaduma bassit manipud kadagiti default nga estadoda.
- Dagiti kontrol ket
display: flex
, a mangrakrak ti ania man nga HTML a puraw nga espasio ken mangipalubos kenka a mangipaay ti panagtengngel ti panagtunos kadagiti utilidad ti panagsisina ken flexbox . - Dagiti kontrol ken dagiti grupo ti panagserrek ket umawat
width: auto
tapno mangbalbaliw ti kasisigud ti Bootstrapwidth: 100%
. - Dagiti kontrol ket agparang laeng iti inline kadagiti viewport a saan a basbassit ngem 576px ti kalawana tapno mangibaga kadagiti akikid a viewport kadagiti mobile nga alikamen.
Mabalin a kasapulam a manual a tamingen ti kalawa ken panagtunos dagiti indibidual a kontrol ti porma kadagiti utilidad ti panagsisina (kas naipakita iti baba). Kamaudiananna, siguraduem a kanayon nga iraman ti maysa <label>
nga addaan iti tunggal porma a panangkontrol, uray no kasapulam nga ilemmeng dayta manipud kadagiti saan nga screenreader a bisita nga addaan iti .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>
Dagiti kostumbre a kontrol ti porma ken dagiti panagpili ket nasuportaran pay.
<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>
Alternatibo kadagiti nailemmeng nga etiketa
Dagiti makatulong a teknolohia a kas kadagiti screen reader ket marigatanda kadagiti pormam no saanmo nga iraman ti etiketa para iti tunggal input. Para kadagitoy nga inline a porma, mabalinmo nga ilemmeng dagiti etiketa babaen ti panagusar ti .sr-only
klase. Adda dagiti kanayonan nga alternatibo a pamay-an ti panangipaay ti etiketa para kadagiti makatulong a teknolohia, a kas ti aria-label
, aria-labelledby
wenno title
attribute. No awan kadagitoy ti adda, dagiti makatulong a teknolohia ket mabalinda nga agpatulong iti panagusar ti placeholder
attribute, no adda, ngem laglagipen a ti panagusar ti placeholder
kas kasukat dagiti sabali a pamay-an ti panagmarka ket saan a maibalakad.
Ti teksto ti tulong iti lebel ti bloke kadagiti porma ket mabalin a maparsua babaen ti panagusar .form-text
(dati nga ammo a kas .help-block
iti v3). Ti teksto ti tulong iti inline ket mabalin a nalaka a maipatungpal babaen ti panagusar ti ania man nga elemento ti HTML nga inline ken dagiti klase ti utilidad a kas ti .text-muted
.
Pananginaig ti teksto ti tulong kadagiti kontrol ti porma
Ti teksto ti tulong ket rumbeng a nalawag a nainaig iti panagtengngel ti porma a mainaig daytoy iti panagusar ti aria-describedby
attribute. Daytoy ti mangsigurado a dagiti makatulong a teknolohia—kas kadagiti screen reader—ti mangipakaammo iti daytoy a teksto ti tulong no ti agus-usar ket agpokus wenno sumrek iti kontrol.
Ti teksto ti tulong iti baba dagiti input ket mabalin nga estilo babaen ti .form-text
. Daytoy a klase ket mangiraman display: block
ken manginayon ti sumagmamano a kangatuan a margin para iti nalaka a panagsisina manipud kadagiti input iti ngato.
<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>
Ti teksto iti uneg ti linia ket mabalinna nga usaren ti ania man a gagangay nga elemento ti HTML iti uneg ti linia (maysa man a <small>
, <span>
, wenno sabali pay) nga awan ti sabali no di ti klase ti utilidad.
<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>
Inayon ti disabled
boolean a kababalin iti maysa nga input tapno malapdan dagiti panagtitinnulong ti agar-aramat ken mangaramid daytoy a kasla nalaglag-an.
Inayon ti disabled
attribute iti a <fieldset>
tapno mapasardeng amin dagiti kontrol iti uneg.
<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>
Pakdaar nga addaan kadagiti angkla
Babaen ti kasisigud, dagiti browser ket tratuendanto amin dagiti katutubo a kontrol ti porma ( <input>
, <select>
ken <button>
dagiti elemento) iti uneg ti a a <fieldset disabled>
kas baldado, a manglapped ti agpada a panagtitinnulong ti teklado ken mouse kadagitoy. Nupay kasta, no ti pormam ket mangiraman pay kadagiti <a ... class="btn btn-*">
elemento, dagitoy ket maited laeng ti estilo ti pointer-events: none
. Kas naibagbaga iti benneg maipapan ti baldado nga estado para kadagiti buton (ken espesipiko iti sub-seksion para kadagiti elemento ti angkla), daytoy a tagikua ti CSS ket saan pay a naistandard ken saan a naan-anay a nasuportaran iti Opera 18 ken iti baba, wenno iti Internet Explorer 10, ken nangabak 't lapdan dagiti agar-aramat ti teklado manipud iti pannakabalinda a mangipamaysa wenno mangpaaktibo kadagitoy a silpo. Isu a tapno natalgedka, agusarka iti custom a JavaScript tapno mapasardeng dagiti kasta a link.
Panagtunos ti krus-browser
Bayat nga iyaplikar ti Bootstrap dagitoy nga estilo kadagiti amin a browser, ti Internet Explorer 11 ken iti baba ket saan a naan-anay a mangsuporta ti disabled
attribute iti maysa a <fieldset>
. Usaren ti kostumbre a JavaScript tapno mapasardeng ti fieldset kadagitoy a browser.
Mangted ti napateg, maaramid a feedback kadagiti agar-aramatmo babaen ti panangipaneknek ti porma ti HTML5– a magun-od kadagiti amin a nasuportaran a browsermi . Pilien manipud iti browser a default a panagipaneknek a feedback, wenno ipatungpal dagiti kostumbre a mensahe babaen dagiti naibangon a klasemi ken pangrugian a JavaScript.
Irekomendarmi unay dagiti kostumbre nga estilo ti panangipaneknek a kas dagiti katutubo a default ti browser ket saan a maipakaammo kadagiti agbasbasa iti iskrin.
Kastoy ti panagandar ti panangipaneknek ti porma iti Bootstrap:
- Ti panangipaneknek ti porma ti HTML ket maipakat babaen ti dua a pseudo-klase ti CSS,
:invalid
ken:valid
. Agaplikar dayta kadagiti<input>
,<select>
, ken<textarea>
dagiti elemento. - Ti Bootstrap
:invalid
ket mangsaklaw kadagiti estilo ti ken iti klase:valid
ti nagannak.was-validated
, a kadawyan a maipakat iti<form>
. No saan, ti ania man a kasapulan a tay-ak nga awan ti pateg ket agparang a kas saan nga umiso iti panagkarga ti panid. Iti daytoy a wagas, mabalinmo a pilien no kaano nga aktiboen dagitoy (kadawyan kalpasan a mapadas ti panagipatulod ti porma). - Kas maysa a fallback,
.is-invalid
ken.is-valid
dagiti klase ket mabalin a mausar imbes a dagiti pseudo-klase para iti panangipaneknek ti sikigan ti serbidor . Saanda a kasapulan ti.was-validated
klase dagiti nagannak. - Gapu kadagiti pannakalapped no kasano ti panagtrabaho ti CSS, saanmi a mabalin (iti agdama) nga iyaplikar dagiti estilo iti maysa
<label>
nga umay sakbay ti maysa a panagtengngel ti porma iti DOM no awan ti tulong ti kostumbre a JavaScript. - Amin a moderno a browser ket mangsuporta ti API ti panangipaneknek ti limitasion , ti serye dagiti pamay-an ti JavaScript para iti panangipaneknek kadagiti kontrol ti porma.
- Dagiti mensahe ti feedback ket mabalin nga agusar kadagiti default ti browser (naiduma para iti tunggal maysa a browser, ken saan nga estilo babaen ti CSS) wenno dagiti kostumbre nga estilo ti feedbackmi nga addaan kadagiti kanayonan nga HTML ken CSS.
- Mabalinmo ti mangipaay kadagiti kostumbre a mensahe ti kinapudno nga addaan
setCustomValidity
iti JavaScript.
Iti dayta a panunot, ibilang dagiti sumaganad a demo para kadagiti estilo ti panangipaneknekmi iti kostumbre a porma, dagiti opsional a klase ti sikigan ti server, ken dagiti default ti browser.
Para kadagiti kostumbre a mensahe ti panangipaneknek ti porma ti Bootstrap, kasapulam nga inayon ti novalidate
boolean a kababalin iti <form>
. Daytoy ket mangbaldado kadagiti default a toltip ti feedback ti browser, ngem mangipaay pay laeng ti panagserrek kadagiti API ti panangipaneknek ti porma iti JavaScript. Padasem nga isubmit ti porma iti baba; ti JavaScript-mi ket mang-intercept iti submit button ken mangi-relay iti feedback kenka.
No padasem ti mangisubmitir, makitam dagiti :invalid
ken :valid
estilo a naipakat kadagiti kontrol ti pormam.
<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>
Saan kadi nga interesado kadagiti mensahe ti feedback ti kostumbre a panangipaneknek wenno panagsurat ti JavaScript tapno agbaliw kadagiti kababalin ti porma? Amin a nasayaat, mabalinmo nga usaren dagiti default ti browser. Padasem nga isubmite ti porma iti baba. Depende iti browser ken OS-mo, makitam ti naiduma bassit nga estilo ti feedback.
Bayat a dagitoy nga estilo ti feedback ket saan a mabalin nga estilo babaen ti CSS, mabalinmo pay laeng nga ipasayaat ti teksto ti feedback babaen ti 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>
Irekomendarmi ti panagusar ti panangipaneknek ti sikigan ti kliyente, ngem no kas pagarigan kasapulam ti sikigan ti serbidor, mabalinmo nga ipakita dagiti saan nga umiso ken balido a tay-ak ti porma babaen ti .is-invalid
ken .is-valid
. Paliiwenyo a .invalid-feedback
nasuportaran met kadagitoy a klase.
<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>
Dagiti pagarigan a pormami ket mangipakita kadagiti katutubo a tekstual <input>
s iti ngato, ngem dagiti estilo ti panangipaneknek ti porma ket magun-od para kadagiti kostumbre a kontrolmi a porma, met.
<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>
No ti layout ti pormam ket mangipalubos iti daytoy, mabalinmo nga isukat dagiti .{valid|invalid}-feedback
klase para kadagiti .{valid|invalid}-tooltip
klase tapno mangipakita ti sungbat ti panangipaneknek iti maysa nga estilo a tooltip. Siguraduenyo nga adda nagannak nga addaan position: relative
iti dayta para iti tooltip positioning. Iti pagarigan iti baba, dagiti klase ti kolummi ket addaanen iti daytoy a dati, ngem ti proyektom ket mabalin a kasapulan ti alternatibo a panagisaad.
<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>
Para iti ad-adu pay a panagpasayaat ken panagpapada ti krus ti browser, usaren dagiti naan-anay a kostumbre nga elemento ti pormami tapno masukatan dagiti default ti browser. Dagitoy ket naibangon iti rabaw ti semantiko ken makastrek a marka, isu a dagitoy ket solido a kasukat para iti ania man a default a panagtengngel ti porma.
Tunggal checkbox ken radio ket nabalkot iti a nga <div>
addaan iti kabsat <span>
tapno makaaramid iti custom control-tayo ken a <label>
para iti naipakuyog a teksto. Iti estruktura, daytoy ket isu met laeng a pamay-an a kas ti default-tayo .form-check
.
Usarenmi ti sibling selector ( ~
) para kadagiti amin nga <input>
estadomi—kas iti :checked
—tapno umno nga estilo ti custom form indicator-mi. No maitipon iti .custom-control-label
klase, mabalintayo met nga estilo ti teksto para iti tunggal banag a naibatay iti <input>
kasasaad ti 's.
Ilemmengmi ti default <input>
babaen opacity
ken usarenmi ti .custom-control-label
tapno mangbangon ti baro a kostumbre a mangipakita ti porma iti lugarna babaen ti ::before
ken ::after
. Daksanggasat ta saantayo a makaaramid iti kostumbre manipud iti laeng gapu ta saan nga agtrabaho dagiti <input>
CSS iti dayta nga elemento.content
Kadagiti nasukimaten nga estado, agus-usarkami kadagiti base64 a naikabil nga SVG nga ikono manipud iti Open Iconic . Daytoy ket mangipaay kadatayo ti kasayaatan a panangtengngel para iti estilo ken panagposision iti ballasiw dagiti browser ken alikamen.
<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>
Dagiti kostumbre a kahon ti tsek ket mabalinda pay nga usaren ti :indeterminate
pseudo a klase no manual a naikeddeng babaen ti JavaScript (awan ti magun-od a kababalin ti HTML para iti panangidatag iti daytoy).
No agus-usar ka ti jQuery, umdasen koma ti maysa a banag a kas iti daytoy:
<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>
Mabalin met a balbaliwan dagiti custom checkbox ken radio. Inayon ti disabled
boolean a kababalin iti <input>
ken ti kostumbre a mangipakita ken ti deskripsion ti etiketa ket automatiko nga estilo.
<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>
Dagiti kostumbre <select>
a menu ket kasapulan laeng ti kostumbre a klase, .custom-select
tapno mangtignay kadagiti kostumbre nga estilo.
<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>
Mabalinmo pay ti agpili manipud kadagiti babassit ken dadakkel a kostumbre a panagpili tapno maipada kadagiti kapada ti kadakkelna a teksto nga inputmi.
<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>
Ti multiple
attribute ket nasuportaran pay:
<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>
Kas iti size
attribute:
<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>
Ti panagserrek ti papeles ket isu ti kaaduan a gnarly ti bunggoy ken kasapulan ti kanayonan a JavaScript no kayatmo nga ikabit dagitoy iti agtigtignay a Pilien ti papeles... ken napili a teksto ti nagan ti papeles.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Ilemmengmi ti default a file <input>
babaen opacity
ken imbes ketdi estilo ti <label>
. Ti buton ket napataud ken naiposision babaen ti ::after
. Maudi, ideklarami ti maysa width
ken height
iti <input>
para iti umno nga espasyo para iti aglawlaw a linaon.
Mausar ti :lang()
pseudo-class tapno maipalubos ti pannakaipatarus ti teksto a “Browse” iti dadduma a pagsasao. Ibabawi wenno inayon dagiti panagserrek iti $custom-file-text
variable ti Sass babaen ti mainaig nga etiketa ti pagsasao ken dagiti lokalisado a kuerdas. Mabalin a ma-customize dagiti Ingles a kuerdas iti isu met laeng a wagas. Kas pagarigan, ditoy no kasano a ti maysa ket mabalinna a manginayon ti maysa nga Espaniol a patarus (ti kodigo ti pagsasao ti Espaniol ket es
):
Adda lang(es)
ditoy nga agtigtignay iti kostumbre a file input para iti maysa nga Espaniol a patarus:
<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>
Masapul nga ikeddengmo nga umiso ti pagsasao ti dokumentom (wenno subtree dayta) tapno maipakita ti umno a teksto. Daytoy ket mabalin nga aramiden babaen ti panagusar ti lang
attribute iti <html>
elemento wenno ti Content-Language
HTTP nga ulo , kadagiti dadduma pay a pamay-an.