ویژگی pattern <input> در HTML

برچسب <input> HTML

تعریف و کاربرد

pattern ویژگی تعیین‌کننده عبارت‌های قوی است، که در هنگام ارسال فرم، مقدار <input> بر اساس این عبارت‌های قوی بررسی می‌شود.

توجه:pattern ویژگی‌های مربوط به نوع ورودی‌های زیر را دارد:

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

نکته:از ویژگی global 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> با attribute type به عنوان "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> با attribute type به عنوان "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> با attribute type به عنوان "email" است که باید به ترتیب زیر باشد: characters@characters.domain.

شامل کاراکترها و نشانه @ است، پس از آن کاراکترهای بیشتری دنبال می‌شود، سپس یک نشانه ".". پس از نشانه "." حداقل دو حرف از الف تا یاء باید اضافه شود:

<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> با attribute type به عنوان "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> با attribute type به عنوان "url" است که باید با http:// یا https:// شروع شود و پس از آن حداقل یک کاراکتر دنبال شود:

<form action="/action_page.php">
  <label for="website">صفحه اصلی:</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