Form Submission Overview

Tombol submit tertekan, validasi lolos, dan layar berpindah ke halaman baru. Di sela proses tersebut, platform web menjalankan serangkaian langkah yang rapi: merangkai data, mengodekannya, lalu mengirimkannya. Chapter ini membedah rangkaian itu dari sudut pandang platform — bukan mengulang cara menulis form, melainkan menjelaskan apa yang sebenarnya terjadi setelah data lolos pemeriksaan.

Empat Langkah Pengiriman #

Setiap submit yang berhasil melewati empat langkah berikut, berurutan:

1. Validasi: constraint validation dijalankan terlebih dahulu; pengiriman berhenti bila ada kontrol yang gagal, sebagaimana dibahas pada chapter sebelumnya.
2. Konstruksi form data set: browser mengumpulkan pasangan name=value dari setiap kontrol yang layak dikirim — kontrol tanpa atribut name tidak ikut sama sekali.
3. Pengodean (encode): pasangan-pasangan tersebut disusun menjadi satu format tertentu sesuai atribut enctype.
4. Pengiriman dan navigasi: request dibuat ke URL pada action dengan method yang dipilih, dan browser menavigasi halaman menuju response server.

Detail pada langkah kedua sering mengejutkan: checkbox yang tidak dicentang tidak menghasilkan pasangan apa pun, kontrol disabled ditinggalkan, dan tombol submit yang dipakai ikut terkirim sebagai satu pasangan. Data yang sampai ke server hanya berasal dari pasangan yang benar-benar terbentuk.

enctype: Tiga Cara Mengodekan #

Atribut enctype pada form menentukan bentuk data yang dikirim. Tiga nilainya dirangkum berikut:

Bila kita tidak menulis enctype, browser memakai urlencoded. Nilai query yang tampak seperti q=kucing%20persia adalah hasil pengodean tersebut: spasi pada masukan pengunjung dikodekan agar aman melintasi URL.

GET dan POST dari Sudut Platform #

Dengan method="get", form data set ditempel pada URL sebagai query string: data terlihat di address bar, dapat di-bookmark, dan cocok untuk operasi ambil data seperti pencarian. Dengan method="post", data dikirim di dalam body request; URL tetap bersih dan muatannya tidak terekam pada riwayat alamat.

Keduanya sama-sama membuat browser berpindah halaman: response server dirender sebagai halaman baru, persis seperti tautan yang diklik — hanya saja datanya ikut terkirim. Pola tanpa perpindahan halaman, yaitu mengirim data lalu memperbarui sebagian tampilan, dibangun dengan JavaScript dan menjadi topik section HTML dan JavaScript. Tanpa JavaScript, alur navigasi inilah jalan bawaan platform.

Mengamati Request di DevTools #

Tab Network pada DevTools memperlihatkan seluruh langkah ini dalam wujud nyata. Buka tab tersebut sebelum menekan submit, lalu amati baris request yang muncul: kolom Method menunjukkan GET atau POST, kolom Status menunjukkan hasil server, dan panel rinci memuat Request URL serta Payload. Berikut hasil pengamatan pada contoh di akhir chapter:

Form pencarian: ketik "kucing" lalu submit (method="get")

Address bar:
  www.example.com/cari?q=kucing

DevTools, tab Network, request pertama:
  Request URL:    www.example.com/cari?q=kucing
  Request Method: GET
  Status Code:    200 OK
  Payload:        q=kucing

Form langganan: isi email lalu submit (method="post")

  Request URL:    www.example.com/langganan
  Request Method: POST
  Status Code:    200 OK
  Payload:        [email protected]   (di body request)

Perbedaan letak data terlihat jelas: pada GET, pasangan q=kucing menempel di URL; pada POST, pasangan email=... berpindah ke body request dan URL hanya berisi path tujuan.

Contoh: Dua Form, Dua Method #

File berikut menaruh dua form dengan method berbeda pada satu halaman. Simpan sebagai contoh-submit.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pencarian dan Langganan</title>
</head>
<body>
  <h1>Pencarian Buku</h1>
  <form action="/cari" method="get">
    <label for="kata">Kata kunci</label>
    <input type="search" id="kata" name="q">
    <input type="submit" value="Cari">
  </form>
  <h2>Langganan Kabar Buku Baru</h2>
  <form action="/langganan" method="post">
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <input type="submit" value="Langganan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Form pencarian dengan satu kolom kata kunci dan tombol "Cari"
  - Heading kedua beserta form langganan dengan kolom email
  - Setelah submit: address bar berubah menjadi /cari?q=... pada form pertama,
    dan halaman berpindah ke /langganan pada form kedua

Berikut peran setiap bagian file tersebut:

1. Baris 10 (<form action="/cari" method="get">): form pencarian memakai GET; form data set akan menempel pada URL sebagai query string.
2. Baris 12 (name="q"): atribut name menjadi kunci pasangan; tanpa name, isi kolom pencarian tidak pernah dikirim.
3. Baris 15 (<h2>): pemisah dua fitur pada satu halaman; kedua form bekerja sendiri-sendiri dengan action dan method masing-masing.
4. Baris 16 (<form action="/langganan" method="post">): pengiriman membawa data pada body request; URL tujuan hanya berisi path /langganan.
5. Baris 19 (required): validasi native berjalan lebih dulu; request POST hanya dibuat setelah kolom email sah.

Dengan memahami alur ini, satu klik tombol submit berubah menjadi proses berlapis yang dapat kita amati dan kendalikan. Chapter penutup section ini kembali menarik benang merahnya: menjaga seluruh mekanisme tersebut tetap bekerja untuk semua pengunjung lewat prinsip progressive enhancement.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen form
• MDN Web Docs — HTMLFormElement
• MDN Web Docs — Sending and retrieving form data
• WHATWG — HTML Living Standard: Form submission algorithm

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pencarian dan Langganan</title>
</head>
<body>
  <h1>Pencarian Buku</h1>
  <form action="/cari" method="get">
    <label for="kata">Kata kunci</label>
    <input type="search" id="kata" name="q">
    <input type="submit" value="Cari">
  </form>
  <h2>Langganan Kabar Buku Baru</h2>
  <form action="/langganan" method="post">
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <input type="submit" value="Langganan">
    </p>
  </form>
</body>
</html>