Atribut pola <input> HTML
Contoh
Formulir HTML dengan bidang input yang hanya dapat berisi tiga huruf (tanpa angka atau karakter khusus):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Atribut patternmenentukan ekspresi reguler yang nilai
<input>elemen diperiksa terhadap pengiriman formulir.
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.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung atribut tersebut.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintaksis
<input pattern="regexp">
Nilai Atribut
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Lebih Banyak Contoh
Contoh
Elemen <input> dengan type="password" yang harus berisi 8 karakter atau lebih:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Contoh
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">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
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>
Contoh
Elemen <input> dengan type="email" yang harus dalam urutan berikut: karakter @ karakter . domain (karakter diikuti oleh tanda @, diikuti oleh lebih banyak karakter, dan kemudian "."
Setelah "." tanda, tambahkan minimal 2 huruf dari a sampai z:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Contoh
Elemen <input> dengan type="search" yang TIDAK BISA berisi karakter berikut: ' atau "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Contoh
Elemen <input> dengan type="url" yang harus dimulai dengan http:// atau https:// diikuti oleh setidaknya satu karakter:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
tag <input> HTML