Elemen input

Jika form adalah wadah, input adalah peralatan paling serbaguna di dalamnya. Satu elemen yang sama bisa tampil sebagai kotak teks, pemilih kalender, slider, kotak centang, atau pemilih warna — perilakunya berganti total mengikuti satu atribut: type. Lebih dari dua puluh nilai type tersedia pada HTML modern.

Chapter ini memetakan atribut-atribut umum yang dipakai hampir semua input, lalu menyusun tabel type yang paling sering kita tulis. Tiap tipe penting dibahas lebih dalam pada chapter-nya sendiri.

Satu Elemen, Banyak Perilaku #

Aturannya: atribut type pada input menentukan kontrol seperti apa yang dilihat dan dirasakan pengguna. Mekanismenya: saat membaca type, browser menyiapkan perilaku menyeluruh — bentuk tampilan, tombol keyboard yang muncul di ponsel, validasi bawaan, hingga pemilih (picker) khusus seperti kalender untuk date atau palet untuk color.

Seluruh tipe modern — email, url, number, range, date, time, datetime-local, month, week, search, tel, color — kini berstatus Baseline dan memunculkan pemilih bawaan browser tanpa JavaScript apa pun.

Atribut Umum #

Atribut berikut dipakai lintas tipe:

Sepuluh type Populer #

Tabel berikut merangkum type yang paling sering dipakai sehari-hari:

Sisanya menyusul pada chapter masing-masing: search, tel, color, file, hidden, month, week, dan datetime-local.

Contoh Multi-tipe #

Satu form pemesanan kelas yang memakai beberapa atribut umum sekaligus:

<form action="/pesan" method="post">
  <label for="nama">Nama peserta</label>
  <input type="text" id="nama" name="nama" required autofocus>
  <label for="surel">Alamat email</label>
  <input type="email" id="surel" name="surel" placeholder="[email protected]" required>
  <label for="peserta">Jumlah peserta</label>
  <input type="number" id="peserta" name="peserta" value="2" min="1" max="12">
  <label for="kode">Kode promo</label>
  <input type="text" id="kode" name="kode" value="KOPI2026" disabled>
  <button type="submit">Kirim pesanan</button>
</form>

Hasil Render:

• Kotak “Nama peserta” menerima kursor begitu halaman terbuka.
• Kotak “Alamat email” menampilkan teks redup [email protected] yang hilang saat diketik.
• Kotak “Jumlah peserta” berisi angka 2 dengan tombol naik-turun di sisi kanan.
• Kotak “Kode promo” tampak abu-abu dan tidak bisa diklik.

Mari kita telaah kode di atas:

1. Baris 3 (required autofocus): kotak nama wajib diisi dan menerima fokus pertama — browser menolak submit selama kotak ini kosong.
2. Baris 5 (placeholder): petunjuk redup di dalam kotak — bukan nilai, dan bukan pengganti label.
3. Baris 7 (value="2" min max): jumlah peserta mulai dari 2 dengan batas 1 sampai 12 — value memberi nilai awal yang siap dikirim.
4. Baris 9 (disabled): kode promo terisi KOPI2026 tapi terkunci — kontrol disabled tidak bisa diubah dan nilainya tidak ikut terkirim.
5. Kombinasi type: text, email, dan number pada elemen yang sama persis — hanya type yang membuat perilakunya berbeda.

Ringkasan #

• Satu elemen input menjadi dua puluh kontrol berbeda lewat atribut type.
• Atribut umum: name, value, placeholder, disabled, required, autofocus.
• type menentukan semuanya: tampilan, keyboard ponsel, validasi, dan pemilih bawaan.
• Kontrol tanpa name tidak terkirim; kontrol disabled juga tidak terkirim.

Chapter berikutnya mengupas dua tipe paling dasar dan paling sering dipakai: text dan password.