tutorial pengembangan web terbaru
 

HTML <input> pattern Attribute

<HTML <input> tag

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 "

<HTML <input> tag