HTML <input> kalıbı Özellik

❮ HTML <input> etiketi

Örnek

Yalnızca üç harf içerebilen (sayı veya özel karakter içermeyen) giriş alanına sahip bir HTML formu:

<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>

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.


Tanım ve Kullanım

Nitelik , form gönderiminde öğenin değerinin kontrol patternedildiği düzenli bir ifadeyi belirtir . <input>

Not: Özellik patternşu giriş türleriyle çalışır: metin, tarih, arama, url, tel, e-posta ve parola.

İpucu:title Kullanıcıya yardımcı olmak için kalıbı tanımlamak için global özniteliği kullanın .

İpucu: JavaScript eğitimimizde normal ifadeler hakkında daha fazla bilgi edinin .


Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Attribute
pattern 5.0 10.0 4.0 10.1 9.6

Sözdizimi

<input pattern="regexp">

Özellik Değerleri

Value Description
regexp Specifies a regular expression that the <input> element's value is checked against


Daha fazla örnek

Örnek

8 veya daha fazla karakter içermesi gereken type="password" içeren bir <input> öğesi:

<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>

Örnek

En az bir sayıdan ve bir büyük ve küçük harften oluşan 8 veya daha fazla karakter içermesi gereken type="password" içeren bir <input> öğesi:

<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>

Örnek

Aşağıdaki sırada olması gereken type="email" içeren bir <input> öğesi: karakter @ karakter . etki alanı (karakterlerin ardından bir @ işareti, ardından daha fazla karakter ve ardından bir "."

Sonra "." a'dan z'ye en az 2 harf ekleyin:

<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>

Örnek

type="search" içeren bir <input> öğesi, şu karakterleri İÇERMEZ: ' veya "

<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>

Örnek

http:// veya https:// ile başlayıp en az bir karakterle devam etmesi gereken type="url" içeren bir <input> öğesi:

<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>

❮ HTML <input> etiketi