HTML <input> pattern attribute

HTML <input> ស្លាក

Paglalarawan at Paggamit

pattern Ang attribute na ito ay nagtatalaga ng regular expression, na sasailalim sa pagsusuri ng halaga ng elemento <input> sa pagpapakita ng form.

Babala:pattern Ang attribute na ito ay ginagamit para sa mga sumusunod na uri ng input:

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

Paalam:Ginagamit ang Global na title attribute Para sa paglalarawan ng pattern na ito, upang makatulong sa pag-unawa ng user.

Paalam:Sa aming JavaScript ความรู้ Alamin mo ang mas maraming kaalaman tungkol sa regular expression sa pamamagitan ng aming kurso.

Eksampyo

Halimbawa 1

Nakita namin sa ibaba ang isang form ng HTML na mayroon lamang isang input field:

<form action="/action_page.php">
  <label for="country_code">Kode ng bansa:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Tatlong titik na code ng bansa"><br><br>
  <input type="submit">
</form>

ทดลองด้วยตัวเอง

Halimbawa 2

Isa itong <input> element na may attribute na "password", na dapat magkaroon ng walong character o higit pa:

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Walong character o higit pa">
  <input type="submit">
</form>

ทดลองด้วยตัวเอง

Halimbawa 3

Isa itong <input> element na may attribute na "password", na dapat magkaroon ng walong character o higit pa, na dapat magkaroon ng isang numero, isang malalaking titik at isang maliit na titik:

<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="Dapat magkaroon ng hindi bababa sa walong character, na dapat magkaroon ng isang numero, isang malalaking titik at isang maliit na titik">
  <input type="submit">
</form>

ทดลองด้วยตัวเอง

Halimbawa 4

Isa itong <input> element na may attribute na "email", na dapat sumunod sa sumusunod na order: characters@characters.domain.

Gumawa ng character at @ symbol, sumunod ng mas maraming character, at pagkatapos ay isang "." symbol. Sa likod ng "." symbol, magdagdag ng dalawang letter mula sa a hanggang 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>

ทดลองด้วยตัวเอง

Halimbawa 5

Isa itong <input> element na may attribute na "search", na hindi dapat magkaroon ng mga sumusunod na character: ' o " .

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

ทดลองด้วยตัวเอง

Halimbawa 6

Isa itong <input> element na may attribute na "url", na dapat magsimula sa http:// o https:// at may kahit anong character na sumusunod:

<form action="/action_page.php">
  <label for="website">หน้าเว็บ:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="มี http://">
  <input type="submit">
</form>

ทดลองด้วยตัวเอง

ระบุ

<input pattern="regexp">

ค่าแปร

ค่า คำอธิบาย
regexp กำหนดตัวแปรประกาศเริ่มต้นของ HTML <input> ด้วยสมมาตรทางการเขียน

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้บอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนตัวแปรนี้อย่างเต็มที่

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

หมายเหตุ：pattern ตัวแปรคือตัวแปรใหม่ใน HTML5

HTML <input> ស្លាក