Tutorial HTML / Struktur formulir dan perbedaan GET dengan POST

Sebuah form menggabungkan kontrol yang nilainya dikirim oleh pengguna. Untuk memahami ke mana data dikirim, bedakan atribut name dari kontrol, tujuan di action, dan metode permintaan di method. HTML dapat membuat antarmuka input, tetapi menyimpan atau mengambil data membutuhkan handler sisi server.

Buatlah formulir pencarian kecil

Contoh ini menerima istilah pencarian. Gantilah /search dengan endpoint yang sebenarnya sebelum menggunakannya di situs web. Atribut for dan id menghubungkan label dengan kolom input, sedangkan name menentukan kunci data yang dikirim.

<form action="/search" method="get">
  <label for="keyword">Istilah yang dicari</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Cari</button>
</form>

Atribut for dari label sesuai dengan id dari bidang input dan menetapkan labelnya. name="q" mengidentifikasi nilai dalam data yang dikirimkan. Memasukkan "HTML" biasanya menghasilkan URL yang mengandung ?q=HTML. id tanpa name masih dapat menghubungkan label, tetapi nilai bidang biasanya tidak akan dimasukkan dalam pengiriman.

action menunjukkan tujuan; method memilih bagaimana browser mengirimkan nilai. Jika keduanya dihilangkan, formulir secara default akan dikirim dengan GET ke URL saat ini. Coba sebuah istilah dengan spasi atau huruf non-ASCII: bilah alamat mungkin menampilkan representasi yang dikodekan dari karakter-karakter ini. Ini adalah format transportasi dan bukan tanda bahwa input hilang.

Pilih GET atau POST

GET menempatkan data formulir di string kueri URL. Ini cocok untuk pencarian dan filter yang dapat disimpan atau dibagikan pengguna sebagai favorit. Jangan gunakan ini untuk mengirim kata sandi atau nilai sensitif lainnya, karena data terlihat di URL. POST mengirim data formulir di badan permintaan dan sering digunakan untuk operasi yang mengubah status server, seperti membuat akun atau mengirim pesan. POST sendiri tidak mengenkripsi data; transmisi sensitif memerlukan HTTPS dan manajemen yang tepat di sisi server.

<form action="/contact" method="post">
  <label for="message">Pesan</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Kirim</button>
</form>

Path /contact adalah ilustratif; tanpa handler, itu dapat mengembalikan kesalahan. Untuk mencoba GET pada dokumen saat ini, mulailah dengan formulir pertama, pertahankan method="get" dan hapus atribut action. Garis miring awal merujuk ke root situs web dan bukan ke endpoint yang berfungsi pada file lokal. Jangan mengirim informasi pribadi asli ke endpoint contoh.

Periksa data sebelum mengirimnya

Simpan contoh lengkapnya di inspect-form.html. Menghilangkan action menargetkan dokumen saat ini. Tindakan yang ditulis secara eksplisit harus berupa URL yang valid dan tidak kosong, jadi hilangkan atribut tersebut, bukannya menulis action="" untuk menandai halaman saat ini.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan data formulir</title>
</head>
<body>
  <h1>Periksa kolom yang dikirim</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">Istilah yang dicari</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">Jumlah hasil maksimal</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">Kupon tidak tersedia</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> Pesan</label></p>
    <button type="submit">Periksa nilai di URL</button>
  </form>
</body>
</html>

Setelah membuka file, jalankan baris ini di konsol alat pengembang untuk memeriksa nama dan nilai dari kolom saat ini. FormData adalah antarmuka pemrograman browser (API, Application Programming Interface) yang membuat daftar pasangan nama-nilai dari formulir. Perintah ini sendiri tidak mengirim data melalui jaringan dan tidak memicu validasi batasan.

Array.from(new FormData(document.getElementById("inspect-form")).entries())

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

Awalnya limit yang hanya bisa dibaca disertakan dan coupon yang dinonaktifkan diabaikan. Hapus centang pada "Berita" dan entri tersebut juga akan hilang. Menghapus kata kunci pencarian tetap memungkinkan Anda memeriksa nilai q yang kosong, tetapi tombol kirim akan memicu validasi yang diperlukan. Bandingkan pembuatan daftar data dengan pemeriksaan interaktif saat pengiriman.

Pada halaman yang disediakan oleh server, buka jaringan, kirim, dan periksa permintaan yang sesuai. Dokumen lokal file:// tidak setara dengan GET atau POST HTTP ke server. 404 atau 405 dapat mencerminkan tujuan atau metode yang didukung; menghapus nama bidang atau atribut validasi tidak akan menyelesaikan masalah ini.

Aturan untuk atribut pengiriman HTML · Konstruktor FormData di MDN

Mengapa sebuah field bisa saja hilang dalam data yang dikirim?

Kontrol yang dinonaktifkan tidak dapat diubah dan tidak dikirim. Jika Anda ingin agar nilai yang tidak bisa diedit tetap dikirim, periksa apakah tipe kontrol ini mendukung readonly. Hanya kotak centang yang dicentang dan tombol radio yang dipilih yang menyertakan nilai mereka; field yang dinonaktifkan akan dilewati. Unggah file memerlukan pengaturan formulir tambahan dan pemrosesan sisi server; menambahkan field file ke contoh ini saja tidak cukup. Uji batasan yang menghalangi pengiriman melalui validasi formulir dengan field wajib, panjang, dan batas rentang.

Jika hasilnya tidak seperti yang diharapkan, periksa terlebih dahulu name dari setiap elemen kontrol, kemudian apakah elemen kontrol dipilih dan tidak dinonaktifkan, dan selanjutnya apakah URL dan metode sesuai dengan server. Panel jaringan di browser dapat menampilkan permintaan, bahkan jika server merespons dengan kesalahan. Permintaan yang benar tidak berarti bahwa server telah menyimpan nilainya. Lihat dokumen referensi formulir MDN untuk detail tentang pengiriman.