Contoh
Bentuk HTML dengan field input yang dapat berisi hanya tiga huruf (tidak ada angka atau karakter khusus):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
Cobalah sendiri " Lebih "Cobalah Sendiri" contoh di bawah ini.
Definisi dan Penggunaan
The pattern atribut menentukan ekspresi reguler bahwa <input> nilai elemen diperiksa terhadap.
Catatan: pattern atribut bekerja dengan jenis masukan berikut: text, date, search, url, tel, email , dan password .
Tip: Gunakan global title atribut untuk menggambarkan pola untuk membantu pengguna.
Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung atribut.
Atribut | |||||
---|---|---|---|---|---|
pattern | 5.0 | 10,0 | 4.0 | Tidak didukung | 9.6 |
Perbedaan Antara HTML 4.01 dan HTML5
The pattern atribut baru dalam HTML5.
Sintaksis
<input pattern="regexp">
atribut Nilai
Nilai | Deskripsi |
---|---|
regexp | Menentukan kalimat biasa bahwa <input> nilai elemen diperiksa terhadap |
Contoh lebih
Contoh
Sebuah <input> elemen dengan type="password" yang harus berisi 6 atau lebih karakter:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Cobalah sendiri " Contoh
Sebuah <input> elemen dengan type="password" yang harus berisi 8 atau lebih karakter yang setidaknya satu nomor, dan satu huruf besar dan huruf kecil:
<form action="demo_form.asp">
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>
Cobalah sendiri " Contoh
Sebuah <input> elemen dengan type="email" yang harus dalam urutan sebagai berikut: karakter @ karakter. domain (karakter diikuti dengan tanda @, diikuti oleh karakter lebih, dan kemudian "."
Setelah "." tanda, Anda hanya dapat menulis 2 sampai 3 huruf dari ke z:
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
Cobalah sendiri " Contoh
Sebuah <input> elemen dengan type="search" yang TIDAK BISA berisi karakter berikut: ' atau "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Cobalah sendiri " Contoh
Sebuah <input> elemen dengan type="url" yang harus dimulai dengan http:// atau https:// diikuti oleh setidaknya satu karakter:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Cobalah sendiri "