🔹 1. Apa Itu Form di HTML?
Form di HTML digunakan untuk mengumpulkan data dari pengguna dan mengirimkannya ke server untuk diproses (misalnya menyimpan data, login, registrasi, dll).
Form biasanya berisi input, label, textarea, checkbox, radio button, dropdown, dan tombol submit.
🔹 2. Tag <form>
Semua elemen form diletakkan di dalam tag <form>.
Struktur dasar:
<form action="proses.php" method="post">
<!-- isi form -->
</form>
Penjelasan atribut:
| Atribut | Keterangan |
|---|---|
action | Menentukan alamat tujuan saat data dikirim |
method | Metode pengiriman data: get atau post |
name | Nama form (opsional, berguna untuk JS) |
target | Menentukan di mana hasil akan ditampilkan (mis. _blank) |
enctype | Untuk form upload file, wajib multipart/form-data |
Contoh:
<form action="simpan.php" method="post">
<label>Nama:</label>
<input type="text" name="nama">
<button type="submit">Kirim</button>
</form>
🔹 3. Tag <input> dan Jenis-jenisnya
Tag <input> adalah elemen utama dalam form untuk mengisi data.
Jenisnya ditentukan oleh atribut type.
Contoh jenis-jenis input umum:
<input type="text"> <!-- teks biasa -->
<input type="password"> <!-- teks disembunyikan -->
<input type="email"> <!-- format email -->
<input type="number"> <!-- angka -->
<input type="date"> <!-- tanggal -->
<input type="file"> <!-- unggah file -->
<input type="radio"> <!-- pilihan tunggal -->
<input type="checkbox"> <!-- pilihan ganda -->
<input type="submit"> <!-- tombol kirim -->
<input type="reset"> <!-- tombol reset -->
Contoh form sederhana:
<form>
Nama: <input type="text" name="nama"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Kirim">
</form>
🔹 4. Tag <label>
<label> digunakan untuk memberikan keterangan teks pada input agar mudah dibaca dan diakses.
Contoh:
<label for="username">Nama Pengguna:</label>
<input type="text" id="username" name="username">
Gunakan atribut
foragar label terhubung dengan input (idharus sama).
Klik pada teks label juga akan mengaktifkan input.
🔹 5. Tag <textarea>
Untuk teks yang panjang (misalnya alamat, komentar, deskripsi).
Contoh:
<label for="alamat">Alamat:</label><br>
<textarea id="alamat" name="alamat" rows="4" cols="30"></textarea>
🔹 6. Tag <select> dan <option>
Digunakan untuk membuat menu dropdown.
Contoh:
<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="bogor">Bogor</option>
</select>
Atribut
valueakan dikirim ke server saat form disubmit.
🔹 7. Tombol di Form
HTML menyediakan beberapa cara untuk membuat tombol:
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
<button type="button">Tombol Biasa</button>
<button type="submit">Kirim</button>
🔹 8. Atribut Umum pada Input
| Atribut | Fungsi |
|---|---|
name | Nama variabel yang dikirim ke server |
value | Nilai awal input |
placeholder | Teks petunjuk di dalam input |
required | Wajib diisi |
readonly | Tidak bisa diubah tapi tetap terkirim |
disabled | Tidak bisa diubah dan tidak terkirim |
maxlength | Batas maksimal karakter |
min, max, step | Untuk input angka atau tanggal |
Contoh:
<input type="text" name="user" placeholder="Masukkan nama" required maxlength="20">
🔹 9. Validasi HTML5 Otomatis
HTML5 bisa melakukan validasi otomatis tanpa JavaScript.
Contoh validasi:
<form>
Email: <input type="email" name="email" required><br>
Umur: <input type="number" name="umur" min="18" max="60"><br>
<input type="submit">
</form>
Jika pengguna salah mengisi, browser akan menampilkan pesan error otomatis.
🔹 10. Mengelompokkan Form dengan <fieldset> dan <legend>
<fieldset> digunakan untuk mengelompokkan input yang berkaitan, sedangkan <legend> memberi judul kelompoknya.
Contoh:
<form>
<fieldset>
<legend>Data Pribadi</legend>
Nama: <input type="text" name="nama"><br>
Email: <input type="email" name="email"><br>
</fieldset>
</form>
🔹 11. Contoh Form Lengkap (Modern Layout)
<form action="proses.php" method="post">
<label for="nama">Nama Lengkap:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Masukkan email" required><br><br>
<label for="jk">Jenis Kelamin:</label><br>
<input type="radio" name="jk" value="L" required> Laki-laki
<input type="radio" name="jk" value="P"> Perempuan<br><br>
<label for="hobi">Hobi:</label><br>
<input type="checkbox" name="hobi" value="membaca"> Membaca
<input type="checkbox" name="hobi" value="musik"> Musik
<input type="checkbox" name="hobi" value="olahraga"> Olahraga<br><br>
<label for="kota">Kota Asal:</label><br>
<select id="kota" name="kota">
<option value="jakarta">Jakarta</option>
<option value="bogor">Bogor</option>
<option value="bandung">Bandung</option>
</select><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="40"></textarea><br><br>
<button type="submit">Kirim Data</button>
</form>
🔹 12. Contoh Form Menggunakan <table>
Form model tabel biasanya digunakan pada tampilan seperti formulir cetak (rapi dan sejajar).
<form action="kirim.php" method="post">
<table border="0" cellpadding="6">
<tr>
<td><label for="nama">Nama Lengkap</label></td>
<td><input type="text" id="nama" name="nama" required></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="jk">Jenis Kelamin</label></td>
<td>
<input type="radio" name="jk" value="L"> Laki-laki
<input type="radio" name="jk" value="P"> Perempuan
</td>
</tr>
<tr>
<td><label for="kota">Kota</label></td>
<td>
<select id="kota" name="kota">
<option value="jakarta">Jakarta</option>
<option value="bogor">Bogor</option>
<option value="bandung">Bandung</option>
</select>
</td>
</tr>
<tr>
<td><label for="pesan">Pesan</label></td>
<td><textarea id="pesan" name="pesan" rows="3"></textarea></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Kirim</button></td>
</tr>
</table>
</form>
🔹 13. Tips Penting
✅ Gunakan label untuk setiap input.
✅ Tambahkan required jika kolom wajib diisi.
✅ Gunakan type yang sesuai (email, number, date, dll).
✅ Hindari tabel jika form tidak tabular — gunakan CSS untuk layout modern.
✅ Untuk upload file, tambahkan enctype="multipart/form-data".
🔹 14. Contoh Upload File
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="dokumen">Pilih file:</label>
<input type="file" id="dokumen" name="dokumen" accept=".pdf,.jpg,.png">
<input type="submit" value="Upload">
</form>
🔹 15. Kesimpulan
- Tag utama form:
<form>,<input>,<label>,<textarea>,<select>,<button>. - Atribut penting:
action,method,name,required,placeholder. - Validasi dasar bisa otomatis dilakukan oleh HTML5.
- Form bisa ditata menggunakan CSS modern atau tabel.
- Gunakan metode
POSTuntuk pengiriman data yang bersifat rahasia.
