Belajar HTML - Cara Membuat Formulir

Halo teman-teman,
Setelah sebelumnya kita membahas tentang elemen <head> di HTML, sekarang kita akan belajar cara membuat formulir HTML atau yang biasa disebut HTML Forms.

Formulir ini berguna banget untuk mengumpulkan data dari pengunjung website — mulai dari nama, email, komentar, sampai data pemesanan produk. Kalau kamu pernah isi form daftar akun atau kontak kami di suatu situs, itu semua dibuat menggunakan HTML Form.

Yuk kita pelajari langkah demi langkah cara membuat form, sekaligus memahami elemen-elemennya agar kamu bisa membuat form yang fungsional dan rapi!

Apa Itu `<form>`?

<form> adalah elemen HTML yang digunakan untuk membuat formulir. Di dalamnya kita bisa menambahkan berbagai jenis input seperti teks, tombol, checkbox, radio button, dan lain sebagainya.

<form action="/proses.php" method="post">
  <!-- elemen input di sini -->
</form>

Atribut action menunjukkan ke mana data dikirim saat form disubmit. Sementara method menentukan cara pengiriman datanya. Umumnya menggunakan get untuk permintaan yang ringan dan tidak sensitif, serta post untuk data yang lebih kompleks dan aman.

Kalau kamu membuat formulir login atau pendaftaran, maka method="post" sangat disarankan karena lebih aman dari sisi privasi. Data seperti kata sandi tidak akan terlihat di URL.

Elemen Formulir yang Sering Digunakan

Berikut ini adalah beberapa elemen penting yang sering muncul di dalam form HTML:

1. Input Teks

<input type="text" name="nama">

Digunakan untuk input teks biasa seperti nama, alamat, atau judul. Kamu juga bisa menambahkan placeholder untuk memberi petunjuk di dalam kotaknya:

<input type="text" name="nama" placeholder="Masukkan nama lengkap">

Kamu juga bisa mengatur panjang maksimal input dengan maxlength:

<input type="text" name="nama" maxlength="30">

2. Input Email

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

Jenis input ini membantu browser memvalidasi apakah format email yang dimasukkan benar atau tidak. Sangat cocok untuk kolom pendaftaran atau kontak.

3. Input Password

<input type="password" name="kata_sandi">

Untuk input kata sandi. Karakter yang diketik tidak akan terlihat, hanya muncul sebagai titik atau bintang. Kamu juga bisa kombinasikan dengan validasi JavaScript untuk cek panjang atau kekuatan password.

4. Radio Button

<input type="radio" name="gender" value="pria"> Pria
<input type="radio" name="gender" value="wanita"> Wanita

Radio button cocok digunakan untuk pilihan tunggal dari beberapa opsi. Misalnya memilih jenis kelamin, status, atau metode pembayaran.

5. Checkbox

<input type="checkbox" name="hobi" value="membaca"> Membaca
<input type="checkbox" name="hobi" value="menulis"> Menulis

Checkbox digunakan jika pengguna boleh memilih lebih dari satu pilihan. Ideal untuk survei atau minat pengguna.

6. Dropdown (Select)

<select name="kota">
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
</select>

Dropdown cocok untuk daftar pilihan yang panjang. Kamu juga bisa tambahkan selected untuk pilihan default.

7. Textarea

<textarea name="pesan" rows="5" cols="30"></textarea>

Textarea digunakan untuk input teks panjang seperti komentar, deskripsi, atau pesan. Sangat berguna saat kamu butuh input yang lebih fleksibel dari pengguna.

8. Tombol Submit

<input type="submit" value="Kirim">

Tombol submit adalah pemicu untuk mengirim semua data yang telah diisi dalam form. Data akan dikirim ke URL yang tercantum di atribut action. Kamu juga bisa menambahkan button dengan style yang lebih menarik.

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

Contoh Form Lengkap

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

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

  <label for="pesan">Pesan:</label><br>
  <textarea id="pesan" name="pesan" rows="4" cols="30" placeholder="Tulis pesan kamu di sini..."></textarea><br><br>

  <input type="submit" value="Kirim">
</form>

Form ini sudah cukup untuk membuat halaman kontak atau form feedback sederhana. Kamu bisa mengembangkannya lebih lanjut sesuai kebutuhan.

Tips Membuat Form yang Baik

Gunakan atribut required untuk memastikan input wajib diisi sebelum form dikirim.
Tambahkan label yang sesuai agar pengguna tahu data apa yang harus diisi.
Gunakan fieldset dan legend untuk mengelompokkan form panjang menjadi beberapa bagian.
Validasi input di sisi klien menggunakan JavaScript untuk pengalaman pengguna yang lebih baik.
Tampilkan pesan sukses atau error setelah data dikirim agar pengguna tahu apa yang terjadi.
Berikan umpan balik visual seperti highlight merah saat field kosong atau tidak valid.
Gunakan gaya CSS sederhana agar form terlihat lebih menarik dan mudah digunakan.

Apa yang Terjadi Setelah Form Dikirim?

Saat tombol submit diklik, data dari setiap elemen dikumpulkan dan dikirim ke URL tujuan yang ada di atribut action. Kalau kamu menggunakan method="post", maka data tidak terlihat di URL. Tapi jika kamu pakai get, data akan terlihat sebagai parameter URL seperti:

/kirim?nama=Dindin&email=dindin@example.com&pesan=Halo

Biasanya, di sisi server, form akan diproses dengan PHP, Node.js, Python, atau backend lainnya. Tapi di sisi HTML, yang perlu kamu siapkan adalah struktur form yang benar. Untuk testing, kamu juga bisa kirim data ke layanan gratis seperti Formspree atau Netlify Forms.

Apa Bedanya Submit dan Button Biasa?

<input type="submit"> atau <button type="submit"> akan otomatis mengirim form. Sedangkan <button> biasa tanpa type="submit" hanya tombol biasa dan perlu diberi aksi dengan JavaScript.

Nah, sekarang kamu sudah tahu cara membuat formulir HTML dari yang sederhana sampai lengkap. Tinggal latihan dan coba buat form versimu sendiri!

Di materi selanjutnya, kita akan membahas tentang kesalahan umum yang sering terjadi saat belajar HTML. Ini penting agar kamu bisa lebih percaya diri saat membuat halaman web. Sampai ketemu lagi di pembahasan berikutnya!