HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Formulir Bootstrap

❮ Sebelumnya Berikutnya ❯

Pengaturan Default Bootstrap

Kontrol formulir secara otomatis menerima beberapa gaya global dengan Bootstrap:

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

Tata Letak Formulir Bootstrap

Bootstrap menyediakan tiga jenis tata letak formulir:

  • Bentuk vertikal (ini default)
  • Bentuk horisontal
  • bentuk sebaris

Aturan standar untuk ketiga tata letak formulir:

  • Bungkus label dan kontrol formulir <div class="form-group">(diperlukan untuk jarak optimal)
  • Tambahkan kelas .form-controlke semua tekstual <input>, <textarea>, dan <select>elemen

Formulir Vertikal Bootstrap (default)

Contoh berikut membuat formulir vertikal dengan dua bidang input, satu kotak centang, dan tombol kirim:

Contoh

<form action="/action_page.php">
  <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>

Formulir Inline Bootstrap

Dalam bentuk sebaris, semua elemen sejajar, rata kiri, dan labelnya berdampingan.

Catatan: Ini hanya berlaku untuk formulir dalam area pandang yang lebarnya setidaknya 768 piksel!

Aturan tambahan untuk formulir sebaris:

  • Tambahkan kelas .form-inlineke <form>elemen

Contoh berikut membuat formulir sebaris dengan dua bidang masukan, satu kotak centang, dan satu tombol kirim:

Contoh

<form class="form-inline" action="/action_page.php">
  <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>

Tips: Jika Anda tidak menyertakan label untuk setiap input, pembaca layar akan mengalami masalah dengan formulir Anda. Anda dapat menyembunyikan label untuk semua perangkat, kecuali pembaca layar, dengan menggunakan .sr-onlykelas:

Contoh

<form class="form-inline" action="/action_page.php">
  <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>

Bentuk Horizontal Bootstrap

Bentuk horizontal berarti label disejajarkan di sebelah bidang input (horizontal) pada layar besar dan sedang. Pada layar kecil (767px dan di bawah), itu akan berubah menjadi bentuk vertikal (label ditempatkan di atas setiap input).

Aturan tambahan untuk formulir horizontal:

  • Tambahkan kelas .form-horizontalke <form>elemen
  • Tambahkan kelas .control-labelke semua <label>elemen

Tips: Gunakan kelas kisi yang sudah ditentukan sebelumnya di Bootstrap untuk meratakan label dan grup kontrol formulir dalam tata letak horizontal.

Contoh berikut membuat formulir horizontal dengan dua bidang input, satu kotak centang, dan satu tombol kirim.

Contoh

<form class="form-horizontal" action="/action_page.php">
  <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>

❮ Sebelumnya Berikutnya ❯