Batasan Validasi HTML

Seluruh pemeriksaan yang kita bahas pada section ini — required, panjang, rentang, pola — berjalan di dalam browser pengunjung. Browser memang menjalankannya dengan setia, tetapi browser bukan wilayah yang kita kendalikan. Chapter penutup ini menegaskan batas keandalan validasi HTML, menjelaskan mengapa server tetap wajib memeriksa ulang, dan merangkum seluruh atribut validasi yang telah kita pelajari.

Validasi Klien Mudah Dilewati #

Validasi browser terjadi di sisi klien — perangkat pengunjung, di luar kendali kita. Siapa pun dapat membuka DevTools dan menghapus atribut required dari markup sebelum mengirim form. Lebih jauh lagi, form tidak harus dilibatkan sama sekali: alat seperti curl atau Postman dapat mengirim permintaan langsung ke alamat tujuan form, lengkap dengan data apa pun, tanpa pernah menyentuh halaman HTML kita.

Artinya, aturan pattern dan max yang tertulis di markup hanya mengikat browser selama data dibuat lewat halaman tersebut. Permintaan yang disusun di luar browser tidak membawa serta pemeriksaan itu — data mentah itulah yang tiba di server.

Validasi Server Wajib Tetap Ada #

Karena itu, server wajib memeriksa ulang setiap data yang masuk: kolom wajib, panjang, rentang, pola, hingga hak akses pemesannya. Prinsip keamanannya bernama defense in depth — beberapa lapis pemeriksaan ditumpuk sehingga kegagalan satu lapis masih tertutup oleh lapis berikutnya. Server menjadi lapisan terakhir karena di sanalah data disimpan dan diproses lebih lanjut.

Posisi validasi HTML pun jelas: validasi klien adalah lapisan pengalaman, bukan lapisan keamanan. Tugasnya menyaring ketidaksengajaan — isian terlewat, format keliru — secepat mungkin di browser, sebelum data melakukan perjalanan.

Perbandingan Validasi Klien dan Server #

Ringkasan Atribut Validasi #

Section ini telah membahas tujuh atribut berikut, yang kini dapat kita pakai sebagai satu perangkat:

Contoh: Alur Form dengan Dua Lapisan Pemeriksaan #

Markup berikut merangkum pola yang sehat: form memuat batasan lengkap untuk pengalaman pengunjung, dan action menunjuk ke alamat yang memeriksa ulang di server. Simpan sebagai contoh-dua-lapisan.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Langganan Buletin Toko Budi</title>
</head>
<body>
  <h1>Langganan Buletin</h1>
  <form action="/langganan" method="post">
    <p>
      <label for="nama">Nama</label>
      <input type="text" id="nama" name="nama" minlength="2" maxlength="60" required>
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="kode">Kode pos</label>
      <input type="text" id="kode" name="kode" pattern="[0-9]{5}" title="Lima digit angka">
    </p>
    <p>
      <input type="submit" value="Berlangganan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Tiga kolom dengan batasan lengkap: nama wajib 2-60 karakter, email wajib,
    kode pos lima digit bila diisi
  - Isian kosong pada nama atau email membatalkan pengiriman sebelum request
    dibuat

Perjalanan data pada form di atas mengikuti alur dua lapisan berikut:

1. Pengunjung mengisi form dan menekan tombol Berlangganan.
2. Browser memeriksa required, panjang, dan pola; isian kosong atau tidak cocok dibatalkan di tempat.
3. Bila sah, browser mengirim POST ke /langganan dengan data yang bersih secara format.
4. Server memeriksa ulang seluruh aturan yang sama, lalu menambahkan pemeriksaan yang tak mungkin dilakukan HTML: keunikan email, keabsahan kode pos, dan hak akses pengirimnya.
5. Server menjawab halaman ucapan terima kasih, atau halaman galat berisi pesan perbaikan bila data ditolak.

Lapisan pertama menghemat pengiriman data yang tidak sah; lapisan kedua menjamin kebenarannya. Keduanya memakai daftar aturan yang sama, dan daftar pada markup kita kini lengkap.

Dengan chapter ini, section Form Validation tuntas: dari penanda wajib isi hingga batas keandalannya. Course HTML selanjutnya berpindah dari isi dokumen ke informasi tentang dokumen — section Metadata dan SEO membahas cara mendeskripsikan halaman kepada browser dan mesin pencari.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Constraint validation
• web.dev — Learn Forms
• WHATWG — HTML Living Standard: Constraint validation
• OWASP — Input Validation Cheat Sheet

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Langganan Buletin Toko Budi</title>
</head>
<body>
  <h1>Langganan Buletin</h1>
  <form action="/langganan" method="post">
    <p>
      <label for="nama">Nama</label>
      <input type="text" id="nama" name="nama" minlength="2" maxlength="60" required>
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="kode">Kode pos</label>
      <input type="text" id="kode" name="kode" pattern="[0-9]{5}" title="Lima digit angka">
    </p>
    <p>
      <input type="submit" value="Berlangganan">
    </p>
  </form>
</body>
</html>