คุณสมบัติ pattern ของ HTML <input>

HTML แบบตัวอักษร <input>

การกำหนดและการใช้งาน

pattern คุณสมบัตินี้กำหนด ประดิษฐ์ประกาศกรณ์ และตรวจสอบค่าขององค์ประกอบ <input> ตามประดิษฐ์ประกาศกรณ์ดังกล่าวเมื่อส่งฟอร์ม

ข้อเนื่อง:pattern คุณสมบัตินี้ถูกใช้สำหรับชนิดอิनพุทต่อไปนี้:

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

คำแนะนำ:ใช้ คุณสมบัติ title ทั่วไป อธิบายรูปแบบนี้เพื่อช่วยให้ผู้ใช้เข้าใจ

คำแนะนำ:โปรดเข้าสู่ คู่มือ JavaScript เรียนรู้เพิ่มเติมเกี่ยวกับ ประดิษฐ์ประกาศกรณ์ใน HTML

ตัวอย่าง

ตัวอย่าง 1

นี่คือฟอร์ม HTML ที่มีช่องว่างเพียงตัวอักษรสามตัว (ไม่มีตัวเลขหรือสัญลักษณ์พิเศษ):

<form action="/action_page.php">
  <label for="country_code">รหัสประเทศ：</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="รหัสประเทศสามตัว"><br><br>
  <input type="submit">
</form>

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

ตัวอย่าง 2

ข้างต้นคือ <input> มีค่าแอตทริบิวต์ type ว่า "password" ต้องมีอักษรอย่างน้อย 8 ตัว

<form action="/action_page.php">
  <label for="pwd">รหัสผ่าน：</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="แปดตัวหรือมากกว่า">
  <input type="submit">
</form>

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

ตัวอย่าง 3

ข้างต้นคือ <input> มีค่าแอตทริบิวต์ type ว่า "password" ต้องมีอักษร 8 ตัวหรือมากกว่า และต้องมีตัวเลขหนึ่งตัว ตัวอักษรใหญ่หนึ่งตัว และตัวอักษรเล็กหนึ่งตัว

<form action="/action_page.php">
  <label for="pwd">รหัสผ่าน：</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="ต้องมีอักษรอย่างน้อยแปดตัว ต้องมีตัวเลขหนึ่งตัว ตัวอักษรใหญ่หนึ่งตัว และตัวอักษรเล็กหนึ่งตัว">
  <input type="submit">
</form>

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

ตัวอย่าง 4

ข้างต้นคือ <input> มีค่าแอตทริบิวต์ type ว่า "email" ต้องเรียงตามลำดับต่อไปนี้: characters@characters.domain

ประกอบด้วยอักษรและสัญลักษณ์ @ ตามด้วยอักษรอีกหลายตัว แล้วตามด้วยสัญลักษณ์ "." ในบริเวณหลังสัญลักษณ์ "." ต้องมีอักษรอย่างน้อยสองตัวจาก a ถึง z

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

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

ตัวอย่าง 5

ข้างต้นคือ <input> มีค่าแอตทริบิวต์ type ว่า "search" ไม่สามารถมีอักษรต่อไปนี้: ' หรือ "

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="การใส่ข้อมูลที่ผิดพลาด">
  <input type="submit">
</form>

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

ตัวอย่าง 6

ข้างต้นคือ <input> มีค่าแอตทริบิวต์ type ว่า "url" ต้องเริ่มด้วย http:// หรือ https:// แล้วตามด้วยอักษรอย่างน้อยหนึ่งตัว

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

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

รูปแบบ

<input pattern="regexp">

คุณสมบัติค่า

ค่า การอธิบาย
regexp กำหนดประกาศแบบ Regular Expression สำหรับตรวจสอบค่าของ <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>