Proyek: Formulir Pendaftaran

Kenapa Formulir Ini Penting

Hampir setiap website yang kamu pakai sehari-hari punya formulir: daftar akun, pesan tiket, checkout belanja, isi survei. Formulir pendaftaran event ini bukan sekadar latihan, ini bukti nyata bahwa kamu bisa membangun bagian website yang paling sering disentuh manusia. Kalau kamu bisa merangkai formulir ini dengan rapi dan tervalidasi, kamu memegang skill yang dipakai di dunia kerja: mengumpulkan data dari pengguna dengan aman dan nyaman.

Dari sisi portofolio, proyek ini menunjukkan hal yang tidak bisa ditunjukkan modul-modul sebelumnya: kemampuan merancang pengalaman mengisi data. Orang yang melihat proyek ini langsung paham kamu mengerti kebutuhan nyata, bukan cuma bisa bikin halaman statis yang cantik.

Syarat demi Syarat, dan Maksudnya

Mari bedah 8 syaratnya satu per satu supaya kamu paham kenapa tiap syarat ada, bukan cuma menghafal daftarnya.

1. form dengan action dan method="post". Ini fondasi semuanya. action memberitahu browser ke mana data dikirim, sedangkan method="post" berarti data dikirim lewat body request, bukan ditempel di URL. Data pendaftaran itu sensitif, jadi POST adalah pilihan yang benar dan aman.

2. fieldset "Data Diri". Berisi nama (text, wajib diisi), email (email, wajib), nomor HP (tel), dan tanggal lahir (date). Fieldset mengelompokkan field yang sejenis dan legend memberi judul untuk kelompoknya. Tipe input yang tepat membuat browser menampilkan keyboard yang sesuai di HP.

3. fieldset "Pilihan". Paket pendaftaran pakai radio karena peserta hanya boleh pilih satu. Workshop tambahan pakai checkbox karena boleh pilih banyak sekaligus. Kota asal pakai select karena daftarnya panjang dan dropdown menghemat tempat. Tiga kontrol untuk tiga kasus nyata dengan tiga alasan berbeda.

4. textarea alasan ikut. Alasan butuh ruang menulis, jadi tidak cocok memakai input satu baris. maxlength="300" menjaga jawaban tetap ringkas dan menunjukkan kamu memikirkan batasan data sejak awal.

5. Upload bukti bayar. Input file dengan accept="image/*" supaya yang bisa dipilih hanya file gambar. Ingat aturan kerasnya: begitu ada upload file, form wajib memakai enctype="multipart/form-data", tanpanya file tidak akan terkirim.

6. label untuk semua input. Ini syarat yang paling sering menggugurkan nilai peserta. Label bukan hiasan: label yang diklik akan memfokuskan input pasangannya, dan pembaca layar membutuhkannya untuk menjelaskan tiap field kepada pengguna tunanetra. Formulir tanpa label gagal total dari sisi aksesibilitas.

7. Validasi bawaan browser. required untuk field yang wajib diisi, pattern untuk format khusus seperti username. Validasi ini memberi feedback instan tanpa satu baris JavaScript pun.

8. Dua tombol kirim. Tombol submit biasa mengirim data, sedangkan tombol "Simpan Draft" memakai formnovalidate supaya peserta bisa menyimpan progres tanpa harus melengkapi semua field dulu. Satu atribut kecil yang menyelesaikan masalah nyata.

Cara Mengerjakan Bertahap

Jangan tulis semuanya sekaligus, kerjakan berlapis supaya tidak kewalahan.

Langkah 1: Kerangka dan pengelompokan. Buat form kosong dengan action, method, dan enctype yang benar, lalu bagi menjadi dua fieldset lengkap dengan legend. Pastikan strukturnya rapi dulu sebelum ada satu pun field di dalamnya.

Langkah 2: Isi semua field beserta labelnya. Kerjakan fieldset Data Diri sampai tuntas, baru lanjut ke fieldset Pilihan. Setiap kali menambah input, langsung tulis label-nya saat itu juga. Terakhir tambahkan textarea, upload file, dan kedua tombol.

Langkah 3: Validasi dan uji sendiri. Tambahkan required, pattern, dan maxlength, lalu uji: coba submit kosong, coba isi email asal-asalan, coba upload file bukan gambar. Kalau browser memblokir yang seharusnya diblokir, berarti validasimu bekerja.

Catatan teknis: Formulir adalah tempat error aksesibilitas paling sering terjadi. Setiap input tanpa label adalah poin minus besar, dan AI tutor akan memeriksanya pertama kali sebelum menilai sisanya.