سمة نمط <input> HTML
مثال
نموذج 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
السمة العامة لوصف النمط لمساعدة المستخدم.
نصيحة: تعرف على المزيد حول التعبيرات العادية في برنامج 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> من النوع = "password" ويجب أن يحتوي على 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> من النوع = "password" الذي يجب أن يحتوي على 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> بالنوع = "email" والذي يجب أن يكون بالترتيب التالي: الأحرف @ الأحرف . المجال (الأحرف متبوعة بعلامة @ ، متبوعة بمزيد من الأحرف ، ثم "."
بعد "." قم بإضافة حرفين على الأقل من 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> من النوع = "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>