Atribut pola HTML
Definisi dan Penggunaan
Atribut patternmenentukan ekspresi reguler yang nilai
<input>elemennya diperiksa.
Catatan: Atribut patternberfungsi dengan jenis input berikut: teks, tanggal, pencarian, url, telp, email, dan kata sandi.
Tip: Gunakan atribut global titleuntuk menjelaskan pola untuk membantu pengguna.
Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Berlaku untuk
Atribut patterndapat digunakan pada elemen berikut:
| Elemen | Atribut |
|---|---|
| <masukan> | pola |
Contoh
Contoh Masukan
Formulir HTML dengan bidang input yang hanya dapat berisi tiga huruf (tanpa angka atau karakter khusus):
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Contoh Kata Sandi
Elemen <input> dengan type="password" yang harus berisi 6 karakter atau lebih:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
Contoh Kata Sandi
Elemen <input> dengan type="password" yang harus berisi 8 karakter atau lebih yang terdiri dari setidaknya satu angka, dan satu huruf besar dan kecil:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung atribut tersebut.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |