Dalam sebuah website, formulir (form) merupakan salah satu komponen terpenting karena digunakan untuk mengumpulkan data dari pengguna, seperti:
-
Form login & registrasi
-
Form kontak
-
Form pencarian
-
Form pengisian data (mahasiswa, pegawai, pasien, dll)
Perlu dipahami bahwa HTML hanya menampilkan dan mengumpulkan data, sedangkan pemrosesan data dilakukan oleh teknologi lain seperti PHP, JavaScript, atau database.
Elemen <form>
Semua elemen formulir wajib dibungkus oleh tag <form>.
<form action="proses.php" method="post"> <!-- elemen form --> </form>
Atribut penting <form>
| Atribut | Fungsi |
|---|---|
action |
URL tujuan pengiriman data |
method |
Metode pengiriman data (get / post) |
enctype |
Digunakan untuk upload file |
Elemen Kontrol Formulir
Berikut adalah elemen-elemen utama dalam form HTML.
1️⃣ <label>
Digunakan untuk memberi keterangan pada input.
<label for="nama">Nama Lengkap</label>
📌 Nilai for harus sama dengan id input yang dituju.
2️⃣ <input>
Elemen input paling sering digunakan.
Jenis-jenis <input>
| Type | Fungsi |
|---|---|
text |
Teks biasa |
email |
|
password |
Kata sandi |
number |
Angka |
date |
Tanggal |
radio |
Pilihan tunggal |
checkbox |
Pilihan jamak |
file |
Upload file |
hidden |
Data tersembunyi |
submit |
Kirim form |
reset |
Reset form |
button |
Tombol umum |
Contoh <input> text
<input type="text" name="nama" id="nama" placeholder="Masukkan nama lengkap">
3️⃣ <textarea>
Digunakan untuk input teks panjang seperti alamat atau komentar.
<textarea name="alamat" id="alamat" rows="5" cols="30"></textarea>
Atribut penting <textarea>
| Atribut | Fungsi |
|---|---|
name |
Nama data |
rows |
Jumlah baris |
cols |
Lebar kolom |
placeholder |
Teks petunjuk |
📌 <textarea> tidak menggunakan value, teks ditulis di dalam tag.
4️⃣ <select> dan <option>
Digunakan untuk membuat dropdown (daftar pilihan).
<select name="prodi" id="prodi"> <option value="">-- Pilih Program Studi --</option> <option value="informatika">Informatika</option> <option value="elektro">Teknik Elektro</option> <option value="manajemen">Manajemen</option> </select>
Atribut penting:
| Elemen | Atribut | Fungsi |
|---|---|---|
select |
name |
Nama data |
option |
value |
Nilai yang dikirim |
5️⃣ Radio Button
Digunakan untuk memilih satu opsi.
<input type="radio" name="jk" value="L"> Laki-laki <input type="radio" name="jk" value="P"> Perempuan
📌 Semua radio harus memiliki name yang sama.
6️⃣ Checkbox
Digunakan untuk memilih lebih dari satu opsi.
<input type="checkbox" name="hobi[]" value="membaca"> Membaca
<input type="checkbox" name="hobi[]" value="olahraga"> Olahraga
7️⃣ <button>
Membuat tombol.
<button type="submit">Submit</button>
<button type="reset">Reset</button>
📋 TABEL ATRIBUT FORMULIR TERLENGKAP
| Atribut | Digunakan Pada | Fungsi |
|---|---|---|
type |
input, button | Menentukan jenis input |
name |
semua kontrol | Nama data |
id |
semua | Identitas unik |
value |
input, option | Nilai awal |
placeholder |
text, textarea | Teks petunjuk |
required |
input, select | Wajib diisi |
readonly |
input | Tidak bisa diedit |
disabled |
semua | Tidak aktif |
checked |
radio, checkbox | Default terpilih |
selected |
option | Default terpilih |
rows, cols |
textarea | Ukuran |
maxlength |
text |
✅ CONTOH FORM HTML PALING LENGKAP
📄 form-lengkap.html
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Formulir Data Mahasiswa</title> </head> <body> <h1>Formulir Data Mahasiswa</h1> <form action="#" method="post" enctype="multipart/form-data"> <label for="nama">Nama Lengkap</label><br> <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" required><br><br> <label for="nim">NIM</label><br> <input type="text" id="nim" name="nim" required><br><br> <label for="email">Email</label><br> <input type="email" id="email" name="email" required><br><br> <label>Jenis Kelamin</label><br> <input type="radio" name="jk" value="L"> Laki-laki <input type="radio" name="jk" value="P"> Perempuan <br><br> <label for="prodi">Program Studi</label><br> <select name="prodi" id="prodi" required> <option value="">-- Pilih Program Studi --</option> <option value="informatika">Informatika</option> <option value="elektro">Teknik Elektro</option> <option value="manajemen">Manajemen Bisnis</option> </select><br><br> <label for="alamat">Alamat</label><br> <textarea id="alamat" name="alamat" rows="5" cols="40" placeholder="Masukkan alamat lengkap"></textarea><br><br> <label>Hobi</label><br> <input type="checkbox" name="hobi[]" value="membaca"> Membaca <input type="checkbox" name="hobi[]" value="olahraga"> Olahraga <input type="checkbox" name="hobi[]" value="musik"> Musik <br><br> <label for="foto">Upload Foto</label><br> <input type="file" id="foto" name="foto"><br><br> <input type="hidden" name="status" value="aktif"> <button type="submit">Kirim</button> <button type="reset">Reset</button> </form> </body> </html>
🖥️ Hasil Tampilan (Deskripsi)
-
Input nama, NIM, email
-
Radio jenis kelamin
-
Dropdown program studi
-
Textarea alamat
-
Checkbox hobi
-
Upload foto
-
Tombol submit & reset
👉 Ini sudah mencakup ±95% kebutuhan form HTML nyata
Kesalahan Umum Pemula
❌ input tanpa name
❌ Radio beda name
❌ Lupa required
❌ textarea pakai value
❌ option tanpa value
Ringkasan
✔ <form> pembungkus
✔ <input>, <textarea>, <select> elemen utama
✔ Atribut menentukan perilaku form
✔ HTML hanya menampilkan & mengumpulkan data
✔ Form siap diproses backend
