این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Pattern در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Pattern در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Pattern در HTML
صفت pattern
صفتی است که با استفاده از آن ما میتوانیم یک الگو / قانون مشخصی رو برای مقادیری که داخل Input ها وارد میشه تعریف نماییم.
خب این یعنی چی؟! یعنی مثلا ما میتونیم تعریف کنیم که کاربر فقط بتواند ۶ کاراکتر اونم فقط حروف بزرگ انگلیسی وارد کند یا مثلا بتواند فقط عدد وارد کند و.. که در ادامه با آنها آشنا خواهید شد.
صفت Pattern را فقط در تگ های Input از نوع text, date, search, url, tel, email و password میتوان استفاده کرد.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
<input> |
Free-Learn
مثال از صفت Pattern در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : کاربر باید ۵ کاراکتر از حروف کوچک یا بزرگ انگلیسی وارد کنه
1 |
<input type="text" pattern="[A-Za-z]{5}"> |
مثال شماره ۲ :کاربر باید ۸ کاراکتر از حروف کوچک و بزرگ انگلیسی بهمراه عدد وارد کنه
1 |
<input type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"> |
مثال شماره ۳ : کاربر باید یک آدرس ایمیل با ساختار ( test@test.com ) وارد کند
1 |
<input type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> |
مثال شماره ۴ :کاربر باید یک آدرس سایت که با https شروع شده باشه وارد کند
1 |
<input type="text" pattern="https://.+"> |
مثال شماره ۵ : استفاده از صفت Title جهت ایجاد راهنما برای کاربر
1 |
<input type="text" pattern="https://.+" title="یه توضیح کوتاه در اینجا"> |
مثال شماره ۶ : کاربر باید ۵ حرف اونم فقط حروف فارسی وارد کند
1 |
<input type="text" pattern="[آ-ی]{5}"> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت pattern
در HTML پشتیبانی میکنند یا خیر.
نام صفت | Chrome | Firefox | Opera | Safari | Edge |
pattern | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
1 |
<input pattern="Regular_Expressions"> |
Free-Learn
جدول مقادیر صفت Pattern در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
Regular_Expressions | یک عبارت باقاعده برای مقدار اینپوت مشخص میکند آموزش کاملتر عبارات باقاعده در جاوااسکریپت |
Free-Learn
نکات و توضیحات
- از این صفت فقط میتوان در اینپوت های نوع Text, Date, Search, URL, Tel, Email, و Password استفاده نمود.
- با استفاده از صفت Title نیز میتوان یک متن راهنما را برای اطلاع رسانی به کاربر که بدونه چی باید وارد کنه، مشخص کرد.