Selamat datang di tutorial Bootstrap ke-13! Setelah kita menguasai komponen navigasi seperti Navbar, sekarang kita akan beralih ke salah satu elemen paling interaktif dan esensial di setiap website: Form. Mulai dari form login, registrasi, kontak, hingga pencarian, form adalah cara utama pengguna berinteraksi dengan situs Anda.

Bootstrap menyediakan serangkaian kelas yang sangat komprehensif untuk menata elemen form agar terlihat modern, rapi, dan responsif tanpa perlu menulis banyak CSS kustom. Mari kita selami cara membuatnya.

Komponen Dasar Form

Bootstrap menata ulang tampilan default elemen form browser agar konsisten dan lebih baik secara visual. Komponen utamanya adalah sebagai berikut.

1. Form Control

Ini adalah kelas paling fundamental yang diterapkan pada elemen input teks, email, password, textarea, dll. Kelas .form-control akan membuat input memiliki lebar 100% dari parent-nya, dengan padding dan gaya visual yang modern.

2. Form Label

Untuk memberikan label pada input, gunakan tag <label> dengan kelas .form-label. Ini akan memberikan sedikit margin bawah untuk jarak yang pas.

3. Struktur Dasar

Praktik terbaik adalah membungkus setiap pasangan label dan input dalam sebuah <div>, biasanya dengan kelas margin bawah seperti .mb-3 untuk menciptakan spasi vertikal yang konsisten antar elemen.

Contoh Form Dasar:

<form>
  <div class="mb-3">
    <label for="emailInput" class="form-label">Alamat Email</label>
    <input type="email" class="form-control" id="emailInput" placeholder="nama@contoh.com">
  </div>
  <div class="mb-3">
    <label for="passwordInput" class="form-label">Password</label>
    <input type="password" class="form-control" id="passwordInput">
  </div>
  <div class="mb-3">
    <label for="pesanTextarea" class="form-label">Pesan Anda</label>
    <textarea class="form-control" id="pesanTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Kirim</button>
</form>

Elemen Form Lainnya

Bootstrap juga menyediakan gaya untuk hampir semua jenis input yang Anda butuhkan.

1. Select (Dropdown)

Gunakan kelas .form-select pada tag <select> untuk mendapatkan tampilan dropdown yang konsisten di semua browser.

<div class="mb-3">
  <label for="pilihanKota" class="form-label">Pilih Kota</label>
  <select class="form-select" id="pilihanKota" aria-label="Default select example">
    <option selected>Buka menu pilihan ini</option>
    <option value="1">Jakarta</option>
    <option value="2">Bandung</option>
    <option value="3">Surabaya</option>
  </select>
</div>

2. Checkbox dan Radio Button

Checkbox dan radio button memiliki struktur khusus menggunakan kelas .form-check.

• .form-check: Wrapper <div> untuk setiap pilihan.
• .form-check-input: Diterapkan pada tag <input>.
• .form-check-label: Diterapkan pada tag <label>.

Contoh Checkbox:

<div class="form-check mb-3">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Setuju dengan syarat dan ketentuan
  </label>
</div>

Contoh Radio Button:

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Opsi Satu
  </label>
</div>
<div class="form-check mb-3">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Opsi Dua (default)
  </label>
</div>

Untuk membuatnya tampil sejajar (inline), tambahkan kelas .form-check-inline pada div wrapper .form-check.

3. File Input

Input untuk mengunggah file juga menggunakan kelas .form-control.

<div class="mb-3">
  <label for="formFile" class="form-label">Unggah Berkas Anda</label>
  <input class="form-control" type="file" id="formFile">
</div>

Tata Letak Form (Layout)

Seringkali kita butuh menempatkan beberapa field dalam satu baris. Di sinilah sistem Grid Bootstrap berperan. Anda bisa menggunakan .row dan .col untuk membuat tata letak yang kompleks.

Contoh Form dengan Grid:

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="namaDepan" class="form-label">Nama Depan</label>
      <input type="text" class="form-control" id="namaDepan">
    </div>
    <div class="col-md-6 mb-3">
      <label for="namaBelakang" class="form-label">Nama Belakang</label>
      <input type="text" class="form-control" id="namaBelakang">
    </div>
  </div>
  <div class="mb-3">
      <label for="alamat" class="form-label">Alamat</label>
      <input type="text" class="form-control" id="alamat" placeholder="Jl. Merdeka No. 17">
  </div>
</form>

Pada contoh di atas, “Nama Depan” dan “Nama Belakang” akan berada dalam satu baris pada layar medium (md) atau lebih besar, dan akan bertumpuk secara otomatis pada layar yang lebih kecil.

Fitur Lanjutan

1. Input Groups

Fitur ini memungkinkan Anda untuk menambahkan teks, ikon, atau tombol di depan atau di belakang sebuah .form-control. Caranya adalah dengan membungkus input dan addon dalam sebuah <div> dengan kelas .input-group.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Jumlah">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email langganan">
  <button class="btn btn-outline-secondary" type="button">Langganan</button>
</div>

2. Floating Labels

Ini adalah efek visual modern di mana label placeholder akan “mengambang” ke atas saat pengguna mulai mengetik. Cukup bungkus input dan label dalam sebuah <div> dengan kelas .form-floating.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="nama@contoh.com">
  <label for="floatingInput">Alamat Email</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Kesimpulan

Membuat form adalah tugas yang umum dalam pengembangan web, dan Bootstrap membuatnya jauh lebih mudah dan cepat. Dengan memahami kelas-kelas inti seperti .form-control, .form-label, .form-select, dan .form-check, Anda sudah bisa membuat hampir semua jenis form. Ditambah dengan kekuatan sistem Grid, Input Groups, dan Floating Labels, Anda dapat merancang form yang tidak hanya fungsional tetapi juga terlihat profesional dan sepenuhnya responsif.