Form Action dan Method

Sampai bab ini kita menulis form tanpa merinci ke mana data pergi dan bagaimana bentuk perjalanannya. Dua atribut pada elemen form mengatur hal tersebut: action menentukan alamat tujuan data, sedangkan method menentukan cara pengirimannya. Keduanya terdengar teknis, tetapi menyentuh pengalaman pengunjung, dari hasil pencarian yang dapat dibagikan lewat URL hingga kerahasiaan kata sandi. Pada Chapter ini kita bedah action, perbandingan method GET dan POST, enctype, target, serta atribut pengganti yang dimiliki tombol submit.

Atribut Action: Alamat Tujuan #

Atribut action berisi URL yang memproses data form, misalnya www.example.com/cari untuk mesin pencari atau www.example.com/pendaftaran untuk skrip pendaftaran. URL tersebut boleh berupa path pada situs yang sama atau alamat lengkap menuju domain lain. Bila action tidak dituliskan, data dikirim ke alamat halaman tempat form itu berada. Setelah pengiriman, browser menampilkan respons server, biasanya halaman baru.

Method GET versus POST #

Tanpa atribut method, browser memakai GET secara default. Keduanya mengirim pasangan data yang sama, tetapi letaknya berbeda: GET menempelkan data pada URL sebagai query string, sedangkan POST menyelipkannya di dalam body request yang tidak terlihat pada alamat. Perbedaan letak tersebut memunculkan konsekuensi praktis berikut:

Karena sifatnya membaca, GET cocok untuk pencarian dan filter, dan URL hasilnya dapat disimpan atau dibagikan. POST dipakai bila pengiriman mengubah data di server, seperti pendaftaran akun, login, dan unggahan berkas. Data sensitif juga wajib lewat POST.

Enctype: Format Isi Pengiriman #

Atribut enctype menentukan format penyandian data pada body request, dan atribut ini hanya berlaku ketika method bernilai post. Tiga nilainya dirangkum berikut:

Form tanpa unggahan cukup memakai nilai default, sedangkan form dengan input type="file" wajib multipart/form-data seperti yang kita siapkan pada Chapter File Input.

Target untuk Hasil Respons #

Atribut target menentukan di mana respons server ditampilkan: nilai defaultnya _self menggantikan halaman saat ini, sedangkan _blank menampilkannya pada tab baru. Kebutuhan tab baru untuk respons form jarang muncul; biarkan target pada nilai defaultnya kecuali ada alasan khusus.

Formaction dan Formmethod pada Tombol #

Kadang satu form membutuhkan dua tujuan: tombol “Simpan Draf” menuju endpoint yang berbeda daripada tombol “Kirim”. Atribut formaction, formmethod, formtarget, dan formenctype pada tombol submit menimpa nilai action, method, target, dan enctype milik form, khusus untuk pengiriman lewat tombol tersebut. Form utamanya tetap berlaku bagi tombol lain, sehingga kita tidak perlu menggandakan form. Karena perilaku tombol menjadi bervariasi, menuliskan type secara eksplisit seperti pada Chapter Button semakin penting.

Contoh: Pencarian GET dan Pendaftaran POST #

File berikut memuat dua form dengan method berbeda pada satu halaman. Simpan sebagai contoh-action-method.html lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pencarian dan Pendaftaran</title>
</head>
<body>
  <h1>Cari Resep Kedai</h1>
  <form action="www.example.com/cari" method="get">
    <p>
      <label for="kata">Kata kunci</label><br>
      <input type="text" id="kata" name="q">
    </p>
    <p><button type="submit">Cari</button></p>
  </form>

  <h2>Daftar Akun Kedai</h2>
  <form action="www.example.com/pendaftaran" method="post">
    <p>
      <label for="nama">Nama lengkap</label><br>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="sandi">Kata sandi</label><br>
      <input type="password" id="sandi" name="sandi">
    </p>
    <p><button type="submit">Daftar</button></p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan dua form terpisah:
  - Form "Cari Resep Kedai"; setelah Budi mengetik "soto ayam" dan menekan
    Cari, alamat berubah menjadi www.example.com/cari?q=soto+ayam
  - Form "Daftar Akun Kedai"; setelah dikirim, alamat tetap
    www.example.com/pendaftaran dan data terkirim di dalam body request

Mari kita telaah peran setiap baris pentingnya:

1. Baris 10 (<form ...>): method="get" menempelkan isian ke URL, sehingga hasil pencarian dapat disimpan dan dibagikan.
2. Baris 13 (input name="q"): isian “soto ayam” menjadi pasangan q=soto+ayam pada URL; tanda + mewakili spasi dalam query string.
3. Baris 19 (<form ...> pendaftaran): method="post" mengirim data di dalam body request, sehingga nama, email, dan kata sandi tidak tampil pada URL.
4. Baris 22-30 (kontrol pendaftaran): ketiga kontrol membawa name agar nilainya ikut terkirim; uraian lengkapnya menjadi topik Chapter berikutnya.

Tujuan dan cara pengiriman kini jelas. Pertanyaan terakhirnya: data apa persisnya yang dikirim browser, dan bagaimana pasangan-pasangan itu tersusun? Chapter Name, Value, dan Form Data menjawabnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen form
• WHATWG — HTML Living Standard: Forms
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pencarian dan Pendaftaran</title>
</head>
<body>
  <h1>Cari Resep Kedai</h1>
  <form action="www.example.com/cari" method="get">
    <p>
      <label for="kata">Kata kunci</label><br>
      <input type="text" id="kata" name="q">
    </p>
    <p><button type="submit">Cari</button></p>
  </form>

  <h2>Daftar Akun Kedai</h2>
  <form action="www.example.com/pendaftaran" method="post">
    <p>
      <label for="nama">Nama lengkap</label><br>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="sandi">Kata sandi</label><br>
      <input type="password" id="sandi" name="sandi">
    </p>
    <p><button type="submit">Daftar</button></p>
  </form>
</body>
</html>