Input Formulir Bootstrap
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 jenis teks dan salah satu jenis kata sandi:
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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Gunakan .checkbox-inlinekelas jika Anda ingin kotak centang muncul di baris yang sama:
Contoh
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
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 pertama dicentang secara default dan opsi terakhir dinonaktifkan:
Contoh
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Gunakan .radio-inlinekelas jika Anda ingin tombol radio muncul di baris yang sama:
Contoh
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
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>