Form Submission

Klik tombol submit — lalu apa? Di balik satu klik itu browser menjalankan rangkaian kerja yang panjang: memvalidasi, mengumpulkan, mengodekan, lalu mengirim data menurut aturan action dan method yang sudah kita atur di chapter Action dan Method. Chapter ini menelusuri alur itu dari detik pertama klik sampai server menjawab.

Memahami alurnya membuat kita bisa membaca gejala-gejala klasik: data yang setengah terkirim, URL yang berubah aneh, atau tombol yang mengirim form padahal tidak seharusnya.

Alur dari Klik sampai Respons #

flowchart LR A[Klik submit atau Enter] --> B[Validasi bawaan bila ada] B --> C[Kumpulkan pasangan name=value] C --> D[Kodekan: urlencoded atau multipart] D --> E[Kirim ke action sesuai method] E --> F[Server memproses dan menjawab]

Tahapannya berurutan: pemicu (tombol atau tombol Enter), pemeriksaan validasi bawaan browser, pengumpulan data, pengodean, pengiriman, dan akhirnya respons server yang mengganti halaman — biasanya redirect ke halaman sukses atau kembali ke form dengan pesan.

Kontrol Sukses yang Ikut Terkirim #

Browser tidak mengirim semua kontrol — hanya kontrol yang disebut spesifikasi sebagai successful controls. Syaratnya tiga lapis: kontrol punya name, tidak sedang disabled, dan berstatus aktif — checkbox dan radio harus tercentang, salah satu option pada select harus terpilih, berkas pada input type="file" harus sudah dipilih.

Encoding: Bentuk Data di Jalan #

method="get" menumpangkan data di URL setelah tanda tanya; method="post" mengirimnya di badan permintaan. Format pasangannya sama: name=value dipisah &, spasi menjadi +, karakter khusus dikodekan persen.

html
<form action="/cari" method="get">
  <label for="kata">Kata kunci</label>
  <input type="search" id="kata" name="kata" value="kopi gayo">

  <label for="kota">Kota</label>
  <input type="text" id="kota" name="kota" value="Bandung">

  <button type="submit">Cari</button>
</form>

Permintaan yang terkirim:

text

GET /cari?kata=kopi+gayo&kota=Bandung

Demo berikut memakai form yang sama dengan nilai awal yang sudah terisi — cukup tekan Cari dan amati bingkainya: validasi lolos, kedua pasangan dikumpulkan, lalu bingkai berpindah ke https://example.com/cari lengkap dengan query string pada alamatnya. Alur pada diagram di awal chapter, kini terlihat langsung dari klik sampai respons.

Pada demo, action diarahkan ke https://example.com/cari — domain cadangan resmi — sehingga respons server pengganti halaman benar-benar tampil di dalam bingkai; markup lainnya sama persis dengan contoh di atas.

Mari kita telaah hasilnya:

action="/cari" + data: tanda ? membuka string kueri; tiap pasangan disambung &.
kata=kopi+gayo: spasi di dalam nilai dikodekan sebagai +; karakter seperti & atau = dalam nilai dikodekan persen supaya tidak menyamar sebagai pemisah.
method="get" membuat data terbaca di URL: itulah alasan pencarian bisa di-bookmark dan dibagikan — seluruh keadaan pencariannya termuat di alamat. Data sensitif tidak pantas lewat jalur ini; kirim lewat post supaya tidak menempel di riwayat browser.
post memakai format badan: pasangan yang sama dikirim tersembunyi di badan request — sebagai application/x-www-form-urlencoded, atau multipart/form-data bila ada unggahan berkas (dibedah di chapter File Input).

Enter Tanpa Tombol #

Form bisa terkirim tanpa satu pun tombol submit: menekan Enter saat fokus di kolom teks memicu implicit submission. Browser mengirim form seolah tombol submit pertama diklik, atau langsung mengirim bila tombolnya tidak ada. Perilaku ini bagus untuk form satu kolom seperti pencarian, tapi ingat pula kebalikannya: tombol netral yang lupa type="button" akan ikut terpicu saat pengguna menekan Enter — kembali ke peringatan di chapter Button.

Melewati Validasi: formnovalidate #

Bawaannya, browser memvalidasi aturan seperti required sebelum mengirim; gagal validasi berarti form tidak jadi terkirim. Tombol dengan atribut formnovalidate melewati pemeriksaan itu untuk pengiriman lewat tombol tersebut — pas untuk tombol “Simpan Draf” yang memang mengizinkan isian belum lengkap. Seluruh perangkat aturan validasinya dibedah tuntas di Section Form Validation.

Ringkasan #

Alur submit: pemicu → validasi bawaan → kumpul name=value → encode → kirim ke action dengan method → respons server.
Hanya kontrol sukses yang terkirim: ber-name, tidak disabled, dan aktif (tercentang/terpilih).
GET menaruh data di URL sebagai ?a=1&b=2 — bisa di-bookmark, tidak untuk data sensitif; POST mengirim di badan request.
Enter di kolom teks mengirim form; formnovalidate pada tombol melewati validasi bawaan.