HTML Form Validation Required Pattern Min Max

Ringkasan

HTML punya validasi bawaan tanpa JS: required, type, pattern, min/max, minlength/maxlength. Browser menolak submit kalau tidak valid.

Konsep Dasar

• required — wajib diisi.
• type="email|url|number" — format otomatis divalidasi.
• pattern="[A-Za-z]+" — regex client-side.
• min/max/step (number/date), minlength/maxlength.
• :invalid / :valid CSS pseudo-class untuk feedback visual.

Cara Kerja / Struktur

html

<label for="user">User (huruf saja)</label>
<input id="user" name="user" pattern="[A-Za-z]+" minlength="3" required>
<label for="umur">Umur</label>
<input id="umur" name="umur" type="number" min="17" max="99">

Catatan Implementasi

• Validasi HTML bukan pengganti validasi server — selalu validasi di backend.
• title pada input menjelaskan aturan pattern saat error.

Kesalahan Umum

• Hanya mengandalkan validasi HTML (aman dari user bodoh, tidak dari attacker).
• pattern tanpa title penjelas.

Glosarium

• Client-side validation: validasi di browser, sebelum kirim.
• Pattern: regex validasi input.

Referensi

• HTML Forms, Inputs, Labels, Validation
• HTML Form Accessibility Lanjut