Input Formulir Bootstrap 4
Kontrol Formulir yang Didukung
Bootstrap mendukung kontrol formulir berikut:
- memasukkan
- area teks
- kotak centang
- radio
- Pilih
Masukan bootstrap
Bootstrap mendukung semua jenis input HTML5: teks, kata sandi, datetime, datetime-local, tanggal, bulan, waktu, minggu, nomor, email, url, pencarian, telp, dan warna.
Catatan: Input TIDAK akan sepenuhnya ditata jika tipenya tidak dideklarasikan dengan benar!
Contoh berikut berisi dua elemen input; salah satu type="text"dan salah satu
type="password". Seperti yang kami sebutkan di bab Formulir, kami menggunakan .form-controlkelas untuk menata input dengan padding lebar penuh dan tepat, dll:
Contoh
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap Textarea
Contoh berikut berisi textarea:
Contoh
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Kotak Centang Bootstrap
Kotak centang digunakan jika Anda ingin pengguna memilih sejumlah opsi dari daftar opsi prasetel.
Contoh berikut berisi tiga kotak centang. Opsi terakhir dinonaktifkan:
Contoh
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Contoh dijelaskan
Gunakan elemen pembungkus dengan class="form-check"untuk memastikan margin yang tepat untuk label dan kotak centang.
Tambahkan .form-check-labelkelas ke elemen label, dan .form-check-inputuntuk menata kotak centang dengan benar di dalam .form-checkwadah.
Kotak Centang Sebaris
Gunakan .form-check-inlinekelas jika Anda ingin kotak centang muncul di baris yang sama:
Contoh
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Tombol Radio Bootstrap
Tombol radio digunakan jika Anda ingin membatasi pengguna hanya pada satu pilihan dari daftar opsi prasetel.
Contoh berikut berisi tiga tombol radio. Opsi terakhir dinonaktifkan:
Contoh
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Seperti kotak centang, gunakan .form-check-inlinekelas jika Anda ingin tombol radio muncul di baris yang sama:
Contoh
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Daftar Pilih Bootstrap
Pilih daftar digunakan jika Anda ingin mengizinkan pengguna untuk memilih dari beberapa opsi.
Contoh berikut berisi daftar dropdown (pilih daftar):
Contoh
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Ukuran Kontrol Formulir
Ubah ukuran kontrol formulir dengan .form-control-smatau .form-control-lg:
Contoh
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Kontrol Formulir dengan Teks Biasa
Gunakan .form-control-plaintextjika Anda ingin menata bidang input sebagai teks biasa:
Contoh
<input type="text" class="form-control-plaintext">
File Kontrol Formulir dan Rentang
Tambahkan .form-control-rangekelas ke input type"range"atau .form-control-fileke input type"file"untuk menata kontrol rentang atau bidang file dengan lebar penuh:
Contoh
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">