HTML <input> รูปแบบแอตทริบิวต์
ตัวอย่าง
แบบฟอร์ม HTML ที่มีช่องใส่ข้อมูลที่ประกอบด้วยตัวอักษรได้เพียงสามตัว (ไม่มีตัวเลขหรืออักขระพิเศษ):
<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>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แอตทริบิวต์patternระบุนิพจน์ทั่วไปที่
<input>มีการตรวจสอบค่าขององค์ประกอบในการส่งแบบฟอร์ม
หมายเหตุ:แอตทริบิวต์patternใช้งานได้กับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความ วันที่ ค้นหา url โทรศัพท์ อีเมล และรหัสผ่าน
เคล็ดลับ:title ใช้ แอตทริบิวต์global เพื่ออธิบายรูปแบบเพื่อช่วยเหลือผู้ใช้
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับนิพจน์ทั่วไปในบทช่วยสอน JavaScript ของเรา
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนแอตทริบิวต์อย่างเต็มที่
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
ไวยากรณ์
<input pattern="regexp">
ค่าแอตทริบิวต์
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
<input> องค์ประกอบที่มีประเภท="รหัสผ่าน" ที่ต้องมีอักขระ 8 ตัวขึ้นไป:
<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>
ตัวอย่าง
องค์ประกอบ <input> ที่มีประเภท="รหัสผ่าน" ที่ต้องมีอักขระ 8 ตัวขึ้นไปที่มีตัวเลขอย่างน้อยหนึ่งตัว และตัวพิมพ์ใหญ่และตัวพิมพ์เล็กหนึ่งตัว:
<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>
ตัวอย่าง
<input> องค์ประกอบที่มีประเภท = "อีเมล" ที่ต้องอยู่ในลำดับต่อไปนี้: ตัวอักษร @ ตัวอักษร โดเมน (อักขระตามด้วยเครื่องหมาย @ ตามด้วยอักขระเพิ่มเติม แล้วตามด้วย "."
หลังจาก "." ลงชื่อ เพิ่มอย่างน้อย 2 ตัวอักษรจาก a ถึง 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>
ตัวอย่าง
<input> องค์ประกอบที่มีประเภท="ค้นหา" ที่ไม่สามารถมีอักขระต่อไปนี้: ' หรือ "
<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>
ตัวอย่าง
<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="Include http://">
<input type="submit">
</form>
❮ แท็ก HTML <input>