Atribut pattern

Kode pos Indonesia selalu lima digit. Nomor HP selalu diawali 08. Voucher kedai berbentuk KOPI-2026. Panjang dan rentang tidak bisa menangkap aturan searah semacam ini — yang dibutuhkan adalah pola. Atribut pattern menerima satu regular expression dan menjadikannya gerbang nilai.

Cocok Penuh atau Gagal #

Aturannya: pattern berisi satu regular expression yang harus dicocokkan penuh terhadap nilai kontrol. Mekanismenya: browser mengevaluasi pola dengan mesin RegExp JavaScript seolah nilai dibungkus ^ dan $ — kecocokan sebagian tidak dihitung. Pola [0-9]{5} menolak 101101 (enam digit) sebagaimana menolak 10a11; hanya tepat lima angka yang lolos.

Atribut pendampingnya adalah title: teks bebas yang menjelaskan format. Browser modern menyisipkan isi title ke dalam pesan galat — satu-satunya jalur HTML murni untuk memberi petunjuk pada saat penolakan terjadi. Tanpa title, pengguna hanya menerima pesan generik bahwa format belum cocok dengan permintaan pola.

pattern berlaku pada input bertipe teks: text, search, url, tel, email, dan password — bukan untuk number atau date.

Contoh: Kode Pos dan Nomor HP #

<form action="/daftar" method="post">
  <label for="kodepos">Kode pos</label>
  <input type="text" id="kodepos" name="kodepos" pattern="[0-9]{5}" title="Kode pos Indonesia: lima angka, contoh 10110" required>
  <label for="hp">Nomor HP</label>
  <input type="text" id="hp" name="hp" pattern="08[0-9]{8,11}" title="Nomor HP diawali 08, contoh 081234567890" required>
  <button type="submit">Daftar</button>
</form>

Data yang terkirim setelah Siti mengisi kedua kolom dengan benar:

kodepos=10110&hp=081234567890

Ketik 101101 — enam digit — lalu tekan Daftar: bubble galat memuat petunjuk dari title, “lima angka, contoh 10110”. Coba pula nomor HP yang tidak diawali 08 untuk melihat penolakan pola kedua; nilai yang cocok pola meloloskan pengiriman — pasangan datanya tampil di bawah form.

Pada demo, action diarahkan ke https://example.com/daftar — 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:

1. Baris 3 (pattern="[0-9]{5}"): kelas [0-9] berarti satu karakter angka; kuantisasi {5} mengulangnya lima kali — tepat lima digit, tidak lebih tidak kurang.
2. Baris 3 (title="..."): petunjuk format ikut tampil dalam pesan galat — pengguna yang keliru membaca “lima angka, contoh 10110”, bukan hanya pesan generik.
3. Baris 5 (pattern="08[0-9]{8,11}"): dua karakter pembuka literal 08, lalu delapan sampai sebelas angka bebas — menampung nomor pendek hingga nomor panjang.
4. Kombinasi required: tanpa required, kolom kosong lolos pemeriksaan pola — aturan yang sama dengan minlength.

Pola Umum Sehari-hari #

Seluruh pola pada tabel berlaku cocok penuh — kecocokan sebagian seperti 101 yang berada di tengah nilai A101BC tidak pernah dihitung sebagai lolos.

Ringkasan #

• pattern menuntut nilai cocok penuh dengan regular expression JavaScript.
• title menyumbang petunjuk format pada pesan galat bawaan.
• Nilai kosong lolos pola; kolom wajib perlu required terpisah.
• Gunakan pattern untuk format khusus — serahkan format standar kepada type.

Chapter berikutnya membahas validasi yang terpasang tanpa pola apa pun: setiap type membawa aturan bawaannya sendiri.