HTML <input> pattern özelliği

HTML <input> etiketi

Tanım ve Kullanım

pattern Özellik, formu gönderirken <input> ögesinin değerini düzenli ifadeye göre kontrol eder.

Dikkat:pattern Özellik, aşağıdaki girdi türlerine uygundur:

  • metin
  • tarih
  • arama
  • url
  • tel
  • e-posta
  • şifre

İpucu:Kullanarak Küresel title özelliği Bu kalıbı tanımlamak için kullanın, böylece kullanıcıların anlayabilmesi için yardımcı olun.

İpucu:Lütfen bizim JavaScript Eğitimi Daha fazla bilgi edinmek için düzenli ifadeler hakkında bilgi edin.

Örnek

Örnek 1

Aşağıda, sadece üç harfli bir girdi alan (sayı veya özel karakter içermeyen) bir HTML formu bulunmaktadır:

<form action="/action_page.php">
  <label for="country_code">Ülke kodu:</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="Üç harfli ülke kodu"><br><br>
  <input type="submit">
</form>

Kişisel olarak deneyin

Örnek 2

Aşağıda, "password" özelliğine sahip bir <input> ögesi verilmiştir, en az 8 karakter içermelidir:

<form action="/action_page.php">
  <label for="pwd">Şifre:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Sekiz veya daha fazla karakter">
  <input type="submit">
</form>

Kişisel olarak deneyin

Örnek 3

Aşağıda, "password" özelliğine sahip bir <input> ögesi verilmiştir, 8 veya daha fazla karakter içermelidir, en az bir rakam, bir büyük harf ve bir küçük harf içermelidir:

<form action="/action_page.php">
  <label for="pwd">Şifre:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="En az sekiz karakter içermelidir, bunlardan bir tanesi rakam, bir tanesi büyük harf ve bir tanesi küçük harf olmalıdır">
  <input type="submit">
</form>

Kişisel olarak deneyin

Örnek 4

Aşağıda, "email" özelliğine sahip bir <input> ögesi verilmiştir, characters@characters.domain sırasına göre olmalıdır:

Karakterler ve @ sembolünden oluşur, ardından daha fazla karakter gelir ve bir "." sembolü gelir. "." sembolü ardından, en az iki a'dan z'ye harf ekleyin:

<form action="/action_page.php">
  <label for="email">Elektronik posta:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Kişisel olarak deneyin

Örnek 5

Aşağıda, "search" özelliğine sahip bir <input> ögesi verilmiştir, aşağıdaki karakterleri içermemelidir: ' veya " .

<form action="/action_page.php">
  <label for="search">Ara:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Geçersiz girdi">
  <input type="submit">
</form>

Kişisel olarak deneyin

Örnek 6

Aşağıda, "url" özelliğine sahip bir <input> ögesi verilmiştir, başlangıçta http:// veya https:// ile başlamalı ve ardından en az bir karakter izlemelidir:

<form action="/action_page.php">
  <label for="website">Ana Sayfa:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="http:// içerir">
  <input type="submit">
</form>

Kişisel olarak deneyin

Sözdizimi

<input pattern="regexp">

Özellik Değeri

Değer Açıklama
regexp <input> elementinin değerini kontrol eden düzenli ifadeyi belirtir.

Tarayıcı Desteği

Tablo içindeki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

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

Açıklama:pattern Özellik HTML5'teki yeni bir özelliktir.

HTML <input> etiketi