Elemen form

Elemen form adalah wadah yang mengumpulkan masukan pengguna dan mengirimkannya ke satu tujuan sebagai satu kesatuan. Selama isinya hanya diperlihatkan di layar, formulir belum menunaikan tugas utamanya, karena nilai yang diketik pengguna perlu sampai ke server untuk diproses lebih lanjut. Topik ini membahas atribut action dan method, perbedaan GET dan POST, anatomi pengiriman berupa pasangan name=value, peran atribut name sebagai kunci data, serta enctype. Setelah membacanya, formulir yang dibangun dapat dipastikan mengirimkan datanya dalam bentuk yang benar.

Elemen form dan atribut action#

Elemen form menetapkan batas lingkup sebuah formulir. Semua kontrol yang berada di dalamnya, seperti input, select, dan textarea, menjadi bagian dari formulir terdekat yang membungkusnya. Saat pengguna menekan tombol kirim, browser mengirimkan seluruh kontrol itu sekaligus, bukan satu per satu. Atribut action menetapkan URL tujuan pengiriman, yaitu alamat yang menerima data formulir.

<form action="/cari" method="get">
  <p>
    <label for="kata-kunci">Kata kunci</label>
    <input id="kata-kunci" name="kata-kunci" type="text">
  </p>
  <p><button type="submit">Cari</button></p>
</form>

Nilai action pada contoh adalah /cari, yaitu jalur relatif terhadap halaman yang memuat formulirnya, sehingga formulir di halaman https://perpustakaan.test/katalog mengirimkan data ke https://perpustakaan.test/cari. Nilai tersebut juga boleh berupa URL lengkap ke situs lain. Apabila atribut action tidak ditulis atau bernilai kosong, formulir dikirimkan ke URL halaman itu sendiri, dan perilaku ini banyak digunakan aplikasi yang memproses formulirnya di alamat yang sama. Pengiriman baru terjadi melalui tombol type="submit" atau penekanan Enter pada kontrol teks, sehingga tombol biasa tanpa tipe tersebut tidak mengirimkan apa pun.

method GET dan POST#

Atribut method menetapkan cara data dibungkus ke dalam permintaan HTTP. Dua nilai yang paling sering digunakan adalah get dan post. Pada GET, data ditempelkan ke akhir URL sebagai query string, yaitu deret pasangan yang diawali tanda tanya dan dipisahkan tanda &. Pada POST, data diletakkan di badan permintaan, sehingga tidak terlihat pada URL. Pilihan keduanya mengikuti sifat aksinya, bukan sekadar selera.

Sebagai kaidah praktis, GET digunakan apabila pengiriman hanya meminta data, misalnya mencari katalog atau menyaring tabel, sedangkan POST digunakan apabila pengiriman mengubah keadaan di server, misalnya menyimpan catatan baru. Alasan pengunggahan berkas selalu menuntut POST akan jelas pada pembahasan enctype di bawah.

Diagram berikut merangkum alur pengiriman formulir dari browser sampai server, termasuk perbedaan tempat data pada kedua method tersebut.

Anatomi pengiriman pasangan name=value#

Saat formulir dikirim, browser membentuk daftar pasangan name=value dari kontrol-kontrol di dalamnya, dan daftar itulah satu-satunya data yang benar-benar dikirim. Pasangan terbentuk dari atribut name sebagai kuncinya dan nilai terkini kontrol sebagai nilainya. Tidak semua kontrol ikut terkirim, dan aturan pengecualiannya perlu dihafal karena sering mengejutkan. Kontrol tanpa atribut name tidak pernah terkirim, kontrol beratribut disabled tidak terkirim, serta kotak centang dan tombol radio hanya terkirim apabila dalam keadaan tercentang. Tombol kirim yang ditekan pun ikut menyumbangkan pasangannya apabila tombol itu beratribut name.

Skrip berikut meniru pekerjaan browser pada method GET, yaitu menyusun pasangan menjadi query string yang menempel di URL. Kelas URLSearchParams menangani pengodean karakter sekaligus, sehingga spasi pada kopi susu berubah menjadi tanda +.

// Menyusun query string seperti yang dikerjakan browser pada method GET
const dataFormulir = [
  ["kata-kunci", "kopi susu"],
  ["urutkan", "termurah"],
  ["halaman", "2"],
];

const parameter = new URLSearchParams(dataFormulir);
console.log(parameter.toString());
console.log("URL permintaannya menjadi:");
console.log("https://perpustakaan.test/cari?" + parameter.toString());

kata-kunci=kopi+susu&urutkan=termurah&halaman=2
URL permintaannya menjadi:
https://perpustakaan.test/cari?kata-kunci=kopi+susu&urutkan=termurah&halaman=2

Keluaran tersebut persis seperti URL hasil pengiriman formulir pencarian yang nyata, sehingga setiap karakter pengodeannya dapat diperiksa langsung di bilah alamat. Di sinilah kegunaan GET sebagai method pencarian terasa, karena hasil pencarian yang sama dapat dibukumarka dan dibagikan hanya dengan menyalin URL-nya.

Peran atribut name sebagai kunci data#

Atribut name adalah satu-satunya identitas kontrol yang dikenal server. Atribut id dan name sama-sama menjadi identitas kontrol, dan keduanya sering tertukar peran, sehingga pembedanya perlu ditegaskan. Atribut id berlaku di dalam dokumen untuk label, CSS, dan JavaScript, sedangkan name berlaku pada pengiriman sebagai kunci pasangan data. Kontrol yang hanya dibutuhkan untuk keperluan tampilan atau skrip boleh dibiarkan tanpa name, tetapi kontrol yang nilainya harus diproses server wajib memilikinya.

