ตัวอย่าง
รูปแบบ HTML ที่มีช่องใส่ที่สามารถมีเพียงสามตัวอักษร (ไม่มีตัวเลขหรืออักขระพิเศษ):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
pattern แอตทริบิวต์ระบุนิพจน์ปกติว่า <input> ค่าองค์ประกอบของการตรวจสอบกับ
หมายเหตุ: pattern แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: text, date, search, url, tel, email และ password
เคล็ดลับ: ใช้ทั่วโลก title แอตทริบิวต์เพื่ออธิบายรูปแบบที่จะช่วยให้ผู้ใช้
เคล็ดลับ: การเรียนรู้เพิ่มเติมเกี่ยวกับ การแสดงผลปกติ ในการกวดวิชา JavaScript ของเรา
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่แอตทริบิวต์
| คุณลักษณะ | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | ได้รับการสนับสนุน | 9.6 |
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
pattern แอตทริบิวต์เป็นของใหม่ใน HTML5
วากยสัมพันธ์
<input pattern="regexp">
ค่าแอตทริบิวต์
| ความคุ้มค่า | ลักษณะ |
|---|---|
| regexp | ระบุการแสดงออกปกติว่า <input> ค่าองค์ประกอบของการตรวจสอบกับ |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
<input> องค์ประกอบที่มี type="password" ที่จะต้องมีอย่างน้อย 6 ตัวอักษร:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
ลองตัวเอง» ตัวอย่าง
<input> องค์ประกอบที่มี type="password" ที่จะต้องมี 8 หรือมากกว่าตัวอักษรที่มีจำนวนอย่างน้อยหนึ่งและเป็นหนึ่งในตัวพิมพ์ใหญ่และพิมพ์เล็กตัวอักษร:
<form action="demo_form.asp">
Password: <input
type="password" name="pw" 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>
ลองตัวเอง» ตัวอย่าง
<input> องค์ประกอบที่มี type="email" ที่จะต้องอยู่ในลำดับต่อไปนี้: ตัวละครตัวละคร @ โดเมน (ตัวอักษรตามด้วยเครื่องหมาย @ ตามด้วยตัวอักษรมากขึ้นและแล้ว "."
หลังจากที่ "." เข้าสู่ระบบคุณสามารถเขียน 2-3 ตัวอักษรจาก A ถึง Z:
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
ลองตัวเอง» ตัวอย่าง
<input> องค์ประกอบที่มี type="search" ที่ไม่สามารถมีตัวอักษรต่อไปนี้: ' หรือ "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
ลองตัวเอง» ตัวอย่าง
<input> องค์ประกอบที่มี type="url" ที่จะต้องเริ่มต้นด้วย http:// หรือ https:// ตามด้วยตัวอักษรอย่างน้อยหนึ่ง:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
ลองตัวเอง»