tutorial pengembangan web terbaru
 

Bootstrap CSS Forms Reference


Bootstrap's Pengaturan Default

Bentuk kontrol individu secara otomatis menerima beberapa styling global dengan Bootstrap .

Semua tekstual <input>, <textarea> , dan <select> elemen dengan class="form-control" diatur ke width: 100%; secara default.

Aturan standar untuk Bootstrap bentuk:

  • Tambahkan role="form" ke <form> elemen (membantu meningkatkan aksesibilitas untuk orang-orang menggunakan pembaca layar)
  • Bungkus label dan bentuk kontrol dalam <div> elemen dengan class="form-group" (yang dibutuhkan untuk jarak optimal)
  • Tambahkan class="form-control" untuk semua tekstual <input>, <textarea> , dan <select> elemen

Contoh berikut membuat bentuk Bootstrap sederhana dengan dua bidang input, satu kotak centang, dan sebuah tombol submit:

Form Bootstrap Contoh

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Cobalah sendiri "

<form> Kelas

Kelas Deskripsi Contoh
.form-inline Membuat <form> kiri-blok dengan kontrol inline-block (ini hanya berlaku untuk bentuk dalam viewports yang setidaknya 768px lebar) Cobalah
.form-horizontal Sejalan label dan kelompok kontrol bentuk dalam tata letak horisontal Cobalah