Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Membuat form dengan tag
<form> - Menggunakan berbagai jenis input: teks, email, password, radio, checkbox
- Membuat dropdown dengan
<select> - Menghubungkan label dengan input menggunakan
fordanid - Menambahkan tombol submit
Materi Singkat
Form adalah cara pengguna mengirim data ke server — seperti saat login, mengisi komentar, atau mendaftar newsletter. Meski di pelajaran ini kita belum bisa memproses data tersebut (itu butuh JavaScript atau backend), memahami elemen form adalah keterampilan wajib.
Tag <form>
<form action="/kirim" method="post">
<!-- elemen form di sini -->
</form>action— URL tujuan saat form dikirim (di V1 kita abaikan ini)method— cara pengiriman:get(data tampil di URL) ataupost(data tersembunyi)
Tag <label> dan <input>
Selalu pasangkan <label> dengan <input>. Ini penting untuk aksesibilitas — pengguna bisa klik label untuk fokus ke input.
<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan namamu" />for="nama"di label harus sama denganid="nama"di inputname— identifier data saat form dikirimplaceholder— teks panduan di dalam input (menghilang saat diketik)
Jenis-jenis Input
<!-- Teks biasa -->
<input type="text" />
<!-- Email (ada validasi format otomatis) -->
<input type="email" />
<!-- Password (teks tersembunyi) -->
<input type="password" />
<!-- Angka -->
<input type="number" min="0" max="100" />
<!-- Radio (pilih satu dari beberapa) -->
<input type="radio" name="gender" value="pria" /> Pria
<input type="radio" name="gender" value="wanita" /> Wanita
<!-- Checkbox (pilih banyak) -->
<input type="checkbox" name="hobi" value="baca" /> Membaca
<input type="checkbox" name="hobi" value="olahraga" /> Olahraga
<!-- Textarea (teks panjang) -->
<textarea name="pesan" rows="4" cols="50"></textarea>Dropdown dengan <select>
<select name="kota">
<option value="">-- Pilih Kota --</option>
<option value="jakarta">Jakarta</option>
<option value="surabaya">Surabaya</option>
<option value="bandung">Bandung</option>
</select>Tombol Submit
<button type="submit">Kirim</button>Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Pendaftaran</title>
</head>
<body>
<h1>Form Pendaftaran</h1>
<form action="#" method="post">
<p>
<label for="nama">Nama Lengkap:</label><br />
<input type="text" id="nama" name="nama"
placeholder="Contoh: Budi Santoso" required />
</p>
<p>
<label for="email">Email:</label><br />
<input type="email" id="email" name="email"
placeholder="budi@email.com" required />
</p>
<p>
<label for="password">Password:</label><br />
<input type="password" id="password" name="password"
minlength="8" required />
</p>
<p>
<label>Jenis Kelamin:</label><br />
<input type="radio" id="pria" name="gender" value="pria" />
<label for="pria">Pria</label>
<input type="radio" id="wanita" name="gender" value="wanita" />
<label for="wanita">Wanita</label>
</p>
<p>
<label for="kota">Kota Asal:</label><br />
<select id="kota" name="kota">
<option value="">-- Pilih Kota --</option>
<option value="jakarta">Jakarta</option>
<option value="surabaya">Surabaya</option>
<option value="bandung">Bandung</option>
<option value="lainnya">Lainnya</option>
</select>
</p>
<p>
<label>Hobi (boleh lebih dari satu):</label><br />
<input type="checkbox" id="baca" name="hobi" value="baca" />
<label for="baca">Membaca</label><br />
<input type="checkbox" id="olahraga" name="hobi" value="olahraga" />
<label for="olahraga">Olahraga</label><br />
<input type="checkbox" id="musik" name="hobi" value="musik" />
<label for="musik">Musik</label>
</p>
<p>
<label for="pesan">Pesan atau Pertanyaan:</label><br />
<textarea id="pesan" name="pesan" rows="4"
placeholder="Tulis pesanmu di sini..."></textarea>
</p>
<button type="submit">Daftar Sekarang</button>
<button type="reset">Reset Form</button>
</form>
</body>
</html>Tugas Kecil
Buat form "Kuis Pengenalan Diri" dengan kolom:
- Nama (input text, required)
- Email (input email, required)
- Umur (input number, min 10, max 100)
- Level pemula atau berpengalaman (radio button)
- Bahasa yang sudah dipelajari (checkbox: HTML, CSS, JavaScript, Python)
- Kota domisili (dropdown dengan minimal 5 kota pilihan)
- Ceritakan tujuanmu belajar coding (textarea, minimal 4 baris)
- Tombol submit "Kirim Kuis"