Atribut pattern <input> HTML

Tanda <input> HTML

Definisi dan Penggunaan

pattern Atribut ini menentukan ekspresi reguler, dalam proses pengiriman formulir, nilai elemen <input> akan dicek berdasarkan ekspresi reguler ini.

Perhatian:pattern Atribut ini berlaku untuk jenis input berikut:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Petunjuk:gunakan Atribut title global untuk mendeskripsikan pola ini, untuk membantu pengguna memahami.

Petunjuk:Silakan di dalam Panduan JavaScript Belajar lebih banyak tentang ekspresi reguler di dalam.

Contoh

Contoh 1

Berikut adalah formulir HTML yang mengandung satu field input, field ini hanya dapat mengandung tiga huruf (tidak boleh mengandung angka atau karakter khusus):

<form action="/action_page.php">
  <label for="country_code">Kode Negara:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Kode Negara Tiga Huruf"><br><br>
  <input type="submit">
</form>

Coba sendiri

Contoh 2

Di bawah ini adalah elemen <input> dengan atribut type "password", yang harus mengandung setidaknya 8 karakter:

<form action="/action_page.php">
  <label for="pwd">Kata Sandi:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Terdapat setidaknya 8 karakter">
  <input type="submit">
</form>

Coba sendiri

Contoh 3

Di bawah ini adalah elemen <input> dengan atribut type "password", yang harus mengandung 8 karakter atau lebih, minimal satu angka, satu huruf besar dan satu huruf kecil:

<form action="/action_page.php">
  <label for="pwd">Kata Sandi:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Harus mengandung setidaknya delapan karakter, termasuk satu angka, satu huruf besar dan satu huruf kecil">
  <input type="submit">
</form>

Coba sendiri

Contoh 4

Di bawah ini adalah elemen <input> dengan atribut type "email", yang harus diikuti urutan berikut: characters@characters.domain.

Dibuat dari karakter dan simbol @, diikuti dengan karakter lain, lalu diikuti dengan simbol ".". Di belakang simbol ".", minimal tambahkan dua 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>

Coba sendiri

Contoh 5

Di bawah ini adalah elemen <input> dengan atribut type "search", yang tidak boleh mengandung karakter berikut: ' atau " .

<form action="/action_page.php">
  <label for="search">Cari:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Input yang salah">
  <input type="submit">
</form>

Coba sendiri

Contoh 6

Di bawah ini adalah elemen <input> dengan atribut type "url", yang harus dimulai dengan http:// atau https://, diikuti dengan setidaknya satu karakter:

<form action="/action_page.php">
  <label for="website">Halaman utama:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Termasuk http://">
  <input type="submit">
</form>

Coba sendiri

Sintaks

<input pattern="regexp">

Nilai atribut

Nilai Deskripsi
regexp Tentukan ekspresi reguler untuk memeriksa nilai elemen <input>.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Keterangan:pattern Atribut adalah atribut baru di HTML5.

Tanda <input> HTML