Form dan Input HTML: Mengumpulkan Informasi dari Pengguna

Sejauh ini, semua yang kamu buat sifatnya satu arah saja: kamu menaruh konten di halaman, lalu pengunjung tinggal membaca. Form membalik arah itu. Lewat form, sebuah website justru menerima informasi dari penggunanya — entah itu kotak login, kolom pencarian, formulir pendaftaran, atau pesan kontak. Setiap kali sebuah situs memintamu mengetik sesuatu lalu menekan tombol kirim, di situlah form bekerja.

Di sinilah HTML mulai terasa hidup dan interaktif. Kita belum akan membahas apa yang terjadi pada data setelah dikirim — itu urusan backend yang masih jauh di depan. Untuk sekarang, fokus kita cuma satu: membangun form-nya itu sendiri, mulai dari kolom isian, label, tombol, sampai cara merangkainya dengan rapi.

Elemen <form>

Semuanya berawal dari elemen <form>. Tugasnya membungkus semua kolom isian yang memang satu kesatuan:

<form action="/submit" method="post">
  <!-- kolom input ditaruh di sini -->
</form>

Ada dua atribut yang menentukan ke mana data dikirim dan dengan cara apa:

• action adalah URL tujuan data form saat tombol kirim ditekan.
• method menentukan cara pengirimannya — umumnya post (untuk data yang mengubah sesuatu, misalnya pendaftaran) atau get (untuk hal seperti pencarian, yang hasilnya muncul di URL).

Kamu nggak perlu pusing dulu soal dua atribut ini — keduanya baru terasa pentingnya kalau kamu sudah punya backend yang menerima datanya. Yang perlu kamu pegang sekarang: <form> itu wadah yang mengelompokkan kolom-kolom isianmu sekaligus memberi mereka satu tombol “kirim”.

Elemen <input>

Kalau <form> adalah wadahnya, <input> adalah ujung tombaknya. Bentuknya cuma satu tag yang self-closing, tapi wujudnya bisa berubah-ubah jadi berbagai jenis kolom isian tergantung nilai atribut type-nya:

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

Cukup satu elemen ini, dengan nilai type yang berbeda-beda, kamu sudah bisa membuat banyak sekali jenis kolom. Ini yang paling sering dipakai:

Tag-nya sama persis, tapi cukup ganti type-nya saja, hasilnya bisa berupa kolom yang benar-benar berbeda. Itulah kenapa <input> jadi elemen yang begitu penting.

Label: bagian yang dilewatkan pemula

Ada satu hal penting yang sering luput dari pemula: setiap input idealnya punya label. Label adalah teks yang menjelaskan ke pengguna sebuah kolom itu buat apa. Dan di HTML, label bukan sekadar tulisan yang ditaruh di sebelah kotaknya — ia elemen tersendiri yang punya tag, yaitu <label>.

Cara yang benar untuk menyambungkan label ke input-nya adalah lewat atribut for, yang nilainya dicocokkan dengan id milik input:

<label for="email">Alamat emailmu</label>
<input type="email" id="email" />

Bagian for="email" di label menunjuk ke id="email" di input. Sambungan kecil ini ternyata punya dua manfaat penting:

• Mengeklik labelnya langsung memfokuskan input yang bersangkutan (coba sendiri — efeknya bikin checkbox dan radio button jauh lebih gampang ditekan).
• Pembaca layar akan membacakan labelnya begitu pengguna sampai di kolom itu, sehingga mereka tahu apa yang harus diisi.

Area teks, dropdown, dan lainnya

Ada beberapa elemen kolom lain yang melengkapi dasar-dasar tadi. Untuk teks yang panjang dan butuh beberapa baris — misalnya sebuah pesan atau komentar — gunakan <textarea>, bukan input satu baris:

<label for="message">Pesanmu</label>
<textarea id="message" rows="5"></textarea>

Untuk menu dropdown, tempat pengguna memilih satu opsi dari sebuah daftar, gunakan <select> yang diisi beberapa elemen <option> di dalamnya:

<label for="country">Negara</label>
<select id="country">
  <option value="id">Indonesia</option>
  <option value="my">Malaysia</option>
  <option value="sg">Singapura</option>
</select>

Sementara untuk sekumpulan checkbox atau radio button, tiap pilihan punya input dan labelnya masing-masing:

<input type="checkbox" id="terms" />
<label for="terms">Saya setuju dengan ketentuannya</label>

Perhatikan, khusus checkbox biasanya terasa lebih natural kalau labelnya ditaruh setelah kotaknya — tapi sambungan for/id-nya tetap jalan persis sama, mau labelnya di depan atau di belakang.

Tombol

Terakhir, sebuah form tentu butuh cara untuk dikirim. Yang paling sederhana adalah tombol submit:

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

Begitu diklik, tombol ini mengirim form ke alamat yang ditunjuk action. Sebenarnya kamu juga bisa pakai <input type="submit" value="Kirim" /> yang fungsinya sama, tapi <button> jauh lebih lentur — kamu bebas menaruh ikon atau teks yang sudah ditata gayanya di dalamnya.

Ada beberapa jenis tombol yang sebaiknya kamu kenali:

• type="submit" — mengirim form (ini perilaku bawaan tombol yang ada di dalam form).
• type="reset" — mengembalikan semua kolom ke keadaan kosong.
• type="button" — sendirinya tidak melakukan apa-apa; biasanya dipakai kalau nanti kamu mau menghubungkannya ke JavaScript.

Menyatukan sebuah form lengkap

Sekarang mari kita satukan semuanya jadi sebuah form kontak yang mungil tapi sudah lengkap:

<form action="/contact" method="post">
  <label for="name">Nama</label>
  <input type="text" id="name" />

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

  <label for="message">Pesan</label>
  <textarea id="message" rows="5"></textarea>

  <label for="subscribe">
    <input type="checkbox" id="subscribe" />
    Berlangganan newsletter kami
  </label>

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

Itu sudah form yang benar-benar berfungsi. Tiap kolom punya label yang tersambung, jenis input-nya pas dengan kebutuhan masing-masing kolom, dan ada tombol kirim yang jelas. Begitu pengunjung mengisinya lalu menekan “Kirim pesan”, browser akan membungkus datanya dan mengirimnya ke /contact. Soal apa yang terjadi setelah itu — disimpan, dikirim lewat email, atau divalidasi di server — itu wilayah backend, yang akan kamu pelajari nanti.

Penutup

Sekarang kamu sudah bisa membangun form yang interaktif — sebuah lompatan besar dari sekadar konten statis:

• <form> membungkus kolom-kolom isian sekaligus menentukan ke mana (action) dan dengan cara apa (method) datanya dikirim.
• <input> itu satu tag yang bisa menjelma jadi bermacam jenis kolom lewat type-nya — text, email, password, checkbox, radio, date, file, dan masih banyak lagi. Memilih jenis yang tepat bikin form lebih gampang diisi.
• Elemen <label> yang tersambung ke input lewat for/id sifatnya wajib — demi kenyamanan sekaligus aksesibilitas. Jangan pernah dilewatkan.
• <textarea> untuk teks beberapa baris, dan <select>/<option> untuk membuat dropdown.
• <button type="submit"> untuk mengirim form-nya.

Dengan menguasai form, kamu kini sudah menyentuh semua kategori utama konten HTML: teks, tautan, gambar, dan masukan. Berikutnya, kita akan berkenalan dengan satu lagi alat penata struktur — tabel — untuk merapikan data dalam bentuk baris dan kolom.