HTML · Bab 6

Validasi Form dan Aksesibilitas

Memakai validasi bawaan browser seperti required, min, max, minlength, dan pattern, mengelompokkan isian dengan fieldset dan legend, mengisi autocomplete, serta membedakan placeholder dari label.

Form yang baik menolak isian yang jelas salah sebelum dikirim dan mudah dipakai siapa pun, termasuk pengguna keyboard dan pembaca layar. HTML menyediakan validasi bawaan tanpa satu baris JavaScript pun.

6.1 Validasi Bawaan Browser

Bila form punya aturan validasi, browser memeriksa isian saat tombol submit ditekan. Bila ada yang tidak memenuhi aturan, form tidak dikirim, dan browser menampilkan pesan di isian pertama yang salah.

Validasi di browser bukan pengaman. Pengguna bisa melewatinya, misalnya dengan mengubah HTML lewat DevTools atau mengirim permintaan langsung tanpa form. Data tetap wajib diperiksa ulang di server, seperti $request->validate di topik Laravel. Validasi di browser berguna untuk kenyamanan: kesalahan terlihat seketika.

Playground situs ini tidak mengirim form. Karena itu contoh di bab ini memakai tombol “Periksa isian” dengan sedikit JavaScript yang memanggil reportValidity(): browser memeriksa aturan dan menampilkan pesannya, sama seperti saat submit. Ada juga checkValidity(), yang memeriksa tanpa menampilkan pesan dan hanya mengembalikan true atau false. JavaScript sendiri dipelajari di topik JavaScript.

6.2 required, minlength, dan maxlength

• required: isian wajib diisi.
• minlength dan maxlength: batas jumlah karakter teks. Browser mencegah pengetikan melebihi maxlength. minlength diperiksa setelah pengguna mengetik.
• type="email" sudah memeriksa format email dengan sendirinya.

6.3 min, max, dan pattern

• min dan max membatasi nilai number dan date. step mengatur kelipatannya. Tanggal min di contoh berikut hanya contoh; di form sungguhan biasanya diisi tanggal hari ini.
• pattern berisi pola (regular expression) yang harus cocok dengan seluruh isian. Isian kosong dianggap lolos pattern, kecuali isian itu juga required.
• title menjelaskan format yang diminta. Sebagian browser menampilkannya di pesan galat.
• type="tel" tidak memeriksa format nomor; ia hanya menampilkan keyboard angka di ponsel. Format nomor diperiksa dengan pattern.

6.4 Mengelompokkan Isian dengan <fieldset> dan <legend>

<fieldset> mengelompokkan isian yang berkaitan, dan <legend> menjadi judul kelompok itu. Pembaca layar membacakan legend saat pengguna masuk ke kelompok tersebut. Pola ini sangat dianjurkan untuk kelompok radio, karena satu pertanyaan (“Cara terima pesanan”) punya beberapa label jawaban.

Satu atribut required pada salah satu radio sudah membuat seluruh kelompok dengan name yang sama wajib dipilih.

6.5 autocomplete

Atribut autocomplete memberi tahu browser jenis data sebuah isian, sehingga browser bisa menawarkan isian otomatis yang tersimpan. Ini mempercepat pengisian dan sangat membantu pengguna yang sulit mengetik. Nilai yang umum: name, email, tel, street-address, postal-code, username, current-password, dan new-password. Nilai off meminta browser tidak mengisi otomatis, tetapi tidak selalu dipatuhi browser.

<label for="sandi-baru">Kata sandi baru</label>
<input type="password" id="sandi-baru" name="sandi" autocomplete="new-password" minlength="8" required>

6.6 placeholder Bukan Pengganti label

placeholder adalah teks samar di dalam kotak isian. Teks ini hilang begitu pengguna mengetik, warnanya sering pucat dan sulit dibaca, dan tidak selalu dibacakan sebagai nama isian. Pakai placeholder hanya untuk contoh format, dan tetap sediakan label.

6.7 Ringkasan

• required, minlength, maxlength, min, max, dan pattern adalah validasi bawaan browser. Server tetap wajib memeriksa ulang.
• checkValidity() dan reportValidity() adalah cara JavaScript meminta browser memeriksa form.
• <fieldset> dan <legend> mengelompokkan isian, terutama kelompok radio.
• autocomplete mempercepat pengisian.
• placeholder hanya contoh format, bukan pengganti label.