1. Pengertian Form HTML

Form HTML adalah elemen yang digunakan untuk menerima input data dari pengguna.

Form merupakan bagian paling penting dalam aplikasi web karena digunakan untuk:

Login
Registrasi
Pencarian
Kontak
Pemesanan
Input data ke database

Tanpa form, website hanya dapat menampilkan informasi, tetapi tidak dapat menerima data dari pengguna.

2. Tag Dasar Form

<form>
    <!-- elemen input -->
</form>

Tag <form> berfungsi sebagai wadah untuk seluruh komponen input.

3. Struktur Dasar Form

<form>
    <label>Nama:</label><br>
    <input type="text"><br><br>

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

4. Atribut Penting pada `<form>`

Atribut	Fungsi
`action`	Menentukan file tujuan saat form dikirim
`method`	Metode pengiriman data (`GET` atau `POST`)
`autocomplete`	Mengaktifkan/menonaktifkan autofill
`enctype`	Digunakan saat upload file

4.1 Contoh Form dengan Action dan Method

<form action="proses.php" method="post">

5. Elemen-Elemen Form

HTML menyediakan banyak jenis input.

5.1 Text

<input type="text">

Digunakan untuk teks biasa.

5.2 Password

<input type="password">

5.3 Email

<input type="email">

5.4 Number

<input type="number">

5.5 Date

<input type="date">

5.6 File Upload

<input type="file">

5.7 Hidden

<input type="hidden" name="id" value="123">

6. 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 dalam satu grup harus memiliki name yang sama.

7. Checkbox

Digunakan untuk memilih lebih dari satu opsi.

<input type="checkbox" name="hobi[]" value="Membaca"> Membaca
<input type="checkbox" name="hobi[]" value="Coding"> Coding

8. Textarea

Digunakan untuk teks panjang.

<textarea rows="4" cols="50"></textarea>

9. Select Option

<select>
    <option>RPL</option>
    <option>TKJ</option>
    <option>DKV</option>
</select>

10. Button

<button type="submit">Simpan</button>
<button type="reset">Reset</button>
<button type="button">Klik</button>

11. Label

<label for="nama">Nama</label>
<input type="text" id="nama">

Manfaat:

Memudahkan pengguna
Accessibility lebih baik

12. Placeholder dan Value

<input type="text" placeholder="Masukkan nama">
<input type="text" value="Andi">

13. Required

<input type="text" required>

Mencegah form dikirim jika kosong.

14. Readonly dan Disabled

<input type="text" value="Data" readonly>
<input type="text" disabled>

15. Fieldset dan Legend

<fieldset>
    <legend>Data Pribadi</legend>
    <input type="text">
</fieldset>

16. Studi Kasus Nyata : Form Pendaftaran Siswa

<!DOCTYPE html>
<html>
<head>
    <title>Form Pendaftaran</title>
</head>
<body>

<h1>Form Pendaftaran Siswa</h1>

<form action="proses.php" method="post">

    <label for="nama">Nama Lengkap</label><br>
    <input type="text" id="nama" name="nama" 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="jurusan">Jurusan</label><br>
    <select id="jurusan" name="jurusan">
        <option value="">-- Pilih Jurusan --</option>
        <option value="RPL">RPL</option>
        <option value="TKJ">TKJ</option>
        <option value="DKV">DKV</option>
    </select><br><br>

    <label for="alamat">Alamat</label><br>
    <textarea id="alamat" name="alamat" rows="4"></textarea><br><br>

    <button type="submit">Daftar</button>
    <button type="reset">Reset</button>

</form>

</body>
</html>

17. Method GET vs POST

Method	Karakteristik
GET	Data tampil di URL
POST	Data tersembunyi dan lebih aman

Contoh:

<form method="post">

👉 Rekomendasi untuk form penting: gunakan POST.

18. Upload File

<form enctype="multipart/form-data">
    <input type="file" name="foto">
</form>

19. Best Practice Industri

✔ Selalu gunakan `label`

✔ Gunakan `name` pada semua input

✔ Gunakan `required`

✔ Gunakan `method=\"post\"`

✔ Gunakan placeholder seperlunya

✔ Kelompokkan dengan `fieldset`

20. Kesalahan Umum Siswa

❌ Tidak memberi atribut `name`

Data tidak akan terkirim.

❌ Tidak menggunakan `label`

❌ Salah method

❌ Tidak menambahkan `enctype` saat upload file

21. Debugging Form

Jika form tidak bekerja:

Periksa atribut name.
Periksa action.
Periksa method.
Periksa required.
Cek Developer Tools.

22. Contoh Form Login

<form action="login.php" method="post">

    <label>Username</label><br>
    <input type="text" name="username" required><br><br>

    <label>Password</label><br>
    <input type="password" name="password" required><br><br>

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

</form>

23. Latihan Siswa

Latihan 1

Buat form login.

Latihan 2

Buat form kontak.

Latihan 3

Buat form pendaftaran lengkap.

24. Mini Project

🎯 “Form Pendaftaran Siswa Baru”

Fitur:

Text input
Email
Radio
Select
Textarea
File upload
Submit & Reset

25. Kesimpulan

Form HTML adalah fondasi aplikasi web interaktif.

Tag utama:

<form>
<input>
<textarea>
<select>
<button>