Formulir
Contoh dan panduan penggunaan untuk gaya kontrol formulir, opsi tata letak, dan komponen kustom untuk membuat berbagai macam formulir.
Ringkasan
Kontrol formulir Bootstrap memperluas gaya formulir Reboot kami dengan kelas. Gunakan kelas ini untuk memilih tampilan yang disesuaikan untuk rendering yang lebih konsisten di seluruh browser dan perangkat.
Pastikan untuk menggunakan type
atribut yang sesuai pada semua input (misalnya, email
untuk alamat email atau number
untuk informasi numerik) untuk memanfaatkan kontrol input yang lebih baru seperti verifikasi email, pemilihan nomor, dan banyak lagi.
Berikut adalah contoh cepat untuk mendemonstrasikan gaya formulir Bootstrap. Teruslah membaca untuk dokumentasi tentang kelas yang diperlukan, tata letak formulir, dan banyak lagi.
<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 bentuk tekstual—seperti <input>
s, <select>
s, dan <textarea>
s—digayakan dengan .form-control
kelas. Termasuk adalah gaya untuk penampilan umum, status fokus, ukuran, dan banyak lagi.
Pastikan untuk menjelajahi formulir khusus kami untuk gaya lebih lanjut <select>
.
<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>
Untuk input file, tukar .form-control
untuk .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>
Perekat
Atur ketinggian menggunakan kelas seperti .form-control-lg
dan .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>
Baca saja
Tambahkan readonly
atribut boolean pada input untuk mencegah modifikasi nilai input. Input read-only tampak lebih ringan (seperti input yang dinonaktifkan), tetapi tetap menggunakan kursor standar.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Hanya baca teks biasa
Jika Anda ingin <input readonly>
elemen dalam formulir Anda ditata sebagai teks biasa, gunakan .form-control-plaintext
kelas untuk menghapus gaya bidang formulir default dan mempertahankan margin dan padding yang benar.
<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>
Masukan Rentang
Setel input rentang yang dapat digulir secara horizontal menggunakan .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>
Kotak centang dan radio
Kotak centang dan radio default ditingkatkan dengan bantuan .form-check
, satu kelas untuk kedua jenis input yang meningkatkan tata letak dan perilaku elemen HTML mereka . Kotak centang adalah untuk memilih satu atau beberapa opsi dalam daftar, sedangkan radio untuk memilih satu opsi dari banyak.
Kotak centang dan radio yang dinonaktifkan didukung. Atribut disabled
akan menerapkan warna yang lebih terang untuk membantu menunjukkan status input.
Kotak centang dan tombol radio mendukung validasi formulir berbasis HTML dan memberikan label yang ringkas dan mudah diakses. Dengan demikian, <input>
s dan <label>
s kami adalah elemen saudara yang bertentangan dengan an <input>
di dalam a <label>
. Ini sedikit lebih bertele-tele karena Anda harus menentukan id
dan for
atribut untuk menghubungkan <input>
dan <label>
.
Default (bertumpuk)
Secara default, sejumlah kotak centang dan radio yang merupakan saudara langsung akan ditumpuk secara vertikal dan diberi spasi yang sesuai dengan .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>
Di barisan
Kelompokkan kotak centang atau radio pada baris horizontal yang sama dengan menambahkan .form-check-inline
ke sembarang .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
Tambahkan .position-static
ke input di dalamnya .form-check
yang tidak memiliki teks label. Ingatlah untuk tetap memberikan beberapa bentuk nama yang dapat diakses untuk teknologi bantu (misalnya, menggunakan 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
Karena Bootstrap berlaku display: block
dan width: 100%
untuk hampir semua kontrol formulir kami, formulir secara default akan menumpuk secara vertikal. Kelas tambahan dapat digunakan untuk memvariasikan tata letak ini berdasarkan per-form.
Bentuk grup
Kelas .form-group
adalah cara termudah untuk menambahkan beberapa struktur ke formulir. Ini menyediakan kelas fleksibel yang mendorong pengelompokan label, kontrol, teks bantuan opsional, dan pesan validasi formulir yang tepat. Secara default ini hanya berlaku margin-bottom
, tetapi mengambil gaya tambahan .form-inline
sesuai kebutuhan. Gunakan dengan <fieldset>
s, <div>
s, atau hampir semua elemen lainnya.
<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 kisi-kisi
Bentuk yang lebih kompleks dapat dibangun menggunakan kelas grid kami. Gunakan ini untuk tata letak formulir yang memerlukan beberapa kolom, lebar bervariasi, dan opsi perataan 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>
Baris formulir
.row
Anda juga dapat menukar .form-row
, variasi baris kisi standar kami yang menggantikan talang kolom default untuk tata letak yang lebih rapat dan lebih ringkas.
<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 yang lebih kompleks juga dapat dibuat dengan sistem 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">
</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
Buat formulir horizontal dengan kisi dengan menambahkan .row
kelas untuk membentuk grup dan menggunakan .col-*-*
kelas untuk menentukan lebar label dan kontrol Anda. Pastikan untuk menambahkan s .col-form-label
Anda <label>
juga sehingga mereka dipusatkan secara vertikal dengan kontrol formulir yang terkait.
Terkadang, Anda mungkin perlu menggunakan utilitas margin atau padding untuk membuat keselarasan sempurna yang Anda butuhkan. Misalnya, kami telah menghapus padding-top
label input radio bertumpuk untuk menyelaraskan garis dasar teks dengan lebih baik.
<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 bentuk horizontal
Pastikan untuk menggunakan .col-form-label-sm
atau .col-form-label-lg
ke <label>
s atau <legend>
s Anda untuk mengikuti ukuran .form-control-lg
dan .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
Seperti yang ditunjukkan pada contoh sebelumnya, sistem grid kami memungkinkan Anda untuk menempatkan sejumlah .col
s dalam .row
atau .form-row
. Mereka akan membagi lebar yang tersedia secara merata di antara mereka. Anda juga dapat memilih subset kolom Anda untuk mengambil lebih banyak atau lebih sedikit ruang, sementara sisa .col
s membagi sisanya secara merata, dengan kelas kolom tertentu seperti .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
Contoh di bawah ini menggunakan utilitas flexbox untuk memusatkan konten secara vertikal dan mengubahnya .col
sehingga .col-auto
kolom Anda hanya menggunakan ruang sebanyak yang diperlukan. Dengan kata lain, ukuran kolom itu sendiri berdasarkan isinya.
<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>
Anda kemudian dapat mencampurnya sekali lagi dengan 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>
Dan tentu saja kontrol formulir khusus didukung.
<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 sebaris
Gunakan .form-inline
kelas untuk menampilkan serangkaian label, kontrol formulir, dan tombol pada satu baris horizontal. Kontrol formulir dalam formulir sebaris sedikit berbeda dari status defaultnya.
- Kontrolnya adalah
display: flex
, menciutkan ruang putih HTML apa pun dan memungkinkan Anda memberikan kontrol perataan dengan utilitas spasi dan flexbox . - Kontrol dan grup input menerima
width: auto
untuk mengganti default Bootstrapwidth: 100%
. - Kontrol hanya muncul sebaris di area pandang yang lebarnya minimal 576 piksel untuk memperhitungkan area pandang yang sempit di perangkat seluler.
Anda mungkin perlu menangani lebar dan perataan kontrol formulir individual secara manual dengan utilitas spasi (seperti yang ditunjukkan di bawah). Terakhir, pastikan untuk selalu menyertakan a <label>
dengan setiap kontrol formulir, bahkan jika Anda perlu menyembunyikannya dari pengunjung non-pembaca layar dengan .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 dan pemilihan formulir kustom juga didukung.
<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 untuk label tersembunyi
Teknologi bantu seperti pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk formulir sebaris ini, Anda dapat menyembunyikan label menggunakan .sr-only
kelas. Ada metode alternatif lebih lanjut untuk memberikan label untuk teknologi bantu, seperti aria-label
, aria-labelledby
atau title
atribut. Jika tidak ada yang hadir, teknologi bantu dapat menggunakan placeholder
atribut, jika ada, tetapi perhatikan bahwa penggunaan placeholder
sebagai pengganti metode pelabelan lain tidak disarankan.
teks bantuan
Teks bantuan tingkat blok dalam formulir dapat dibuat menggunakan .form-text
(sebelumnya dikenal sebagai .help-block
di v3). Teks bantuan sebaris dapat diimplementasikan secara fleksibel menggunakan elemen HTML sebaris dan kelas utilitas seperti .text-muted
.
Mengaitkan teks bantuan dengan kontrol formulir
Teks bantuan harus secara eksplisit dikaitkan dengan kontrol formulir yang terkait dengan penggunaan aria-describedby
atribut. Ini akan memastikan bahwa teknologi bantu—seperti pembaca layar—akan mengumumkan teks bantuan ini saat pengguna memfokuskan atau memasuki kontrol.
Teks bantuan di bawah input dapat ditata dengan .form-text
. Kelas ini menyertakan display: block
dan menambahkan beberapa margin atas untuk memudahkan jarak dari input di atas.
<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 sebaris dapat menggunakan elemen HTML sebaris apa pun (baik itu a <small>
, <span>
, atau yang lainnya) dengan tidak lebih dari kelas utilitas.
<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 yang dinonaktifkan
Tambahkan disabled
atribut boolean pada input untuk mencegah interaksi pengguna dan membuatnya tampak lebih ringan.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tambahkan disabled
atribut ke a <fieldset>
untuk menonaktifkan semua kontrol di dalamnya.
<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>
Peringatan dengan jangkar
Browser memperlakukan semua kontrol bentuk asli ( <input>
, <select>
, dan <button>
elemen) di dalam a <fieldset disabled>
sebagai dinonaktifkan, mencegah interaksi keyboard dan mouse pada mereka.
Namun, jika formulir Anda juga menyertakan elemen seperti tombol khusus seperti <a ... class="btn btn-*">
, ini hanya akan diberi gaya pointer-events: none
. Seperti disebutkan di bagian tentang status dinonaktifkan untuk tombol (dan khususnya di sub-bagian untuk elemen jangkar), properti CSS ini belum distandarisasi dan tidak sepenuhnya didukung di Internet Explorer 10. Kontrol berbasis jangkar juga akan tetap fokus dan dapat dioperasikan menggunakan keyboard. Anda harus memodifikasi kontrol ini secara manual dengan menambahkan tabindex="-1"
untuk mencegahnya menerima fokus dan aria-disabled="disabled"
memberi sinyal statusnya ke teknologi bantu.
Kompatibilitas lintas-browser
Meskipun Bootstrap akan menerapkan gaya ini di semua browser, Internet Explorer 11 dan di bawahnya tidak sepenuhnya mendukung disabled
atribut pada file <fieldset>
. Gunakan JavaScript khusus untuk menonaktifkan fieldset di browser ini.
Validasi
Berikan umpan balik yang berharga dan dapat ditindaklanjuti kepada pengguna Anda dengan validasi formulir HTML5– tersedia di semua browser yang kami dukung . Pilih dari umpan balik validasi default browser, atau terapkan pesan khusus dengan kelas bawaan dan JavaScript pemula kami.
Bagaimana itu bekerja
Inilah cara kerja validasi formulir dengan Bootstrap:
- Validasi formulir HTML diterapkan melalui dua kelas semu CSS,
:invalid
dan:valid
. Ini berlaku untuk<input>
,<select>
, dan<textarea>
elemen. - Bootstrap mencakup
:invalid
dan:valid
gaya ke kelas induk.was-validated
, biasanya diterapkan ke<form>
. Jika tidak, bidang wajib apa pun tanpa nilai akan ditampilkan sebagai tidak valid pada pemuatan halaman. Dengan cara ini, Anda dapat memilih kapan harus mengaktifkannya (biasanya setelah pengiriman formulir dicoba). - Untuk mengatur ulang tampilan formulir (misalnya, dalam kasus pengiriman formulir dinamis menggunakan AJAX), hapus
.was-validated
kelas dari<form>
lagi setelah pengiriman. - Sebagai fallback,
.is-invalid
dan.is-valid
kelas dapat digunakan sebagai ganti kelas semu untuk validasi sisi server . Mereka tidak memerlukan.was-validated
kelas induk. - Karena kendala dalam cara kerja CSS, kami tidak dapat (saat ini) menerapkan gaya ke a
<label>
yang muncul sebelum kontrol formulir di DOM tanpa bantuan JavaScript khusus. - Semua browser modern mendukung API validasi kendala , serangkaian metode JavaScript untuk memvalidasi kontrol formulir.
- Pesan umpan balik dapat menggunakan default browser (berbeda untuk setiap browser, dan tidak dapat diubah gayanya melalui CSS) atau gaya umpan balik khusus kami dengan HTML dan CSS tambahan.
- Anda dapat memberikan pesan validitas khusus
setCustomValidity
dalam JavaScript.
Dengan mengingat hal itu, pertimbangkan demo berikut untuk gaya validasi formulir kustom kami, kelas sisi server opsional, dan default browser.
Gaya kustom
Untuk pesan validasi formulir Bootstrap kustom, Anda harus menambahkan novalidate
atribut boolean ke file <form>
. Ini menonaktifkan tooltips umpan balik default browser, tetapi masih menyediakan akses ke API validasi formulir di JavaScript. Coba kirimkan formulir di bawah ini; JavaScript kami akan mencegat tombol kirim dan menyampaikan umpan balik kepada Anda. Saat mencoba mengirim, Anda akan melihat :invalid
dan :valid
gaya diterapkan ke kontrol formulir Anda.
Gaya umpan balik khusus menerapkan warna, batas, gaya fokus, dan ikon latar belakang khusus untuk mengomunikasikan umpan balik dengan lebih baik. Ikon latar belakang untuk <select>
s hanya tersedia dengan .custom-select
, dan tidak .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 peramban
Tidak tertarik dengan pesan umpan balik validasi khusus atau menulis JavaScript untuk mengubah perilaku formulir? Semua baik, Anda dapat menggunakan browser default. Coba kirimkan formulir di bawah ini. Tergantung pada browser dan OS Anda, Anda akan melihat gaya umpan balik yang sedikit berbeda.
Meskipun gaya umpan balik ini tidak dapat ditata dengan CSS, Anda masih dapat menyesuaikan teks umpan balik melalui 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>
Sisi server
Kami merekomendasikan penggunaan validasi sisi klien, tetapi jika Anda memerlukan validasi sisi server, Anda dapat menunjukkan bidang formulir yang tidak valid dan valid dengan .is-invalid
dan .is-valid
. Perhatikan bahwa .invalid-feedback
juga didukung dengan kelas-kelas ini.
Untuk bidang yang tidak valid, pastikan bahwa umpan balik/pesan kesalahan yang tidak valid dikaitkan dengan bidang formulir yang relevan menggunakan aria-describedby
. Atribut ini memungkinkan lebih dari satu id
untuk direferensikan, jika bidang sudah menunjuk ke 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>
Elemen yang didukung
Gaya validasi tersedia untuk kontrol dan komponen formulir berikut ini:
<input>
s dan<textarea>
s dengan.form-control
<select>
s dengan.form-control
or.custom-select
.form-check
s.custom-checkbox
s dan.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>
Keterangan alat
Jika tata letak formulir Anda mengizinkannya, Anda bisa menukar .{valid|invalid}-feedback
kelas dengan .{valid|invalid}-tooltip
kelas untuk menampilkan umpan balik validasi dalam tip alat bergaya. Pastikan untuk memiliki induk position: relative
untuk pemosisian tooltip. Pada contoh di bawah, kelas kolom kami sudah memilikinya, tetapi proyek Anda mungkin memerlukan penyiapan 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>
Menyesuaikan
Status validasi dapat disesuaikan melalui Sass dengan $form-validation-states
peta. Terletak di _variables.scss
file kami, peta Sass ini dilingkarkan untuk menghasilkan status default valid
/ invalid
validasi. Termasuk adalah peta bersarang untuk menyesuaikan warna dan ikon setiap negara bagian. Meskipun tidak ada status lain yang didukung oleh browser, mereka yang menggunakan gaya kustom dapat dengan mudah menambahkan umpan balik formulir yang lebih kompleks.
Harap dicatat bahwa kami tidak menyarankan untuk menyesuaikan nilai-nilai ini tanpa juga memodifikasi 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 grup masukan
Untuk mendeteksi elemen apa yang memerlukan sudut membulat di dalam grup input dengan validasi, grup input memerlukan .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>
Formulir khusus
Untuk lebih banyak penyesuaian dan konsistensi lintas browser, gunakan elemen formulir kustom sepenuhnya kami untuk menggantikan default browser. Mereka dibangun di atas markup semantik dan dapat diakses, jadi mereka adalah pengganti yang solid untuk kontrol formulir default apa pun.
Kotak centang dan radio
Setiap kotak centang dan radio <input>
dan <label>
penyandingan dibungkus <div>
untuk membuat kontrol khusus kami. Secara struktural, ini adalah pendekatan yang sama dengan default kami .form-check
.
Kami menggunakan pemilih saudara ( ~
) untuk semua <input>
status kami—seperti :checked
—untuk menata dengan benar indikator formulir kustom kami. Saat digabungkan dengan .custom-control-label
kelas, kita juga dapat menata teks untuk setiap item berdasarkan status <input>
'.
Kami menyembunyikan default <input>
dengan opacity
dan menggunakan .custom-control-label
untuk membangun indikator formulir kustom baru di tempatnya dengan ::before
dan ::after
. Sayangnya kami tidak dapat membuat yang khusus hanya dari <input>
karena CSS content
tidak berfungsi pada elemen itu.
Dalam status yang dicentang, kami menggunakan ikon SVG tertanam base64 dari Open Iconic . Ini memberi kami kontrol terbaik untuk penataan gaya dan pemosisian di seluruh browser dan perangkat.
kotak centang
<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>
Kotak centang khusus juga dapat menggunakan :indeterminate
kelas semu saat diatur secara manual melalui JavaScript (tidak ada atribut HTML yang tersedia untuk menentukannya).
Jika Anda menggunakan jQuery, sesuatu seperti ini sudah cukup:
$('.your-checkbox').prop('indeterminate', true)
Radio
<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>
Di barisan
<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>
Dengan disabilitas
Kotak centang dan radio khusus juga dapat dinonaktifkan. Tambahkan disabled
atribut boolean ke <input>
dan indikator kustom serta deskripsi label akan ditata secara 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>
Sakelar
Sakelar memiliki markup kotak centang khusus tetapi menggunakan .custom-switch
kelas untuk merender sakelar sakelar. Switch juga mendukung 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 khusus <select>
hanya membutuhkan kelas khusus, .custom-select
untuk memicu gaya khusus. Gaya kustom terbatas pada <select>
tampilan awal 's dan tidak dapat mengubah <option>
s karena keterbatasan 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>
Anda juga dapat memilih dari pilihan kustom kecil dan besar untuk mencocokkan input teks kami yang berukuran sama.
<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
juga didukung:
<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>
Seperti size
atributnya:
<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>
Jangkauan
Buat <input type="range">
kontrol khusus dengan .custom-range
. Trek (latar belakang) dan ibu jari (nilai) keduanya ditata agar tampak sama di seluruh browser. Karena hanya IE dan Firefox yang mendukung "mengisi" trek mereka dari kiri atau kanan ibu jari sebagai sarana untuk menunjukkan kemajuan secara visual, saat ini kami tidak mendukungnya.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Input rentang memiliki nilai implisit untuk min
dan max
— 0
dan 100
, masing-masing. Anda dapat menentukan nilai baru untuk mereka yang menggunakan atribut min
and .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Secara default, rentang memasukkan "snap" ke nilai integer. Untuk mengubah ini, Anda dapat menentukan step
nilai. Pada contoh di bawah ini, kami menggandakan jumlah langkah dengan menggunakan step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Peramban berkas
Input file adalah yang paling kasar dan membutuhkan JavaScript tambahan jika Anda ingin menghubungkannya dengan file Choose fungsional… dan teks nama file yang dipilih.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Kami menyembunyikan file default <input>
melalui opacity
dan sebagai gantinya menata file <label>
. Tombol dibuat dan diposisikan dengan ::after
. Terakhir, kami mendeklarasikan a width
dan height
pada <input>
untuk spasi yang tepat untuk konten di sekitarnya.
Menerjemahkan atau menyesuaikan string dengan SCSS
Kelas :lang()
semu digunakan untuk memungkinkan terjemahan teks "Jelajahi" ke bahasa lain. Ganti atau tambahkan entri ke $custom-file-text
variabel Sass dengan tag bahasa yang relevan dan string yang dilokalkan. String bahasa Inggris dapat dikustomisasi dengan cara yang sama. Misalnya, berikut ini cara menambahkan terjemahan bahasa Spanyol (kode bahasa Spanyol adalah es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Berikut ini lang(es)
tindakan pada input file khusus untuk terjemahan bahasa 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>
Anda harus mengatur bahasa dokumen Anda (atau subpohonnya) dengan benar agar teks yang benar dapat ditampilkan. Ini dapat dilakukan dengan menggunakan atribut lang
pada elemen <html>
atau Content-Language
header HTTP , di antara metode lainnya.
Menerjemahkan atau menyesuaikan string dengan HTML
Bootstrap juga menyediakan cara untuk menerjemahkan teks "Jelajahi" dalam HTML dengan data-browse
atribut yang dapat ditambahkan ke label input khusus (contoh dalam bahasa Belanda):
<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>