Formulir
Conto lan pedoman panggunaan kanggo gaya kontrol formulir, opsi tata letak, lan komponen khusus kanggo nggawe macem-macem formulir.
Ringkesan
Kontrol formulir Bootstrap nggedhekake gaya formulir Reboot karo kelas. Gunakake kelas kasebut kanggo milih tampilan sing disesuaikan kanggo rendering sing luwih konsisten ing browser lan piranti.
Pesthekake nggunakake type
atribut sing cocog ing kabeh input (contone, email
kanggo alamat email utawa number
informasi numerik) kanggo njupuk kauntungan saka kontrol input sing luwih anyar kayata verifikasi email, pilihan nomer, lan liya-liyane.
Punika conto cepet kanggo nduduhake gaya formulir Bootstrap. Terus maca kanggo dokumentasi babagan kelas sing dibutuhake, tata letak formulir, lan liya-liyane.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Kontrol formulir
Kontrol wangun tekstual-kaya <input>
s, <select>
s, lan <textarea>
s-ditata karo .form-control
kelas. Kalebu gaya kanggo tampilan umum, status fokus, ukuran, lan liya-liyane.
Aja manawa kanggo njelajah wangun adat kita kanggo gaya luwih <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>
Kanggo input file, ganti .form-control
menyang .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>
ukuran
Setel dhuwur nggunakake kelas kaya .form-control-lg
lan .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>
Namung diwaca
Tambah readonly
atribut boolean ing input kanggo nyegah modifikasi nilai input. Input mung diwaca katon luwih entheng (kaya input sing dipateni), nanging tetep kursor standar.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Waca teks biasa
Yen sampeyan pengin duwe <input readonly>
unsur ing wangun gaya minangka teks kosong, gunakake .form-control-plaintext
kelas kanggo mbusak gaya lapangan formulir standar lan ngreksa wates lan padding sing bener.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Input Range
Setel input kisaran sing bisa digulung kanthi horisontal nggunakake .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Kothak lan radio
Kothak lan radio standar ditambahake kanthi bantuan .form-check
, kelas siji kanggo loro jinis input sing nambah tata letak lan prilaku unsur HTML . Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar, dene radio kanggo milih siji opsi saka akeh.
kothak centhang lan radio dipatèni didhukung. Atribut disabled
kasebut bakal ngetrapake warna sing luwih entheng kanggo nuduhake status input.
Kotak centhang lan tombol radio ndhukung validasi formulir adhedhasar HTML lan menehi label sing ringkes lan bisa diakses. Dadi, <input>
s lan <label>
s kita minangka unsur sedulur minangka lawan saka <input>
ing a <label>
. Iki rada luwih verbose amarga sampeyan kudu nemtokake id
lan for
atribut kanggo nggandhengake <input>
lan <label>
.
Default (ditumpuk)
Kanthi gawan, sawetara kothak centhang lan radio sing dadi sedulur langsung bakal ditumpuk vertikal lan diwenehi jarak kanthi .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Inline
Klompok kothak centhang utawa radio ing baris horisontal sing padha kanthi nambahake .form-check-inline
..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>
Tanpa label
Tambah .position-static
menyang input .form-check
sing ora ana teks label. Elinga yen isih menehi sawetara wangun jeneng sing bisa diakses kanggo teknologi pitulung (contone, nggunakake 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>
Tata letak
Wiwit Bootstrap ditrapake display: block
lan width: 100%
meh kabeh kontrol formulir, formulir bakal ditumpuk kanthi vertikal. Kelas tambahan bisa digunakake kanggo macem-macem tata letak iki ing basis saben wangun.
Nggawe kelompok
Kelas .form-group
minangka cara paling gampang kanggo nambah sawetara struktur menyang formulir. Iki nyedhiyakake kelas fleksibel sing nyengkuyung klompok label, kontrol, teks pitulung opsional, lan olahpesen validasi formulir. Kanthi gawan, iku mung ditrapake margin-bottom
, nanging njupuk gaya tambahan yen .form-inline
perlu. Gunakake karo <fieldset>
s, <div>
s, utawa meh wae unsur liyane.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
Bentuk kothak
Wangun sing luwih rumit bisa dibangun kanthi nggunakake kelas kothak. Gunakake iki kanggo tata letak formulir sing mbutuhake pirang-pirang kolom, jembar sing beda-beda, lan opsi keselarasan tambahan.
<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>
Formulir baris
Sampeyan uga bisa ngganti .row
kanggo .form-row
, variasi saka baris kothak standar kita sing overrides talang kolom standar kanggo noto tighter lan luwih kompak.
<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>
Tata letak sing luwih rumit uga bisa digawe nganggo sistem kothak.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Bentuk horisontal
Nggawe formulir horisontal kanthi kothak kanthi nambahake .row
kelas kanggo mbentuk grup lan nggunakake .col-*-*
kelas kanggo nemtokake jembar label lan kontrol sampeyan. Pesthekake kanggo nambah .col-form-label
menyang <label>
s uga supaya lagi vertikal tengah karo kontrol wangun gadhah sing.
Kadhangkala, sampeyan bisa uga kudu nggunakake utilitas margin utawa padding kanggo nggawe keselarasan sampurna sing sampeyan butuhake. Contone, kita wis mbusak padding-top
label input radio sing ditumpuk kanggo luwih nyelarasake garis dasar teks.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Ukuran label formulir horisontal
Dadi manawa kanggo nggunakake .col-form-label-sm
utawa .col-form-label-lg
kanggo <label>
s utawa <legend>
s kanggo bener tindakake ukuran .form-control-lg
lan .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>
Ukuran kolom
Kaya sing dituduhake ing conto sadurunge, sistem kothak ngidini sampeyan nyelehake nomer .col
s ing a .row
utawa .form-row
. Padha bakal pamisah jembaré kasedhiya merata antarane wong-wong mau. Sampeyan uga bisa milih subset saka kolom kanggo njupuk luwih utawa kurang spasi, dene .col
s isih padha pamisah liyane, karo kelas kolom tartamtu kaya .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>
Ukuran otomatis
Conto ing ngisor iki nggunakake utilitas flexbox kanggo vertikal tengah isi lan owah-owahan .col
supaya .col-auto
kolom sampeyan mung njupuk akeh spasi yen perlu. Kanthi cara liya, ukuran kolom kasebut dhewe adhedhasar isi.
<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>
Sampeyan banjur bisa nyampur maneh karo kelas kolom khusus ukuran.
<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>
Lan mesthi kontrol wangun adat didhukung.
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Formulir inline
Gunakake .form-inline
kelas kanggo nampilake seri label, kontrol formulir, lan tombol ing baris horisontal siji. Kontrol formulir ing formulir inline rada beda karo status standar.
- Kontrol yaiku
display: flex
, ngrusak spasi putih HTML lan ngidini sampeyan nyedhiyakake kontrol keselarasan karo keperluan spasi lan flexbox . - Kontrol lan grup input nampa
width: auto
kanggo ngganti standar Bootstrapwidth: 100%
. - Kontrol mung katon inline ing viewport sing ambane paling sethithik 576px kanggo akun viewports sing sempit ing piranti seluler.
Sampeyan bisa uga kudu kanthi manual alamat jembaré lan Alignment saka kontrol wangun individu karo keperluan spasi (minangka kapacak ing ngisor iki). Pungkasan, manawa sampeyan tansah nyakup a <label>
karo saben kontrol formulir, sanajan sampeyan kudu ndhelikake saka pengunjung non-screenreader kanthi .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>
Kontrol lan pilihan formulir khusus uga didhukung.
<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>
Alternatif kanggo label sing didhelikake
Teknologi bantu kayata maca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora nyakup label kanggo saben input. Kanggo formulir inline iki, sampeyan bisa ndhelikake label nggunakake .sr-only
kelas. Ana cara alternatif liyane kanggo nyedhiyakake label kanggo teknologi bantu, kayata aria-label
, aria-labelledby
utawa title
atribut. Yen ora ana siji-sijine, teknologi pitulung bisa nggunakake placeholder
atribut kasebut, yen ana, nanging elinga yen nggunakake placeholder
minangka panggantos kanggo metode label liyane ora disaranake.
Teks bantuan
Teks bantuan tingkat blok ing formulir bisa digawe nggunakake .form-text
(sadurunge dikenal .help-block
ing v3). Teks bantuan inline bisa dileksanakake kanthi fleksibel nggunakake unsur HTML inline lan kelas utilitas kaya .text-muted
.
Nggayutake teks pitulung karo kontrol formulir
Teks pitulung kudu digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedby
atribut kasebut. Iki bakal mesthekake yen teknologi pitulung-kayata layar maca-bakal ngumumake teks bantuan iki nalika pangguna fokus utawa mlebu kontrol.
Teks bantuan ing ngisor iki bisa ditata nganggo .form-text
. Kelas iki kalebu display: block
lan nambah sawetara wates ndhuwur kanggo gampang spasi saka input ndhuwur.
<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>
Teks inline bisa nggunakake unsur HTML inline sing khas (kaya <small>
, <span>
, utawa liya-liyane) kanthi ora luwih saka kelas sarana.
<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>
Formulir sing dipatèni
Tambah disabled
atribut boolean ing input kanggo nyegah interaksi pangguna lan nggawe katon luwih entheng.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tambah disabled
atribut menyang a <fieldset>
mateni kabeh kontrol ing.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat karo jangkar
Browser nganggep kabeh kontrol wangun asli ( <input>
, <select>
, lan <button>
unsur) ing njero <fieldset disabled>
minangka dipatèni, nyegah interaksi keyboard lan mouse.
Nanging, yen formulir sampeyan uga kalebu unsur kaya tombol khusus kayata <a ... class="btn btn-*">
, iki mung bakal diwenehi gaya pointer-events: none
. Kaya sing kacathet ing bagean babagan status cacat kanggo tombol (lan khusus ing sub-bagean kanggo unsur jangkar), properti CSS iki durung standar lan durung didhukung kanthi lengkap ing Internet Explorer 10. Kontrol adhedhasar jangkar uga isih ana. fokus lan bisa digunakake nggunakake keyboard. Sampeyan kudu ngowahi kontrol kasebut kanthi manual kanthi nambahake tabindex="-1"
kanggo nyegah supaya ora fokus lan aria-disabled="disabled"
menehi tandha marang teknologi bantuan.
Kompatibilitas lintas-browser
Nalika Bootstrap bakal ngetrapake gaya kasebut ing kabeh browser, Internet Explorer 11 lan ing ngisor iki ora ndhukung disabled
atribut kasebut kanthi lengkap <fieldset>
. Gunakake JavaScript khusus kanggo mateni set lapangan ing browser kasebut.
Validasi
Nyedhiyakake umpan balik sing migunani lan bisa ditindakake kanggo pangguna kanthi validasi formulir HTML5– kasedhiya ing kabeh browser sing didhukung . Pilih saka umpan balik validasi standar browser, utawa laksanakake pesen khusus karo kelas sing dibangun lan JavaScript wiwitan.
Cara kerjane
Mangkene carane validasi formulir bisa digunakake karo Bootstrap:
- Validasi formulir HTML ditrapake liwat rong kelas pseudo CSS,
:invalid
lan:valid
. Iku ditrapake kanggo<input>
,<select>
, lan<textarea>
unsur. - Bootstrap nyakup gaya
:invalid
lan gaya menyang kelas:valid
induk , biasane ditrapake ing . Yen ora, kolom sing dibutuhake tanpa nilai bakal katon ora sah nalika mbukak kaca. Kanthi cara iki, sampeyan bisa milih kapan arep ngaktifake (biasane sawise pengajuan formulir dicoba)..was-validated
<form>
- Kanggo ngreset tampilan formulir (contone, ing kasus kiriman formulir dinamis nggunakake AJAX), mbusak
.was-validated
kelas saka<form>
maneh sawise pengajuan. - Minangka fallback,
.is-invalid
lan.is-valid
kelas bisa digunakake tinimbang pseudo-kelas kanggo validasi sisih server . Dheweke ora mbutuhake.was-validated
kelas wong tuwa. - Amarga alangan babagan cara CSS bisa digunakake, kita ora bisa (saiki) ngetrapake gaya menyang a
<label>
sing sadurunge kontrol formulir ing DOM tanpa bantuan JavaScript khusus. - Kabeh browser modern ndhukung API validasi kendala , seri metode JavaScript kanggo validasi kontrol formulir.
- Pesen umpan balik bisa uga nggunakake standar browser (beda kanggo saben browser, lan ora bisa diatur liwat CSS) utawa gaya umpan balik khusus kita kanthi HTML lan CSS tambahan.
- Sampeyan bisa menehi pesen validitas khusus
setCustomValidity
ing JavaScript.
Kanthi atine, nimbang demo ing ngisor iki kanggo gaya validasi formulir khusus, kelas sisih server opsional, lan standar browser.
Gaya khusus
Kanggo pesen validasi formulir Bootstrap khusus, sampeyan kudu nambah novalidate
atribut boolean menyang <form>
. Iki mateni tooltip umpan balik standar browser, nanging isih menehi akses menyang API validasi formulir ing JavaScript. Coba kirim formulir ing ngisor iki; JavaScript kita bakal nyegat tombol kirim lan ngirim umpan balik kanggo sampeyan. Nalika nyoba ngirim, sampeyan bakal weruh :invalid
lan :valid
gaya sing ditrapake kanggo kontrol formulir.
Gaya umpan balik khusus ngetrapake warna, wates, gaya fokus, lan lambang latar mburi khusus kanggo menehi umpan balik sing luwih apik. Lambang latar mburi kanggo <select>
s mung kasedhiya karo .custom-select
, lan ora .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Default browser
Ora kasengsem ing pesen umpan balik validasi khusus utawa nulis JavaScript kanggo ngganti prilaku formulir? Kabeh apik, sampeyan bisa nggunakake standar browser. Coba kirim formulir ing ngisor iki. Gumantung ing browser lan OS sampeyan, sampeyan bakal weruh gaya umpan balik sing rada beda.
Nalika gaya umpan balik iki ora bisa ditata nganggo CSS, sampeyan isih bisa ngatur teks umpan balik liwat JavaScript.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Sisih server
Disaranake nggunakake validasi sisih klien, nanging yen sampeyan mbutuhake validasi sisih server, sampeyan bisa nunjukake kolom formulir sing ora bener lan bener karo .is-invalid
lan .is-valid
. Elinga yen .invalid-feedback
uga didhukung karo kelas kasebut.
Kanggo kolom sing ora bener, priksa manawa pesen umpan balik/kesalahan sing ora bener digandhengake karo kolom formulir sing cocog nggunakake aria-describedby
. Atribut iki ngidini luwih saka siji id
bisa dirujuk, yen kolom kasebut wis nuduhake teks formulir tambahan.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Unsur sing didhukung
Gaya validasi kasedhiya kanggo kontrol lan komponen formulir ing ngisor iki:
<input>
s lan<textarea>
s karo.form-control
<select>
s karo.form-control
utawa.custom-select
.form-check
s.custom-checkbox
s lan.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Tooltips
Yen tata letak formulir sampeyan ngidini, sampeyan bisa ngganti .{valid|invalid}-feedback
kelas kanggo .{valid|invalid}-tooltip
kelas kanggo nampilake umpan balik validasi ing tooltip gaya. Priksa manawa sampeyan duwe wong tuwa position: relative
sing ana kanggo posisi tooltip. Ing conto ing ngisor iki, kelas kolom kita wis duwe, nanging proyek sampeyan mbutuhake persiyapan alternatif.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Ngatur
Negara validasi bisa disesuaikan liwat Sass nganggo $form-validation-states
peta. Dumunung ing _variables.scss
file kita, peta Sass iki diubengi kanggo ngasilake status standar valid
/ invalid
validasi. Kalebu peta nested kanggo ngatur warna lan lambang saben negara. Nalika ora ana negara liya sing didhukung dening browser, sing nggunakake gaya khusus bisa kanthi gampang nambah umpan balik formulir sing luwih rumit.
Wigati dimangerteni manawa kita ora nyaranake nyetel nilai kasebut tanpa ngowahi form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
Validasi klompok input
Kanggo ndeteksi unsur apa perlu sudhut dibunderaké nang grup input karo validasi, klompok input mbutuhake .has-validation
kelas tambahan.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
Wangun khusus
Kanggo kustomisasi lan konsistensi browser sing luwih akeh, gunakake unsur formulir khusus kanggo ngganti standar browser. Dibangun ing ndhuwur markup semantik lan bisa diakses, dadi panggantos sing kuat kanggo kontrol formulir standar.
Kothak lan radio
Saben kothak centhang lan radio <input>
lan <label>
pasangan wis kebungkus ing <div>
kanggo nggawe kontrol adat kita. Secara struktural, iki minangka pendekatan sing padha karo standar kita .form-check
.
Kita nggunakake pamilih sedulur ( ~
) kanggo kabeh <input>
negara kita - kaya - kanggo :checked
gaya indikator formulir khusus kita. Nalika digabungake karo .custom-control-label
kelas, kita uga bisa gaya teks kanggo saben item adhedhasar <input>
's negara.
Kita ndhelikake standar <input>
karo opacity
lan nggunakake .custom-control-label
kanggo mbangun Indikator wangun adat anyar ing panggonan karo ::before
lan ::after
. Sayange, kita ora bisa mbangun adat saka mung <input>
amarga CSS content
ora bisa digunakake ing unsur kasebut.
Ing negara sing wis dicenthang, kita nggunakake lambang SVG sing ditempelake base64 saka Open Iconic . Iki menehi kontrol paling apik kanggo gaya lan posisi ing browser lan piranti.
kothak centhang
<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>
Kothak centhang khusus uga bisa nggunakake :indeterminate
kelas pseudo nalika disetel kanthi manual liwat JavaScript (ora ana atribut HTML sing kasedhiya kanggo nemtokake).
Yen sampeyan nggunakake jQuery, kaya iki kudu cukup:
$('.your-checkbox').prop('indeterminate', true)
Radios
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
Inline
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
dipatèni
Kothak lan radio khusus uga bisa dipateni. Tambah disabled
atribut boolean menyang <input>
lan indikator khusus lan deskripsi label bakal ditata kanthi otomatis.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Ngalih
Saklar nduweni tandha kothak centhang khusus nanging nggunakake .custom-switch
kelas kasebut kanggo nggawe saklar pilihan. Ngalih uga ndhukung disabled
atribut.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Pilih menu
Menu <select>
khusus mung butuh kelas khusus, .custom-select
kanggo micu gaya khusus. Gaya khusus diwatesi ing <select>
tampilan awal lan ora bisa ngowahi <option>
s amarga watesan browser.
<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>
Sampeyan uga bisa milih saka pilihan khusus cilik lan gedhe kanggo cocog karo input teks ukuran sing padha.
<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>
Atribut multiple
uga didhukung:
<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>
Minangka size
atribut kasebut:
<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>
Range
Gawe <input type="range">
kontrol khusus nganggo .custom-range
. Trek (latar mburi) lan jempol (nilai) loro-lorone ditata supaya katon padha ing browser. Amarga mung IE lan Firefox sing ndhukung "ngisi" trek saka kiwa utawa tengen jempol minangka sarana kanggo nuduhake kemajuan kanthi visual, saiki kita ora ndhukung.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
input Range duwe nilai implisit kanggo min
lan max
- 0
lan 100
, mungguh. Sampeyan bisa nemtokake nilai anyar kanggo sing nggunakake atribut min
lan .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Kanthi gawan, sawetara input "snap" menyang nilai integer. Kanggo ngganti iki, sampeyan bisa nemtokake step
nilai. Ing conto ing ngisor iki, kita pindho jumlah langkah kanthi nggunakake step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
File browser
Input file sing paling gnarly saka Bunch lan mbutuhake JavaScript tambahan yen sampeyan pengin pancing munggah karo fungsi Pilih file… lan milih jeneng file teks.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Kita ndhelikake file standar <input>
liwat opacity
lan tinimbang gaya <label>
. Tombol digawe lan dipanggonke karo ::after
. Pungkasan, kita ngumumake a width
lan height
ing <input>
kanggo spasi sing tepat kanggo isi lingkungan.
Nerjemahake utawa ngatur senar nganggo SCSS
Kelas :lang()
pseudo digunakake kanggo ngidini nerjemahake teks "Browse" menyang basa liya. Ganti utawa tambahake entri menyang $custom-file-text
variabel Sass kanthi tag basa sing cocog lan senar sing dilokalisasi. Senar Inggris bisa disesuaikan kanthi cara sing padha. Contone, iki carane sampeyan bisa nambah terjemahan Spanyol (kode basa Spanyol yaiku es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Mangkene lang(es)
tumindak ing input file khusus kanggo terjemahan Spanyol:
<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>
Sampeyan kudu nyetel basa dokumen sampeyan (utawa subtree) kanthi bener supaya teks sing bener ditampilake. Iki bisa ditindakake kanthi nggunakake atribut lang
ing unsur <html>
utawa Content-Language
header HTTP , ing antarane cara liyane.
Nerjemahake utawa ngatur senar nganggo HTML
Bootstrap uga menehi cara kanggo nerjemahake teks "Browse" ing HTML kanthi data-browse
atribut sing bisa ditambahake menyang label input khusus (umpamane ing basa Walanda):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>