Browser menjalankan validasi formulir secara asli; sebagian besar tim kemudian menerapkan kembali visualnya dalam JavaScript. CSS dapat menata mesin secara langsung, yang sangat cocok dengan situs statis.

/* touched, wrong */
input:user-invalid { border-color: #bb0000; }
/* untouched but already empty by design */
input:placeholder-shown { border-color: #d9d9d9; }
/* the whole form is submittable */
form:has(:invalid) .save { opacity: .4; pointer-events: none; }

Susun negara bagian dengan jujur

  1. Nilai salah: :user-invalid, sehingga kolom tidak pernah berteriak sebelum pembaca menyentuhnya.
  2. Formulir siap kirim: form:has(:invalid) mematikan tombol save sampai semua field wajib lolos.
  3. Kosong-vs-kesalahan: berikan input atribut placeholder sehingga :placeholder-shown memisahkan 'kosong' dari 'tidak valid'.
  4. Teks kesalahan: memasangkan gaya dengan pesan yang terlihat; perbatasan merah saja gagal dalam pemeriksaan a11y.

Jaga semantik tetap nyata: browser memang memblokir submit secara native, jadi CSS hanya menggambar perilaku yang sudah dinilai, bukan menggantinya. Dukungan :has() menurut caniuse terukur 95,91 persen di repo ini, dan formulir tetap validasi dengan benar tanpa itu.