formactionmethodMenengah3 mnt baca

Form Dasar: form, action, method

Pahami cara kerja form: action, method GET vs POST, dan tombol submit.

Kenapa Form Itu Ada: Dari Kertas ke Layar

Bayangkan kamu datang ke loket pendaftaran ekstrakurikuler. Petugas menyodorkan selembar formulir kertas: tulis nama, pilih divisi, bubuhkan tanda tangan, lalu serahkan kembali. Tanpa formulir itu, petugas tidak tahu apa maumu. Halaman web punya masalah yang persis sama. HTML pada dasarnya pasif, ia hanya menampilkan tulisan dan gambar. Supaya pengunjung bisa mengirim sesuatu ke server (mendaftar akun, login, memesan makanan, mengirim pesan), browser butuh cara baku untuk mengemas data dan mengantarnya. Itulah <form>: amplop digital yang mengumpulkan semua isian di dalamnya, membungkusnya rapi, lalu mengirimkannya ke alamat tujuan.

Contoh 1: Form Paling Sederhana

html

<form action="" method="get">
  <input type="text" name="nama" />
  <button type="submit">Kirim</button>
</form>

Saat tombol diklik, browser melakukan tiga hal otomatis: mengumpulkan semua input yang punya atribut name, menyusunnya menjadi pasangan nama=nilai, lalu mengirimkannya ke alamat di action memakai cara di method. Kamu tidak menulis satu baris pun logika pengiriman, browser yang mengurus semuanya.

Contoh 2: Form Pendaftaran yang Lebih Nyata

html

<form action="/daftar" method="post">
  <p>Nama: <input type="text" name="nama" /></p>
  <p>Email: <input type="email" name="email" /></p>
  <p>Kota: <input type="text" name="kota" /></p>
  <button type="submit">Daftar Sekarang</button>
</form>

Di sini action="/daftar" berarti data dikirim ke alamat /daftar di server yang sama, dan method="post" berarti datanya disembunyikan dari URL. Perhatikan setiap input punya name yang berbeda: nama, email, kota. Tiga name ini menjadi tiga kunci data yang diterima server, persis seperti tiga kolom berbeda di formulir kertas.

GET vs POST: Pilih Jalur yang Tepat

	GET	POST
Data terlihat di URL	Ya (`?nama=Andi`)	Tidak
Cocok untuk	pencarian, filter	menyimpan data, login
Bisa di-bookmark	Ya	Tidak

Aturan praktisnya sederhana. Kalau aksinya mengubah sesuatu di server (mendaftar, membeli, menghapus), pakai POST. Kalau aksinya cuma membaca (mencari, memfilter daftar), GET boleh dipakai karena hasilnya bisa dibagikan lewat link.

Kesalahan Umum: Tiga Jebakan Klasik

1. Lupa atribut name. Input tanpa name tidak ikut terkirim, sebesar apa pun nilainya. Browser hanya mengirim input yang punya nama, titik.

html

<!-- SALAH: nilainya hilang di jalan -->
<input type="text" placeholder="Nama" />

<!-- BENAR: terkirim sebagai nama=Andi -->
<input type="text" name="nama" placeholder="Nama" />

2. Login pakai GET. Password yang dikirim lewat GET akan nongol di URL, tersimpan di riwayat browser, dan bisa bocor lewat screenshot. Data sensitif apa pun wajib lewat POST.

3. Tombol tanpa type. <button> polos di dalam form otomatis berperilaku sebagai type="submit". Kalau kamu bermaksud membuat tombol biasa, tulis type="button" secara eksplisit.

Catatan teknis: action="" (kosong) berarti form dikirim ke URL halaman yang sedang dibuka. Ini berguna saat satu halaman menangani tampilan sekaligus pemrosesan form, pola yang umum di PHP dan framework lain.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Pencarian vs Login

Buat dua form: (1) form pencarian dengan method="get" dan satu input name="q"; (2) form login dengan method="post", input name="email" dan name="password", plus tombol submit. Tantangan ini melatih insting memilih method yang tepat, skill yang kamu pakai setiap kali membangun form login, pencarian, atau checkout di proyek nyata.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Dua Form</title>
</head>
<body>
  <!-- dua form di sini -->
</body>
</html>

Open Sandbox