Formulir: Input Dasar

Apa Itu Form?

Formulir (form) adalah cara halaman web menerima data dari pengunjung: form login, form pendaftaran, kolom pencarian, semuanya form. Pembungkusnya adalah tag <form>:

<form>
  <!-- input-input taruh di sini -->
</form>

Label dan Input: Pasangan Wajib

Setiap kolom input harus punya <label> yang terhubung lewat atribut for yang cocok dengan id inputnya:

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

Kenapa repot-repot? Tiga alasannya:

1. Klik label otomatis memfokuskan inputnya (area klik jadi lebih besar).
2. Screen reader membacakan label saat pengguna masuk ke input.
3. Kode jadi jelas: label mana untuk input mana.

Catatan teknis: Jangan ganti label dengan placeholder. Placeholder hilang saat pengguna mulai mengetik, warnanya pudar, dan tidak dibacakan screen reader dengan konsisten. Placeholder itu contoh isi, bukan pengganti label.

Atribut Penting pada Input

• type: jenis input (text, password, number, email, dan lain-lain).
• name: nama data saat dikirim ke server. Tanpa name, datanya tidak ikut terkirim.
• placeholder: teks contoh yang tampil saat input kosong.
• value: isi awal input.

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="cth: budi123">

<label for="sandi">Kata Sandi</label>
<input type="password" id="sandi" name="sandi">

<label for="umur">Umur</label>
<input type="number" id="umur" name="umur" min="1" max="120">

Perhatikan type="password" otomatis menyamarkan ketikan menjadi titik-titik, dan type="number" memunculkan tombol naik-turun angka plus keypad angka di HP.

Tombol Submit

Form butuh tombol untuk mengirim data:

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

Ada tiga jenis tombol:

• type="submit": mengirim form (ini default kalau tidak ditulis).
• type="reset": mengosongkan semua input di form.
• type="button": tidak ngapa-ngapain, untuk dipakai JavaScript.

Contoh Form Lengkap

<form>
  <label for="nama">Nama Lengkap</label>
  <input type="text" id="nama" name="nama" placeholder="Nama kamu siapa?">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="[email protected]">

  <label for="sandi">Kata Sandi</label>
  <input type="password" id="sandi" name="sandi">

  <button type="submit">Buat Akun</button>
</form>

Form ini belum benar-benar mengirim ke mana-mana (butuh backend untuk itu), tapi strukturnya sudah 100% benar. Di modul validasi, kita bikin browser mengecek isiannya otomatis.