Form adalah salah satu elemen paling fundamental di sebuah website, digunakan untuk login, registrasi, kontak, hingga input data. Membuat form yang terlihat bagus, rapi, dan berfungsi baik di semua perangkat bisa jadi merepotkan. Di sinilah Bootstrap hadir sebagai solusi elegan. Dengan Bootstrap, Anda bisa membangun form yang sepenuhnya responsif dan profesional dengan cepat. 📝

## Komponen Dasar Form Bootstrap

Bootstrap menyederhanakan styling form dengan menyediakan kelas-kelas khusus untuk setiap elemen. Kunci utamanya adalah konsistensi dan kemudahan penggunaan.

Berikut adalah kelas-kelas inti yang perlu Anda ketahui:

• .form-label: Memberikan gaya dan spasi yang tepat untuk elemen <label>.
• .form-control: Kelas utama yang diterapkan pada input teks, <textarea>, dan <select>. Kelas ini akan membuat input memenuhi lebar wadahnya dan memberikan gaya visual yang modern.
• .form-text: Untuk menambahkan teks bantuan atau petunjuk di bawah input, biasanya dengan ukuran font yang lebih kecil dan warna yang lebih pudar.
• Wadah (<div>): Setiap pasangan label dan input sebaiknya dibungkus dalam sebuah <div>, seringkali dengan kelas margin seperti .mb-3 (margin-bottom: 3) untuk memberikan jarak vertikal yang konsisten.

## Contoh Form Login Sederhana

Mari kita langsung praktik dengan membuat form login sederhana yang terdiri dari input email, password, dan sebuah checkbox.

<div class="container mt-4" style="max-width: 500px;">
  <form>
    <div class="mb-3">
      <label for="inputEmail" class="form-label">Alamat Email</label>
      <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text">Kami tidak akan pernah membagikan email Anda kepada siapa pun.</div>
    </div>

    <div class="mb-3">
      <label for="inputPassword" class="form-label">Password</label>
      <input type="password" class="form-control" id="inputPassword">
    </div>

    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="checkIngatSaya">
      <label class="form-check-label" for="checkIngatSaya">Ingat Saya</label>
    </div>

    <button type="submit" class="btn btn-primary">Login</button>
  </form>
</div>

Dengan kode di atas, Anda akan mendapatkan form yang bersih, rapi, dan otomatis menyesuaikan diri dengan lebar layar, baik di desktop maupun mobile.

## Elemen Form Lainnya

Bootstrap mendukung semua jenis elemen form. Berikut beberapa contoh yang paling umum.

Select Menu (Dropdown)

Untuk membuat dropdown, gunakan kelas .form-select pada elemen <select>.

<div class="mb-3">
    <label for="pilihOpsi" class="form-label">Pilih Opsi</label>
    <select class="form-select" id="pilihOpsi">
      <option selected>Buka menu pilihan ini</option>
      <option value="1">Opsi Satu</option>
      <option value="2">Opsi Dua</option>
      <option value="3">Opsi Tiga</option>
    </select>
</div>

Radio Button dan Checkbox

Untuk radio button dan checkbox, strukturnya sedikit berbeda. Anda perlu membungkus input dan labelnya dalam <div> dengan kelas .form-check.

<div class="form-check">
  <input class="form-check-input" type="radio" name="radioContoh" id="radio1">
  <label class="form-check-label" for="radio1">
    Radio pertama
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioContoh" id="radio2">
  <label class="form-check-label" for="radio2">
    Radio kedua
  </label>
</div>

Jika Anda ingin menampilkannya sejajar (inline), cukup tambahkan kelas .form-check-inline pada <div> pembungkus.

## Layout dan Validasi

Layout dengan Grid

Untuk form yang lebih kompleks, Anda bisa menggabungkan form dengan Grid System Bootstrap. Dengan menggunakan .row dan .col, Anda bisa menempatkan beberapa input dalam satu baris.

<form>
  <div class="row">
    <div class="col">
      <label for="namaDepan" class="form-label">Nama Depan</label>
      <input type="text" class="form-control" id="namaDepan">
    </div>
    <div class="col">
      <label for="namaBelakang" class="form-label">Nama Belakang</label>
      <input type="text" class="form-control" id="namaBelakang">
    </div>
  </div>
</form>

Validasi Form

Bootstrap menyediakan gaya visual untuk status validasi. Tambahkan kelas .is-valid atau .is-invalid pada input untuk memberikan feedback visual kepada pengguna. Anda juga bisa menambahkan pesan error dengan <div> berkelas .invalid-feedback.

<div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control is-invalid" id="username" required>
    <div class="invalid-feedback">
      Username tidak boleh kosong.
    </div>
</div>

Kesimpulan

Bootstrap secara drastis menyederhanakan proses pembuatan form. Dengan memanfaatkan kelas-kelas utilitasnya seperti .form-control, .form-label, dan .form-check, Anda bisa dengan mudah membangun form yang tidak hanya fungsional tetapi juga terlihat profesional dan berfungsi sempurna di semua perangkat.