Debugging Form

Form menggabungkan banyak komponen yang harus bekerja bersama: elemen form, kontrol dengan name, tombol dengan type yang tepat, validasi bawaan, dan pengodean data. Ketika satu komponen tidak bekerja, gejalanya hampir selalu samar: tombol terlihat normal tetapi tidak mengirim apa pun, atau data terkirim tetapi separuh isinya tidak sampai. Kita membutuhkan jalur diagnosis yang terurut, bukan menebak komponen mana yang bersalah.

Chapter ini memetakan empat gejala klasik beserta pemeriksaannya, lalu melihat data form langsung dari panel Network.

Empat Gejala, Empat Jalur #

1. Submit tidak terjadi. Periksa tiga titik secara berurutan: apakah button berada di dalam elemen form; apakah type-nya submit (tombol type="button" memang tidak mengirim); dan apakah validasi bawaan sedang memblokir — field bermasalah menampilkan ikon galat yang bisa dibaca pesannya saat kursor diarahkan; periksa required, pattern, dan min/max pada field tersebut.
2. Data tidak sampai. Penyebab paling umum: atribut name hilang. Browser hanya mengumpulkan pasangan name dan value dari kontrol yang punya name; sisanya tidak dikirim sama sekali.
3. Nilai yang dikirim salah. Bandingkan teks tampilan dengan value: option tanpa atribut value mengirim teks yang tampil — label berformat seperti “Kopi susu — Rp18.000” sampai ke server apa adanya.
4. File tidak terkirim. Form yang memuat input type="file" wajib memakai enctype="multipart/form-data"; tanpa itu, nama file terkirim tetapi isinya tidak.

Peran name layak diringkas dalam tabel karena menjadi sumber mayoritas laporan “data hilang”:

Melihat Payload di Panel Network #

Panel Network menunjukkan data form yang benar-benar keluar dari browser. Cara membacanya:

1. Buka DevTools, pilih panel Network, lalu submit form.
2. Cari baris permintaan yang baru muncul — namanya mengikuti nilai action.
3. Klik baris tersebut, lalu buka tab Payload.
4. Baca daftar pasangan name dan value yang dikirim browser.

Tab Payload adalah kebenaran akhir: kita melihat data yang keluar, bukan data yang kita yakin dikirim. Field yang tidak tampil di daftar tersebut tidak pernah dikirim — masalahnya di markup, bukan di server.

Studi Kasus: Email yang Tidak Sampai #

Form langganan terkirim dan halaman sukses tampil, tetapi alamat email tidak pernah sampai. Markup kontrolnya:

<label for="surel">Alamat email</label>
<input type="email" id="surel">

Tab Payload menampilkan pasangan dari kontrol lain — nama=budi — tanpa surel. Perbaikannya:

<label for="surel">Alamat email</label>
<input type="email" id="surel" name="surel">

Mari kita telaah perbaikannya:

1. Baris 2 (id="surel"): id hanya menghubungkan label dan kontrol untuk manusia serta pembaca layar; id tidak berperan dalam pengiriman data.
2. Baris 2 (name="surel"): name menjadi kunci pasangan data — kini payload memuat [email protected].

Empat gejala di atas paling cepat dipahami dengan mengalaminya sendiri. Dua form berikut memuat kontrol email yang sama — Form A lupa label, name, dan required; Form B lengkap. Jalankan tiga uji secara berurutan: klik teks di atas masing-masing kotak dan lihat ke mana fokus jatuh; kirim kedua form dalam keadaan kosong; lalu isi alamat email dan kirim lagi:

Pada demo, pengiriman sungguhan ditahan skrip kecil dan pasangan name/value-nya ditampilkan sebagai teks pada output — kebenaran yang biasanya dibaca pada tab Payload. Perilaku label, required, dan name berasal murni dari markup form-nya.

Tiga gejala terjadi dalam satu demo. Pertama, klik teks “Alamat email”: hanya Form B yang memindahkan fokus ke kotaknya — teks di Form A bukan label, sehingga kliknya tidak sampai ke mana-mana. Kedua, kirim kosong: Form A meloloskan pengiriman tanpa pemeriksaan apa pun, sedangkan Form B ditahan validasi bawaan dan menampilkan gelembung galat pada kolomnya. Ketiga, isi email lalu kirim: Form A tetap tidak membawa data — input tanpa name tidak masuk payload, persis studi kasus di atas — sementara Form B mengirim surel=alamat@contoh.

Checklist Form #

Delapan pemeriksaan untuk setiap form sebelum dianggap selesai:

1. Setiap kontrol punya label yang terhubung (for dan id berpasangan).
2. Setiap input, select, dan textarea punya name.
3. Setiap button punya type eksplisit.
4. form memuat action dan method yang jelas.
5. Form unggahan file memakai enctype="multipart/form-data".
6. Tombol Tab menjangkau semua kontrol dengan urutan yang masuk akal.
7. Field bergalat menampilkan pesan yang bisa dibaca (arahkan kursor ke ikon galat).
8. Payload diperiksa di panel Network sebelum menyimpulkan server bermasalah.

Gejala form paling sering selesai di name dan payload. Dua keluhan visual paling umum — gambar yang tidak muncul dan link yang tidak membawa ke mana-mana — punya jalur diagnosis sendiri di chapter berikutnya.