Form & Input

Membangun formulir interaktif dengan berbagai jenis input, validasi HTML5, dan aksesibilitas yang benar.

Phase

Phase 1 — HTML

Topik

HTML Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Menggunakan tag <form> dengan atribut action dan method
02Membuat input: text, email, password, number, date, file
03Menggunakan radio, checkbox, dan select (dropdown)
04Membuat textarea dan tombol submit/reset
05Menerapkan atribut: name, id, placeholder, required, disabled, readonly
06Menghubungkan label dengan input untuk aksesibilitas

📖Sub-topik & Materi

01Tag <form>: atribut action, method (GET/POST)
02Input: text, email, password, number, date, file
03Radio, checkbox, select (dropdown), option
04Textarea dan tombol submit/reset
05Atribut: name, id, placeholder, required, disabled, readonly
06Label dan aksesibilitas form

💡Penjelasan Konsep

Konsep 1

Tag <form> dan Method GET vs POST

Tag <form> membungkus seluruh elemen formulir. Atribut action menentukan ke mana data dikirim (URL). Method GET mengirim data lewat URL (terlihat di address bar) — cocok untuk pencarian. Method POST mengirim data tersembunyi di body request — cocok untuk data sensitif (password, kartu kredit).

html

<!-- GET: data tampil di URL (?nama=Ahmad&kota=Kediri) -->
<form action="/cari" method="GET">
  <input type="text" name="q" placeholder="Cari...">
  <button type="submit">Cari</button>
</form>

<!-- POST: data tersembunyi di request body -->
<form action="/daftar" method="POST">
  <input type="password" name="password">
  <button type="submit">Daftar</button>
</form>

Konsep 2

Jenis-jenis Input HTML

HTML menyediakan banyak tipe input yang masing-masing punya validasi bawaan: type="email" otomatis validasi format email, type="number" hanya terima angka, type="date" tampilkan date picker, type="file" untuk upload file. Gunakan tipe yang tepat agar validasi bekerja otomatis tanpa JavaScript.

html

<input type="text"     name="nama"    placeholder="Nama lengkap">
<input type="email"    name="email"   placeholder="email@contoh.com">
<input type="password" name="pass"    placeholder="Min 8 karakter">
<input type="number"   name="umur"    min="17" max="60">
<input type="date"     name="lahir">
<input type="file"     name="foto"    accept="image/*">

Konsep 3

Label dan Aksesibilitas Form

Setiap input HARUS punya <label> yang terhubung. Hubungkan dengan atribut for pada label yang sama dengan id pada input. Ini penting untuk aksesibilitas (screen reader membaca label saat fokus ke input) dan UX (klik label = fokus ke input). Atribut required membuat field wajib diisi sebelum submit.

html

<!-- BENAR: label terhubung dengan input -->
<label for="email">Alamat Email:</label>
<input type="email" id="email" name="email" required>

<!-- SALAH: label tidak terhubung -->
<label>Alamat Email:</label>
<input type="email" name="email">

Konsep 4

Radio, Checkbox, dan Select

Radio button untuk pilihan tunggal — semua radio dalam satu grup harus punya name yang SAMA. Checkbox untuk pilihan ganda — bisa dipilih beberapa sekaligus. Select (dropdown) untuk pilihan dari daftar panjang. Atribut value menentukan data yang dikirim ke server.

html

<!-- Radio: pilih salah satu -->
<input type="radio" name="kelas" value="html" id="r1"> <label for="r1">HTML</label>
<input type="radio" name="kelas" value="css"  id="r2"> <label for="r2">CSS</label>

<!-- Checkbox: bisa pilih banyak -->
<input type="checkbox" name="skill" value="html" id="c1"> <label for="c1">HTML</label>
<input type="checkbox" name="skill" value="css"  id="c2"> <label for="c2">CSS</label>

<!-- Select dropdown -->
<select name="kota">
  <option value="">-- Pilih Kota --</option>
  <option value="kediri">Kediri</option>
  <option value="surabaya">Surabaya</option>
</select>

💻Contoh Kode Lengkap

html

<form action="/daftar" method="POST">
  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama"
         placeholder="Masukkan nama lengkap" required>

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

  <label for="tgl">Tanggal Lahir:</label>
  <input type="date" id="tgl" name="tgl">

  <label>Jenis Kelas:</label>
  <input type="radio" name="kelas" value="html" id="r1">
  <label for="r1">HTML</label>
  <input type="radio" name="kelas" value="css" id="r2">
  <label for="r2">CSS</label>

  <label for="catatan">Catatan:</label>
  <textarea id="catatan" name="catatan" rows="4"></textarea>

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

⚡Latihan Kelas · Buat form pendaftaran kursus dengan minimal 6 jenis input berbeda

Buat form dengan action="#" dan method="POST"

Tambahkan input: text (nama), email, password, date (tanggal lahir)

Tambahkan radio button untuk pilihan kelas

Tambahkan checkbox untuk persetujuan syarat & ketentuan

Tambahkan select dropdown untuk pilihan kota

Tambahkan textarea untuk catatan dan tombol submit

📝 Tugas 1.4 — Form Registrasi Lengkap

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat form registrasi lengkap dengan: semua jenis input (text, email, password, date, file, radio, checkbox, select, textarea), validasi required, dan label yang tepat untuk setiap input.

Kriteria Penilaian	Poin
Kode berjalan tanpa error di browser	25
Minimal 6 jenis input berbeda hadir dan berfungsi	25
Setiap input terhubung dengan label (for/id)	25
Validasi required berfungsi pada field wajib	25
Total	100