Validasi artinya mengecek isian form sebelum dikirim: sudah diisi belum, cukup panjang gak, formatnya benar gak. HTML punya atribut validasi bawaan buat itu. Kalau ada aturan yang dilanggar, browser membatalkan pengiriman dan menunjukkan pesan di kolom yang salah, tanpa JavaScript sama sekali.
🧪 Tebakan cepat: browser sudah mengecek semua isian form. Server masih perlu mengecek lagi gak? Tebak dulu, jawabannya ada di bagian "Browser cuma lapisan pertama".
Wajib diisi dan panjang minimal
<form>
<label for="nama">Nama pengguna</label>
<input type="text" id="nama" name="nama" required minlength="3">
<label for="sandi">Kata sandi</label>
<input type="password" id="sandi" name="sandi" required>
<button type="submit">Daftar</button>
</form>
Yang baru di sini cuma dua atribut, sisanya sudah kamu kenal:
requiredartinya kolom ini wajib diisi. Ditulis tanpa nilai, cukup katarequireddi dalam tag<input>. Kosong waktu Daftar diklik? Browser membatalkan pengiriman dan menunjukkan pesan kayak "Please fill out this field" di kolom itu.minlength="3"artinya isinya minimal 3 karakter. Diisiab, browser menolak dan menyebut panjang minimalnya.type="text"ditulis dengan jelas walaupun itu jenis bawaan, biar jenis kolomnya kelihatan.type="password"bikin isinya tampil sebagai titik-titik. Kolom sandi ini jugarequired.<button type="submit">Daftar</button>adalah tombol kirimnya. Teks di antara tag-nya jadi tulisan di tombol.
Semua kolom dan tombolnya ada di dalam <form> yang sama. Browser cuma mengecek dan mengirim kolom yang ada di dalam form itu.
Atribut validasi lainnya
<input type="email" name="email" required placeholder="[email protected]">
Kolom ini harus diisi, dan isinya harus berbentuk alamat email (ada @-nya), karena type="email" membawa pengecekan formatnya sendiri. placeholder bukan aturan: itu teks contoh abu-abu di dalam kolom, dan hilang begitu pengunjung mulai mengetik.
Atribut lain yang sering dipakai:
maxlength="15": maksimal 15 karakter. Browser gak membiarkan pengunjung mengetik lebih dari itu.min="17"danmax="65": batas nilai terkecil dan terbesar buat kolom angka (type="number").pattern="[0-9]+": isinya harus cocok dengan pola tertentu, di contoh ini cuma angka. Polanya ditulis dalam bahasa khusus bernama regex.
Buat teks panjang yang bisa beberapa baris, pakai <textarea>. Atribut validasinya sama: <textarea name="pesan" required minlength="10"></textarea>.
Browser cuma lapisan pertama
Semua pengecekan ini jalan di browser pengunjung. Orang yang paham bisa menghapus atributnya lewat DevTools, atau mengirim data langsung ke server tanpa lewat form. Jadi validasi HTML itu buat membantu pengunjung mengisi dengan benar, dan server tetap harus mengecek ulang semua aturannya sebelum menyimpan data.
⚠️ Jebakan yang sering ketemu
required="false"dikira mematikan aturan. Atribut tanpa nilai kayakrequiredaktif begitu ditulis, apa pun nilainya. Mau dimatikan, hapus atributnya.- Salah ketik nama atribut.
minlenghtgak dikenali browser, jadi aturannya diam-diam gak jalan. - Tombol Batal ikut mengirim form.
<button>di dalam form tanpatypedianggap tombol kirim. Tombol yang bukan buat mengirim kasihtype="button". placeholderdikira label. Teks contohnya hilang begitu pengunjung mengetik, jadi tetap pasang<label>.- Kolom di luar
<form>. Gak ikut dicek dan gak ikut terkirim.
TL;DR: required bikin kolom wajib diisi, minlength dan maxlength mengatur panjang teks, min dan max batas angka, type="email" mengecek format email, dan pattern mencocokkan pola. Kalau aturan dilanggar, browser membatalkan pengiriman dan menunjukkan pesan. Kolom dan tombolnya harus di dalam <form>. Ini cuma lapisan pertama: server tetap mengecek ulang.
