Kolom yang ditata bagus masih bisa menghasilkan form yang melelahkan bila susunannya berantakan: label melayang tidak karuan, jarak antarfield tidak konsisten, dan grup isian yang berhubungan tidak tampak berhubungan. Kabarnya, layout form tidak membutuhkan teknik baru — Flexbox dan Grid dari section sebelumnya cukup untuk semua pola yang lazim. Pada chapter ini kita kumpulkan pola-pola itu: form bertumpuk, baris inline, grid dua kolom dengan label di kiri, lalu menyatukannya menjadi form utuh yang rapi.

Pola Dasar: Bertumpuk dan Inline #

Pola paling aman adalah bertumpuk — label di atas kolomnya. Tanpa CSS layout apa pun, label dan input memang sudah tersusun vertikal karena keduanya block-level; kita cukup merapikan jaraknya dengan gap lewat flexbox kolom:

css 
.form-bertumpuk {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-bertumpuk label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

Pola kedua adalah baris inline: label dan kolom berdampingan dalam satu baris. Pola ini cocok untuk field pendek seperti checkbox dan input pencarian, dengan flexbox biasa:

css 
.baris-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

Untuk label panjang, pola ini cepat sempit — karena itu baris inline dijadikan pengecualian, bukan pola utama.

Dua Kolom dengan Grid #

Form pada halaman lebar sering memakai susunan klasik: label di kolom kiri, kolom input di kanan, sehingga semua label membentuk satu garis rata yang mudah dipindai. Grid dua kolom memberinya secara presisi:

css 
.form-dua-kolom {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 14px 16px;
  align-items: center;
}

.form-dua-kolom label {
  font-size: 0.875rem;
  font-weight: 600;
}

.form-dua-kolom .field-lebar {
  grid-column: 2;
}

.form-dua-kolom .aksi-form {
  grid-column: 2;
}

Mari kita bedah keputusannya:

  1. grid-template-columns: 12rem 1fr: kolom label berlebar tetap agar rata antarbaris; kolom kedua 1fr mengambil seluruh sisa ruang, termasuk perilaku minmax aman-luber yang dibahas pada section CSS Grid.
  2. gap: 14px 16px: dua nilai — 14px antarbaris, 16px antarkolom; ritme vertikal dan horizontal bisa berbeda tanpa margin tambahan.
  3. align-items: center: label dan input sejajar di tengah barisnya.
  4. .aksi-form { grid-column: 2 }: tombol submit ditempatkan di kolom kanan, segaris dengan input di atasnya — bukan di bawah label.

Satu pengecualian: untuk textarea yang tinggi, align-items: center membuat label tergantung di tengah kotak yang besar. Beri align-self: start pada label grup tersebut agar label menempel di baris pertama, sejajar dengan awal teks textarea.

Untuk layar sempit, pola dua kolom biasanya dilipat menjadi bertumpuk memakai satu media query dari section Responsive Web Design: pada min-width: 560px grid dua kolom aktif, dan di bawahnya form kembali ke satu kolom dengan grid-template-columns: 1fr. Markup tidak perlu diubah sama sekali; hanya definisi kolomnya yang menyesuaikan lebar ruang yang tersedia. Pola mobile-first seperti ini menjaga form tetap terbaca di ponsel tanpa menduplikasi strukturnya.

Mengelompokkan dengan fieldset dan legend #

Field yang berhubungan — misalnya seluruh alamat — lebih jelas bila dibungkus <fieldset> dengan <legend> sebagai judul grupnya. Secara bawaan fieldset sudah menggambar border dan meletakkan legend di garis atasnya; kita cukup merapikan spacing-nya:

css 
.grup-form {
  border: 1px solid #d9d2c0;
  border-radius: 12px;
  padding: 16px;
}

.grup-form legend {
  padding: 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
}

Di dalam demo, fieldset membentang penuh dua kolom memakai grid-column: 1 / -1 lalu memakai definisi kolom yang sama dengan form induknya, dan tidak ada satu pun margin vertikal manual — jarak seluruhnya diatur gap. Selain visual, pemisahan grup ini juga yang dikenali pembaca layar sebagai konteks isian.

Ringkasan #

Layout form berdiri di atas dua pola: bertumpuk dengan label di atas kolom untuk pembacaan paling nyaman, dan grid dua kolom dengan grid-template-columns tetap untuk label yang rata sempurna di kiri. gap menggantikan margin manual sebagai sumber ritme, dan fieldset plus legend memberi bingkai serta makna bagi grup isian yang berhubungan. Chapter berikutnya menutup section ini dengan sudut pandang yang seharusnya menyertai setiap keputusan di atas: aksesibilitas form.