Satu nama juga boleh digunakan lebih dari satu kontrol, dan pengulangan itu memang diperlukan pada tombol radio serta kotak centang yang dikelompokkan. Browser mengirimkan setiap pasangan secara berurutan, sehingga server menerima kelas=A&kelas=B apabila dua kontrol bernama kelas terkirim bersamaan. Banyak kerangka kerja backend mengumpulkan pasangan bernama sama menjadi satu array, dan pola inilah yang memungkinkan satu pertanyaan menyimpan banyak jawaban sekaligus.

enctype dan jenis konten pengiriman#

Atribut enctype menetapkan jenis konten (content type) badan permintaan pada method POST. Nilai bawaannya adalah application/x-www-form-urlencoded, yaitu bentuk yang sama dengan query string pada contoh di atas. Nilai kedua adalah multipart/form-data, yang memecah badan permintaan menjadi beberapa bagian sehingga berkas dapat ikut terkirim dengan utuh. Nilai ketiga, text/plain, mengirimkan data sebagai teks polos dan praktisnya hanya berguna untuk pengujian.

Pengunggahan berkas melalui input type="file" wajib menggunakan multipart/form-data, karena pengodean bawaan akan merusak isi berkas biner. Konfigurasi pada elemen form memuat dua atribut sekaligus, yaitu method="post" dan enctype="multipart/form-data". Kombinasi ini sering terlewat, dan gejalanya konsisten, yaitu server hanya menerima nama berkasnya tanpa isinya.

Berkas utuh formulir lengkap#

Berkas berikut merangkum unsur-unsur topik ini dalam satu halaman. Formulir pertama menggunakan GET karena tugasnya mencari katalog, sedangkan formulir kedua menggunakan POST karena menyimpan catatan, lengkap dengan kontrol hidden yang menyumbangkan catatan-id=24 tanpa terlihat di layar. Kedua formulir berdiri sendiri dan tidak saling mengganggu karena masing-masing memiliki elemen form sendiri.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh elemen form</title>
</head>
<body>
  <h1>Katalog perpustakaan</h1>

  <form action="/cari" method="get">
    <p>
      <label for="kata-kunci">Kata kunci</label>
      <input id="kata-kunci" name="kata-kunci" type="text">
    </p>
    <p>
      <label for="kategori">Kategori</label>
      <select id="kategori" name="kategori">
        <option value="semua">Semua kategori</option>
        <option value="buku">Buku</option>
        <option value="majalah">Majalah</option>
      </select>
    </p>
    <p><button type="submit">Cari</button></p>
  </form>

  <form action="/catatan" method="post">
    <input type="hidden" name="catatan-id" value="24">
    <p>
      <label for="isi">Catatan peminjaman</label>
      <textarea id="isi" name="isi" rows="4" cols="40"></textarea>
    </p>
    <p><button type="submit">Simpan catatan</button></p>
  </form>
</body>
</html>

Simpan berkasnya, buka di browser, lalu tekan tombol Cari dengan beberapa kata kunci. Karena alamat tujuan pengiriman belum memiliki server, halaman tujuan kemungkinan menampilkan pesan tidak ditemukan, tetapi bilah alamat tetap memperlihatkan pasangan kata-kunci=...&kategori=... yang menempel pada URL. Bagian tab Network pada DevTools juga memperlihatkan permintaan yang terbentuk, lengkap dengan method dan letak datanya.

Kesalahan umum#

Empat kesalahan berikut paling sering muncul saat formulir pertama dibangun, dan semuanya berkaitan dengan anatomi pengiriman.

• Lupa memberi atribut name pada kontrol. Formulir tetap tampil normal, tetapi nilai kontrol itu tidak pernah sampai ke server karena tidak menjadi kunci pasangan mana pun. Beri name pada setiap kontrol yang datanya diproses.
• Menggunakan GET untuk aksi yang mengubah data, misalnya menghapus catatan lewat tautan berisi formulir kecil. URL yang mudah dibukumarka justru memicu pengulangan aksi, dan browser biasanya mengirim ulang tanpa peringatan jelas. Gunakan POST untuk aksi semacam ini.
• Mengharapkan kotak centang yang tidak tercentang mengirimkan nilai false. Kontrol itu tidak terkirim sama sekali, sehingga server tidak menerima kuncinya. Tangani ketiadaan kunci tersebut di sisi server atau tambahkan kontrol hidden pendamping.
• Mengunggah berkas tanpa enctype="multipart/form-data". Server hanya menerima nama berkasnya, sedangkan isinya hilang karena badan permintaan dikodekan seperti teks biasa.

Ringkasan#

• Atribut action menetapkan URL tujuan pengiriman, dan method menetapkan cara data dibungkus, yaitu GET pada query string URL atau POST di badan permintaan.
• Pengiriman berisi pasangan name=value, dan kontrol hanya menyumbang pasangan apabila memiliki name, tidak disabled, serta tercentang untuk kotak centang dan tombol radio.
• Atribut name adalah kunci data bagi server, sedangkan id hanya berlaku di dalam dokumen untuk label, CSS, dan JavaScript.
• enctype="multipart/form-data" wajib disertakan pada POST yang mengunggah berkas, sedangkan pengodean bawaan cukup untuk data teks.

Referensi#

• Elemen form — MDN — Dokumentasi atribut action, method, dan enctype beserta contohnya.
• Form submission — HTML Living Standard (WHATWG) — Spesifikasi proses pembentukan pasangan data formulir oleh browser.
• Learn Forms: web.dev — Kursus formulir resmi Google yang membahas action, method, dan anatomi pengiriman.