Form HTML adalah cara pengunjung mengisi dan mengirim data ke sebuah website, login, registrasi, kolom pencarian, formulir kontak, semuanya dibangun dengan form. Kalau sebuah halaman butuh input dari orang yang membukanya, hampir pasti ada form di baliknya. Di panduan ini kamu akan belajar dari nol: apa itu <form>, cara kerja <input> beserta tipe-tipenya, kenapa setiap input wajib punya <label>, apa fungsi atribut name, dan ke mana data mengalir lewat action dan method.

Kalau kamu belum mantap dengan dasar-dasar tag HTML secara umum, ada baiknya mampir dulu ke panduan belajar HTML untuk pemula supaya konsep tag pembuka, tag penutup, dan atribut sudah nyaman buat kamu.

Form HTML Adalah… (Definisi Singkat)

Form HTML adalah sebuah wadah, ditandai tag <form>, yang membungkus satu atau lebih kolom isian, lalu mengumpulkan semua isinya dan mengirimkannya ke server saat pengunjung menekan tombol kirim. Anggap saja seperti formulir kertas: ada kolom-kolom yang diisi, lalu selembar penuh itu “diserahkan” ke satu tujuan sekaligus.

Empat elemen inti sebuah form yang akan kamu pakai terus-menerus:

<form>, wadah yang membungkus semua kolom isian.
<input>, kolom isian itu sendiri (teks, email, kotak centang, dan lain-lain).
<label>, teks penjelas yang dipasangkan ke sebuah input.
<button type="submit">, tombol yang mengirim seluruh isi form.

Contoh form paling sederhana:

<form action="/kirim" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" />
  <button type="submit">Kirim</button>
</form>

Tiga baris di dalam <form> itu sudah membentuk form yang berfungsi: sebuah label, sebuah kolom teks, dan sebuah tombol kirim. Sisanya di panduan ini hanyalah variasi dan detail dari pola dasar ini.

Mengenal input dan Atribut type

Elemen <input> adalah bintang utama dalam form, dan yang membuatnya serbaguna adalah atribut type. Satu tag yang sama, <input>, bisa berubah wujud jadi kolom teks, kotak centang, pemilih tanggal, atau penggeser, hanya dengan mengganti nilai type.

<input type="text" />
<input type="email" />
<input type="password" />
<input type="checkbox" />

Karena <input> termasuk void element (tidak punya tag penutup), kamu cukup menuliskannya sekali. Selain type, ada beberapa atribut yang hampir selalu menyertainya: name (kunci data), id (untuk dihubungkan ke label), placeholder (teks bayangan di dalam kolom), dan required (bikin kolom wajib diisi).

Daripada sekadar membaca daftarnya, lebih baik kamu coba sendiri. Pilih sebuah tipe di bawah, lihat wujud input aslinya, dan amati bagaimana nilainya berubah saat kamu mengetik atau memilih:

Coba Sendiri

type="email"

Alamat email

Memunculkan keyboard email di HP dan otomatis memeriksa formatnya harus mengandung "@".

Nilai saat ini:(kosong)

<input type="email" id="email" name="email" placeholder="[email protected]" />

Tabel Tipe input yang Wajib Kamu Tahu

Ada belasan nilai type, tapi delapan ini menutupi hampir semua kebutuhan sehari-hari. Inilah “kamus” yang perlu kamu kuasai:

Nilai `type`	Yang Ditampilkan	Validasi / Fitur Bawaan
`text`	Kolom teks satu baris	Tidak ada; menerima teks apa saja
`email`	Kolom teks + keyboard email di HP	Memeriksa formatnya harus seperti alamat email
`password`	Kolom teks yang disamarkan jadi titik	Menyembunyikan tampilan, isi tetap terkirim apa adanya
`number`	Kolom angka + tombol panah naik/turun	Hanya menerima angka; bisa dibatasi `min` dan `max`
`radio`	Tombol pilihan bulat	Satu grup (`name` sama) hanya boleh satu terpilih
`checkbox`	Kotak centang	Boleh dicentang beberapa sekaligus; nilai ya/tidak
`date`	Pemilih tanggal (kalender)	Nilai terkirim format `YYYY-MM-DD`
`submit`	Tombol pengirim form	Menekannya mengirim seluruh isi form

Perhatikan perbedaan penting antara radio dan checkbox: gunakan radio kalau pengguna hanya boleh memilih satu dari beberapa opsi (misalnya jenis kelamin), dan checkbox kalau boleh memilih lebih dari satu (misalnya hobi). Kunci grup radio ada di atribut name, semua radio dengan name yang sama otomatis jadi satu grup saling eksklusif.

label dan Atribut for: Pasangan Wajib

Setiap <input> sebaiknya punya <label> yang menjelaskan kolom itu untuk apa. Menghubungkannya gampang: beri id pada input, lalu tunjuk id yang sama dari atribut for pada label.

<label for="email">Alamat Email:</label>
<input type="email" id="email" name="email" />

Di sini for="email" pada label menunjuk ke id="email" pada input, nilainya harus sama persis. Setelah terhubung, kamu dapat dua keuntungan besar: pertama, mengklik teks label akan otomatis memfokuskan (atau mencentang) input-nya, sehingga area yang bisa diklik jadi lebih besar dan ramah jempol di HP. Kedua, screen reader akan membacakan label saat pengguna tunanetra fokus ke input itu, sehingga mereka tahu kolom ini harus diisi apa.

Atribut name: Kunci Data yang Dikirim

Kalau label untuk manusia, atribut name untuk server. name adalah kunci (key) yang menyertai nilai input saat data dikirim. Server menerima data dalam bentuk pasangan name=nilai, misalnya [email protected].

<input type="email" name="email" id="email" />

