tutorial pengembangan web terbaru
 

Bootstrap Forms

❮ Sebelumnya Berikutnya Bab ❯

Bootstrap's Pengaturan Default

Bentuk kontrol otomatis menerima beberapa styling global dengan Bootstrap :

Semua tekstual <input> , <textarea> , dan <select> elemen dengan kelas .form-control memiliki lebar 100%.

Bootstrap Form Layout

Bootstrap menyediakan tiga jenis layout bentuk:

  • bentuk vertikal (ini adalah default)
  • bentuk horisontal
  • bentuk inline

aturan standar untuk semua tiga layout bentuk:

  • Selalu gunakan <form role="form"> (membantu meningkatkan aksesibilitas untuk orang-orang menggunakan pembaca layar)
  • Bungkus label dan bentuk kontrol di <div class="form-group"> (diperlukan untuk jarak optimal)
  • Menambahkan kelas .form-control untuk semua tekstual <input> , <textarea> , dan <select> elemen

Bootstrap Formulir Vertikal (default)

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

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 "

Bootstrap Inline Form

Dalam bentuk inline, semua elemen yang inline, kiri-blok, dan label bersama.

Catatan: Ini hanya berlaku untuk bentuk dalam viewports yang setidaknya 768px lebar!

Aturan tambahan untuk bentuk inline:

  • Menambahkan kelas .form-inline ke <form> elemen

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

Contoh

<form class="form-inline" 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 "

Tip: Jika Anda tidak menyertakan label untuk setiap masukan, pembaca layar akan memiliki masalah dengan bentuk Anda. Anda dapat menyembunyikan label untuk semua perangkat, kecuali pembaca layar, dengan menggunakan .sr-only kelas:

Contoh

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" 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 "

Bootstrap Form Horizontal

Suatu bentuk horisontal berdiri terpisah dari bentuk-bentuk lain baik dalam jumlah markup, dan dalam penyajian formulir.

aturan tambahan untuk bentuk horisontal:

  • Menambahkan kelas .form-horizontal ke <form> elemen
  • Menambahkan kelas .control-label untuk semua <label> elemen

Tip: Gunakan Bootstrap's kelas jaringan yang telah ditetapkan untuk menyelaraskan label dan kelompok kontrol bentuk dalam tata letak horizontal.

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

Contoh

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