Validasi Berdasarkan Type

Validasi termurah dalam HTML adalah yang tidak perlu kita tulis sama sekali. Memilih type="email" sudah memasang pemeriksaan format email; type="date" sudah menolak tanggal yang tidak sah; type="number" sudah menyaring ketikan huruf. Setiap pilihan type adalah satu paket: bentuk kontrol, keyboard ponsel, pemilih bawaan — dan aturan validasi.

Aturan Bawaan Tiap Type #

Aturannya: sebagian type membawa syarat format yang melekat pada kontrolnya. Mekanismenya: saat submit, browser memeriksa nilai terhadap syarat tersebut — tanpa pattern, tanpa JavaScript, isian salah format sudah menahan pengiriman dan memunculkan pesan bawaan.

`type`	Syarat nilai	Contoh pesan bawaan
`email`	alamat memuat `@` dan domain	“Masukkan alamat email.”
`url`	URL memuat skema seperti `https://`	“Masukkan URL.”
`number`	angka murni, boleh minus dan titik desimal	“Masukkan angka.”
`date`	tanggal sah dalam format ISO	“Masukkan tanggal yang sah.”
`time`	jam sah berformat `HH:MM`	“Masukkan waktu yang sah.”

Contoh pesan pada kolom terakhir adalah terjemahan bebas — teks sebenarnya ditentukan oleh browser dan bahasa antarmukanya.

Satu pengecualian penting: type="tel" tidak membawa validasi format apa pun. Nomor telepon terlalu bervariasi antar negara, sehingga standar sengaja membiarkannya bebas — format nomor HP Indonesia kita atur sendiri lewat pattern pada chapter sebelumnya.

Contoh: Form Kontak Kedai #

html
<form action="/kontak" method="post">
  <label for="surel">Alamat email</label>
  <input type="email" id="surel" name="surel" required>
  <label for="situs">Website (opsional)</label>
  <input type="url" id="situs" name="situs" placeholder="https://example.com">
  <label for="tamu">Jumlah tamu</label>
  <input type="number" id="tamu" name="tamu" required>
  <label for="kunjungan">Tanggal kunjungan</label>
  <input type="date" id="kunjungan" name="kunjungan" required>
  <button type="submit">Kirim</button>
</form>

Data yang terkirim setelah pengisian yang benar:

text

[email protected]&situs=https%3A%2F%2Fexample.com&tamu=4&kunjungan=2026-11-05

Uji bertahap pada demo: kirim dulu dalam keadaan kosong — bubble required muncul di kolom pertama. Lalu isi email tanpa @, situs dengan example.com polos tanpa skema, dan perbaiki satu per satu — setiap percobaan kirim yang salah memunculkan bubble yang berbeda, mengikuti type kolom yang bersangkutan.

Pada demo, action diarahkan ke https://example.com/kontak — domain cadangan resmi — dan skrip kecil menahan perpindahan supaya pasangan name=value yang terkirim terlihat di halaman, persis kiriman yang diterima server; markup formnya sama persis dengan contoh di atas.

Mari kita telaah kode di atas:

Baris 3 (type="email"): nilai budi-example.com tanpa @ ditahan lengkap dengan pesan bawaan — tanpa satu atribut validasi tambahan pun.
Baris 5 (type="url"): nilai example.com tanpa skema tidak lolos — aturan bawaan menuntut bentuk https://example.com; kolom ini opsional, jadi kosong tetap sah.
Baris 7 (type="number"): ketikan empat diabaikan sejak awal — kotak angka menyaring karakter non-numerik begitu diketik, bukan menunggu submit.
Baris 9 (type="date"): nilai yang keluar dari pemilih kalender selalu berformat sah; isian salah format nyaris tidak mungkin kecuali nilai diisi lewat skrip dari luar.
Hasil terkirim: karakter : dan / dienkode (%3A, %2F) — perilaku pengiriman biasa, bukan galat.

Ringkasan #

email, url, number, date, dan time membawa validasi format bawaan.
Isian salah format menahan submit lengkap dengan pesan bawaan browser.
type="text" tidak memeriksa apa pun — kolom angka harus memakai type="number".
Pemilihan type yang tepat adalah lapisan validasi pertama sebelum atribut lain.
type="tel" bebas aturan format — batas formatnya kita pasang sendiri dengan pattern.

Chapter berikutnya membuka mesin yang menjalankan semuanya: bagaimana browser memeriksa, memblokir, dan melaporkan hasilnya.