Formulir 3: Validasi & Atribut Input
Membuat formulir yang memeriksa isian sebelum dikirim: required, min, max, minlength, pattern, placeholder, autocomplete, disabled, readonly.
Validasi bawaan HTML
Tanpa menulis JavaScript, HTML sudah bisa memeriksa isian. Jika ada isian yang salah, browser menahan pengiriman dan menampilkan pesan. Ini disebut validasi sisi klien.
Penting: validasi di browser hanya untuk kenyamanan pengguna. Pengguna jahat bisa melewatinya, jadi server tetap wajib memvalidasi ulang.
Atribut validasi
| Atribut | Fungsi | Contoh |
|---|---|---|
required | Wajib diisi | <input required> |
minlength / maxlength | Batas jumlah karakter | minlength="8" |
min / max | Batas nilai angka atau tanggal | min="1" max="10" |
step | Kelipatan angka | step="5" |
pattern | Pola yang harus cocok (regex) | pattern="[0-9]{4}" |
type="email", "url" | Format email/URL otomatis diperiksa |
Atribut yang memudahkan pengguna
| Atribut | Fungsi |
|---|---|
placeholder | Teks petunjuk samar di kolom kosong (bukan pengganti label!) |
autocomplete | Membantu browser mengisi otomatis: name, email, new-password |
autofocus | Kursor langsung di kolom ini saat halaman dibuka |
disabled | Kolom tidak bisa diubah dan tidak dikirim |
readonly | Tidak bisa diubah tetapi tetap dikirim |
Contoh formulir pendaftaran
<form action="/daftar" method="post">
<label for="nama">Nama lengkap</label>
<input type="text" id="nama" name="nama" required minlength="3" autocomplete="name">
<label for="umur">Umur</label>
<input type="number" id="umur" name="umur" min="10" max="100">
<label for="pin">PIN (4 angka)</label>
<input type="text" id="pin" name="pin" pattern="[0-9]{4}" title="Masukkan 4 angka" required>
<button type="submit">Daftar</button>
</form>Atribut title pada input dengan pattern dipakai sebagai petunjuk di pesan kesalahan.
Pengelompokan: datalist
<datalist> memberi saran isian sambil tetap memperbolehkan teks bebas:
<input list="bahasa" name="bahasa">
<datalist id="bahasa">
<option value="HTML">
<option value="CSS">
</datalist>