Action dan Method

Elemen form mengumpulkan data, lalu menghadapi dua keputusan: ke mana data dikirim, dan dengan cara apa. Keduanya diatur oleh dua atribut pada tag pembuka form — action menentukan alamat tujuan, method menentukan moda pengiriman.

Pilihan method punya konsekuensi praktis yang terasa langsung: dengan get, data menempel pada URL dan terlihat siapa pun yang membaca address bar; dengan post, data bersembunyi di badan permintaan. Chapter ini membedah keduanya sampai ke contoh datanya.

action: Alamat Tujuan Data #

Aturannya: action diisi URL tempat data form diproses — bisa alamat mutlak seperti https://kedai.example.com/daftar maupun alamat relatif seperti /daftar-kelas. Mekanismenya: saat tombol submit ditekan, browser mengarahkan permintaan ke URL tersebut. Bila action tidak ditulis, data dikirim kembali ke URL halaman saat ini — perilaku yang berguna untuk pencarian pada halaman yang sama.

method: get dan post #

Dua nilai method yang paling sering kita pakai:

• get — data ditempel ke URL tujuan sebagai query string, deretan pasangan name=value setelah tanda tanya. Data terlihat pada address bar, tersimpan di riwayat browser, dan panjangnya terbatas oleh batas URL.
• post — data ditempatkan pada body permintaan, terpisah dari URL. Data tidak tampak di address bar, tidak terbatas panjang URL, dan cocok untuk data besar atau sensitif.

Perbandingan lengkapnya:

Contoh: Pencarian dengan get #

Pencarian menu adalah contoh klasik get — hasilnya layak dibagikan sebagai tautan:

<form action="/cari" method="get">
  <label for="kata">Cari menu kopi</label>
  <input type="search" id="kata" name="kata">
  <button type="submit">Cari</button>
</form>

Data yang terkirim saat pengguna mencari “kopi susu”:

GET /cari?kata=kopi+susu

Ketik kata kunci apa pun lalu tekan Cari pada demo — URL lengkap yang diminta browser tampil di bawah form: seluruh data menempel setelah tanda tanya, spasi menjadi +. Bentuk nyata method="get": query string pada alamat tujuan.

Pada demo, action diarahkan ke https://example.com/cari — domain cadangan resmi — dan skrip kecil menahan perpindahan agar URL yang diminta tetap terlihat; pada halaman sungguhan tanpa skrip, browser membuka alamat itu apa adanya.

Mari kita telaah hasil di atas:

1. ?kata=kopi+susu: seluruh data form menempel pada URL — kunci kata berasal dari atribut name pada input.
2. Tanda +: spasi dienkode menjadi + agar URL tetap sah; tanda @ pada email menjadi %40, titik dua menjadi %3A.

Contoh: Pendaftaran dengan post #

Data pendaftaran memuat informasi pribadi dan tidak patut tampil pada URL. Untuk itu kita memakai post:

<form action="/daftar-kelas" method="post">
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" name="nama">
  <label for="surel">Alamat email</label>
  <input type="email" id="surel" name="surel">
  <button type="submit">Daftar</button>
</form>

Data yang terkirim saat Dewi mendaftar:

POST /daftar-kelas
nama=Dewi&surel=dewi%40example.com

Mari kita telaah kode dan hasilnya:

1. Baris 1 (method="post"): data berpindah ke body permintaan — URL /daftar-kelas tetap polos tanpa query string.
2. Baris 3 dan 5 (name): kunci nama dan surel menjadi pasangan name=value pada body.
3. %40: karakter @ dienkode saat dikirim — mekanisme yang sama dengan + pada spasi di get.

Ringkasan #

• action menentukan URL tujuan data; tanpa action, data kembali ke URL halaman saat ini.
• get menempelkan data pada URL — terlihat, bisa dibagikan, terbatas panjang.
• post menaruh data di body permintaan — tidak tampak, bebas panjang, untuk data besar atau sensitif.
• Enkode URL mengubah karakter khusus: spasi menjadi + atau %20, @ menjadi %40.

Chapter berikutnya masuk ke kontrol yang paling sering kita tulis: elemen input.