Kalau pengguna mengetik [email protected], yang sampai ke server adalah pasangan [email protected]. Tanpa atribut name, nilai input itu tidak akan ikut terkirim sama sekali, server tidak punya “nama laci” untuk menyimpannya.

action dan method: Ke Mana Data Pergi

Dua atribut pada tag <form> menentukan nasib data setelah tombol kirim ditekan: action dan method.

<form action="/daftar" method="POST">
  ...
</form>

action = alamat tujuan data. Nilainya adalah URL tempat data dikirim untuk diproses (misalnya /daftar atau /api/kontak).
method = cara pengirimannya. Dua pilihan utamanya adalah GET dan POST.

Bedanya GET dan POST penting untuk dipahami sejak awal:

GET menempelkan data ke URL, terlihat di address bar seperti ?nama=andi&email=.... Cocok untuk pencarian dan filter, di mana isian memang tidak rahasia dan boleh di-bookmark.
POST mengirim data di dalam body permintaan, tidak terlihat di URL. Cocok untuk data sensitif atau yang mengubah sesuatu di server, login, registrasi, kirim pesan.

Perbandingan GET versus POST ini punya banyak detail lain, kapan boleh di-cache, batas panjang data, sampai keamanan. Kalau kamu penasaran ingin memahaminya lebih dalam, baca pembahasan tuntas di GET vs POST adalah.

Menyatukan Semuanya: Form Kontak Utuh

Sekarang mari gabungkan semua konsep, <form> dengan action dan method, beberapa <input> dengan tipe berbeda, <label> yang terhubung lewat for, atribut name, plus required dan placeholder, menjadi satu form kontak yang benar-benar bisa dipakai:

<form action="/kirim-pesan" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" placeholder="Nama lengkap" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="[email protected]" required />

  <label for="umur">Umur:</label>
  <input type="number" id="umur" name="umur" min="1" max="120" />

  <label for="lahir">Tanggal lahir:</label>
  <input type="date" id="lahir" name="lahir" />

  <button type="submit">Kirim Pesan</button>
</form>

Perhatikan bagaimana semuanya bekerja bersama: setiap <label> punya for yang cocok dengan id input di bawahnya, setiap <input> yang datanya dibutuhkan punya name, required membuat nama dan email wajib diisi (validasi gratis tanpa JavaScript), dan placeholder memberi contoh isian yang samar di dalam kolom. Tombol <button type="submit"> di akhir mengumpulkan semuanya dan mengirim ke /kirim-pesan dengan metode POST.

Form adalah salah satu bagian paling interaktif dari HTML, dan setelah ini, langkah alaminya adalah menghubungkan halaman-halaman lewat hyperlink dan memahami betul bagaimana data mengalir lewat GET vs POST. Kalau mau langsung praktik membangun form sambil melihat hasilnya, coba materi form input dan label interaktif, kamu bisa bongkar-pasang input, label, dan tipe-tipenya lalu langsung melihat formnya terbentuk.

Cek Pemahaman

Atribut apa pada sebuah input yang menjadi KUNCI (key) saat data dikirim ke server?

FAQ Form HTML

Apa fungsi atribut for pada label?

Atribut for menghubungkan sebuah <label> ke sebuah <input> berdasarkan id. Kamu menulis for="email" pada label dan id="email" pada input, nilainya harus sama persis. Setelah terhubung, mengklik teks label akan memfokuskan input-nya, dan screen reader akan membacakan label itu saat pengguna fokus ke input, sehingga form jadi lebih mudah diakses.

Apa bedanya atribut id dan name pada input?

Keduanya sering diisi nilai yang sama sehingga bikin bingung, tapi fungsinya berbeda. id dipakai di dalam halaman, untuk menghubungkan label lewat for, atau untuk ditarget CSS dan JavaScript. name dipakai saat pengiriman, ia jadi kunci data yang dikirim ke server. Input tanpa name tidak akan terkirim, sedangkan input tanpa id masih bisa terkirim (tapi labelnya tidak bisa dihubungkan).

Kapan pakai method GET dan kapan POST?

Pakai GET untuk form yang isinya tidak rahasia dan sekadar mengambil data, seperti kotak pencarian atau filter, datanya boleh terlihat di URL dan bisa di-bookmark. Pakai POST untuk data sensitif atau yang mengubah sesuatu di server, seperti login, registrasi, atau kirim pesan, datanya disembunyikan di dalam body permintaan. Aturan aman: jangan pernah kirim kata sandi dengan GET.

Apakah input tanpa label tetap berfungsi?

Secara teknis input tanpa <label> tetap bisa diketik dan datanya tetap terkirim (asalkan punya name). Tapi ini praktik buruk: pengguna screen reader tidak tahu kolom itu untuk apa, dan area yang bisa diklik jadi lebih kecil. Selalu pasangkan setiap input dengan label lewat for dan id.

Langkah Selanjutnya

Sekarang kamu sudah paham fondasi form HTML: <form> sebagai wadah, <input> dengan atribut type yang menentukan wujudnya, <label for> yang menghubungkan teks ke input demi aksesibilitas, name sebagai kunci data, <button type="submit"> untuk mengirim, serta action dan method yang menentukan ke mana dan bagaimana data pergi. Yang tersisa adalah latihan sampai kamu bisa menulisnya tanpa mencontek.

Cara tercepat menempelkannya adalah praktik langsung. Buka materi form input dan label interaktif dan bangun formmu sendiri, mulai dari satu kolom teks sederhana, tambahkan label, lalu coba tipe input lain seperti email dan date. Begitu form terasa nyaman, langkah berikutnya adalah mempercantiknya dengan CSS dan memvalidasi isinya lebih ketat dengan JavaScript. Selamat mencoba!