سمة نمط <input> HTML

❮ 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السمة العامة لوصف النمط لمساعدة المستخدم.

نصيحة: تعرف على المزيد حول التعبيرات العادية في برنامج 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>