Coba inget kapan terakhir kamu daftar akun di website. Pasti ada form: ketik nama, email, password. Form itu jembatan utama antara user dan aplikasi — tempat user nge-input data ke sistem kamu. Tag <form> jadi container, <input> jadi kotak ngetik, dan <label> kasih nama setiap kotak. Dengerin nasihat ini: form yang dibikin asal-asalan = user kabur sebelum daftar. Form yang dibikin rapi = conversion rate naik drastis.

🤔 Wajib pasangan label-input. Kotak input tanpa <label> = user tunanetra dengar "edit, kosong" tanpa konteks. Bahkan untuk user normal, klik label = otomatis fokus ke input — UX gratis. Atribut for="id" di label harus match id di input.

Sintaks Form Sederhana

Pasangan <label> + <input>, dihubungkan via for="id" (label) dan id="id" (input):

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

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

Tipe Input yang Umum

Atribut type menentukan jenis kotak input + keyboard di mobile:

• text — teks biasa
• email — khusus email (ada validasi otomatis)
• password — teks tersembunyi
• number — hanya angka
• date — pemilih tanggal
• tel — nomor telepon

Atribut Penting Input

• placeholder — teks petunjuk di dalam input
• required — wajib diisi
• name — nama data yang dikirim ke server

🎭 Analogi sehari-hari

<input> + <label> = kolom kuesioner kertas + nama kolomnya. Tanpa nama, user lihat kotak kosong tanpa konteks. for="id" = panah dari nama kolom ke kotaknya. Klik nama = fokus ke kotak (UX gratis).

⚠️ Jebakan yang sering ditemui

• Tanpa <label> — kotak input tanpa label = screen reader cuma bilang "edit, kosong". User tunanetra tidak tahu input itu untuk apa.
• placeholder ≠ label — placeholder hilang saat user mulai mengetik, dan kontrasnya rendah. Tetap butuh <label> terpisah.
• <input> tanpa name — kalau form di-submit, field tanpa name tidak terkirim ke server. Selalu kasih name.
• type="number" untuk nomor telepon / kartu — number jadi spinner di desktop, format aneh, dan tidak terima leading zero. Pakai type="tel" untuk telepon, inputmode="numeric" untuk angka custom.
• Input nested di dalam label — <label>Email <input ...></label> valid (implicit association), tapi kombinasi for/id lebih kompatibel dengan screen reader lama.

TL;DR: <form> = container input. <input type="..."> (text/email/password/number/tel/date/file/checkbox/radio). WAJIB pasangan <label for="id"> + <input id="id"> — klik label = fokus ke input (UX gratis), screen reader bacain. Input mobile-friendly: type="email" (keyboard email), type="tel" (keypad angka), inputmode="numeric" (kontrol keyboard tanpa batasi format). Pakai placeholder cuma sebagai hint, JANGAN ganti label.