htmlcssjavascriptformwizardMenengah12 mnt baca

Form Multi-Langkah (Wizard)

Membangun form pendaftaran bertahap dengan progress bar dan validasi per langkah.

Kenapa Form Dipecah?

Form panjang (pendaftaran, checkout) menakutkan pengguna. Memecahnya menjadi 3-4 langkah kecil dengan progress bar meningkatkan penyelesaian hingga 2x lipat. Ini pola standar di e-commerce dan aplikasi perbankan.

Langkah Membangun

HTML: Satu <form> berisi 3 <div class="langkah">: (1) Data diri, (2) Akun, (3) Konfirmasi. Hanya langkah aktif yang tampil. Progress bar di atas menunjukkan langkah 1/2/3.

CSS: Langkah disembunyikan dengan display: none, yang aktif tampil dengan animasi slide. Progress bar: lingkaran bernomor yang terisi saat langkah selesai, dihubungkan garis.

JS: State langkahAktif (0, 1, 2). Fungsi tampilLangkah(n):

  1. Sembunyikan semua, tampilkan yang ke-n.
  2. Update progress bar.
  3. Tombol "Kembali" disembunyikan di langkah pertama, tombol "Kirim" hanya muncul di langkah terakhir.

Validasi per langkah: sebelum lanjut, cek input di langkah saat ini. Kalau ada yang kosong/salah, tampilkan error dan jangan pindah. Data semua langkah dikumpulkan di satu object dataForm.

Kesalahan Umum

  • Data hilang saat pindah langkah (simpan ke object, jangan andalkan DOM).
  • Bisa klik "Lanjut" meski validasi gagal (return early jika tidak valid).
  • Progress bar tidak sinkron dengan langkah aktual (selalu update keduanya di satu fungsi).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Simpan Draft Otomatis

Simpan dataForm ke localStorage setiap kali langkah berubah, dan saat halaman dibuka kembali, tawarkan "Lanjutkan dari draft?" yang mengisi ulang form.