خصائص pattern لـ <input> في HTML

علامة <input> في HTML

التعريف والاستخدام

pattern تحدد الخاصية الحالية تعبير النص المنطقي، ويتم فحص قيمة عنصر <input> بناءً على هذا التعبير عند تقديم النموذج.

ملاحظة:pattern خصائص تنطبق على أنواع الإدخال التالية:

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

نصيحة:استخدام خاصية title العالمية لوصف النمط، مما يساعد المستخدمين على فهمه.

نصيحة:يرجى زيارة دروس JavaScript تعلم المزيد عن تعبيرات النصية المنطقية.

مثال

مثال 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> يحتوي على خاصية نوع "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> يحتوي على خاصية نوع "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> يحتوي على خاصية نوع "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> يحتوي على خاصية نوع "search"، لا يمكن أن يحتوي على الأحرف التالية: ' أو " .

<form action="/action_page.php">
  <label for="search">البحث:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="مُدخل غير صالح">
  <input type="submit">
</form>

آزمایش کنید

مثال 6

هنا مثال على عنصر <input> يحتوي على خاصية نوع "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 عبارت جستجوی منظم برای بررسی مقدار <input> است.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که از این خصوصیت پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

توضیح:pattern خصوصیت جدید در HTML5 است.

علامة <input> في HTML