illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

معرفی HTML 5 : فصل اول – جلسه پنجم (معتبر سازی فرم ها)

9966 ۷ بهمن ۹۲

با عرض سلام خدمت همه دوستان عزیز.در این جلسه از آموزش html5 به معتبر سازی فرم ها توسط قابلیت های html5 خواهیم پرداخت. پس با ما همراه باشید.

نکته :

بنده در سری آموزشی HTML ، در قسمت کار با فرم ها، به تفصیل در مورد بعضی از تگ ها مانند انواع input های جدید و ... که در HTML5 معرفی شده اند توضیح دادم، و در این جا از توضیح دوباره آنها پرهیز می کنم. دوستانی که این قسمت ها از آموزش html را نخوانده اند به لینک های زیر رجوع کنند.

 

معتبر سازی فرم ها

کد زیر را در نظر بگیرید.

نتیجه کد در مرورگر :

f1-j5-p1

کد فوق یک فرم تماس با ما است و حاوی 3 فیلد نام، تلفن و آدرس ایمیل است، فیلد اول و سوم اطلاعات ضروری و فیلد دوم اختیاری است.

حال به معتبرسازی فرم ایجاد شده می پردازیم :

اولین قسمت در معتبرسازی یک فرم، تعیین داده مورد نیازی است که کاربر بایستی آن را وارد کند.

استفاده از تگ های مخصوص آن داده روش مناسبی است، به طور مثال استفاده از input email برای یک آدرس ایمیل یا input url برای آدرس وب و یا input password برای وارد کردن یک پسورد.

اما با این حال فرم نیاز به معتبرسازی بیشتری دارد، به طور مثال ما فقط ایمیل هایی را می پذیریم که gmail باشند، یا پسورد هایی رو می پذیریم که فقط از حروف تشکیل شده باشند و ...، ایجاد چنین شروطی معمولا با استفاده از جاوااسکریپت قابل انجام هست اما در اینجا میخواهیم با استفاده از html5 این کارها را انجام دهیم :

Placeholder

با استفاده از صفت placeholder می توان یک مقدار پیشفرض را در input قرار داد تا که کاربر توانایی تشخیص داده مورد نیاز را داشته باشد. به مثال زیر دقت کنید :

نتیجه کد در مرورگر :

f1-j5-p2

با استفاده از این صفت داده های دقیقتر و به یک اونیفورم (شبیه به هم) را دریافت خواهید کرد.

با طور مثال شاید با دیدن اولین تگ بنظر برسد فقط نام موردنیاز است، اما با استفاده از placeholder تعیین کردیم که نام و نام خانوادگی مورد نیازمان است. یا در تگ دوم تعیین کردیم که شماره تماس، منظور شماره موبایل است و ...

required  

با استفاده از این صفت بولین، می توان پر کردن یک فیلد را ضروری یا اختیاری تعیین کرد.

به مثال زیر دقت کنید :

نتیجه کد در مرورگر :

f1-j5-p3

می بینید که در صورت خالی بودن فیلد required مرورگر یک پیغام خطا را نمایش می دهد.

در ضمن می توان با استفاده از صفت title توضیحات دیگری نیز به پیغام خطا اضافه کرد

به مثال زیر دقت کنید :

نتیجه کد در مرورگر :

f1-j5-p4

الگوی داده ی مورد نظر، pattern

بعد از تعیین دو مورد فوق، نوبت به تعیین یک قاعده برای داده های دریافتی می رسد، قبلا چنین قوانین و قواعدی بیشتر با استفاده از جاوااسکریپت ایجاد می شدند، اما به دلیل استفاده زیاد از این مورد، به صورت پیشفرض در html قرار گرفتند.

به طور مثال ما نیاز به کدی داریم که از 7 کاراکتر تشکیل شده باشد، 3 کاراکتر اول حروف بزرگ A تا Z یه خط فاصله و 3 کاراکتر آخر عدد باشند. برای ایجاد چنین الگویی ، کدمان به شکل زیر خواهد بود :

 

اگر به مقدار صفت pattern دقت کنید، خواهید دید که از چند قسمت تشکیل شده است، تصویر زیر توضیح دهنده ی این قسمت هاست :

f1-j5-p5

برای تعیین نوع داده از الگو های زیر استفاده کرد :

[a-z] : مجموعه حروف کوچک a تا z را قبول می کند

[A-Z] : مجموعه حروف بزرگ A تا Z را قبول می کند

[a-z , A-Z] : مجموعه حروف کوچک و بزرگ انگلیسی را قبول می کند.

[x,y,z] : فقط سه حرف x و y و z را قبول می کند

[1,3,5,7,9] : فقط پنج عدد 1 و 3 و 5 و 7 و 9 را قبول می کند

و...

به طور مثال برای ایجاد  یک الگو برای دریافت فقط ایمیل های gmail می توان از pattern زیر استفاده کرد :

نکته :

دقت کنید که اگر یک متن ثابتی مدنظرتان است، آن را درون قلّاب [] قرار نمی دهیم. مانند متن @gmail.com در مثال فوق.

ایجاد خطاهای اختصاصی

برای اینکه به خطاهای پیشفرض محدود نباشیم، که معمولا، به زبان انگلیسی هستند، می توان با استفاده از جاوااسکریپت خطاهای اختصاصی، و به زبان فارسی ایجاد کرد.

به کد html زیر دقت کنید

ما در رویداد oninput یک فیلد، فانکشن validate رو صدا کردیم تا کار خطا یابی را برای ما انجام دهد.

(مهم نیست که آن خطا چه باشد، هدف ایجاد پیغام خطای آن است)

حال کد جاوااسکریپت زیر را نیز در کنار کدهای فرم قرار دهید.

با استفاده از کد فوق تعیین کرده ایم که اگر متن درون فیلد کمتر از 20 کاراکتر بود پیغام "متن وارد شده کوتاه است" را نمایش دهد.

نتیجه کد در مرورگر :

f1-j5-p6

تگ datalist

شاید برای شما پیش آمده است که بخواهید فیلدی داشته باشید که بتوان در آن فقط چند مقدار از پیش تعیین شده وارد کرد، شاید اولین راه حلی که به ذهنتان خطور کند استفاده از تگ combobox یا input list است.

درست است، استفاده از این تگها راه حل مناسبی است. اما اگر بخواهیم، به یک input text چنین خاصیتی بدهیم، حتما اولین راه حل استفاده jquery و ajax خواهد بود.!

HTML5 برای حل این مشکل تگ datalist را معرفی کرد، که می توان برای input ها نیز مانند list ها مقدار از پیش تعیین شده ای را در نظر گرفت.

برای اینکار input زیر را در نظر بگیرید

حال با کد زیر لیست اسامی مورد نظر را وارد می کنیم :

دقت کنید که به تگ input صفت list را اضافه کردیم، و مقدار آن بایستی با id تگ datalist یکی باشد.

نتیجه کد در مرورگر :

f1-j5-p7

اگر متوجه شده باشید، ما دو از دو صفت label و value  برای option ها استفاده کرده ایم، مقدار label می تواند هر چیزی باشد، و مقداری که ارسال می شود، مقدار صفت value است.

خب دوستان امیدوارم که خسته نباشید، تا اینجا با همه ی تگ های html5 آشنا شدیم. به طور کامل آن را بررسی کردیم و طریقه استفاده از آن ها را یاد گرفتیم. پس فصل اول این سری تمام شده به حساب می آید. (البته در این فصل کل تگ های HTML5 را بررسی نکردیم و فقط تگ هایی که در سری قبلی معرفی نشده بودن رو مورد بررسی قرار دادیم. )

در فصل بعدی به کار کردن با API های  html5 خواهیم پرداخت.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    علی امینی(۷ بهمن ۱۳۹۲)

    خسته نباشی
    واقعا آموزش عالی بود

  • ‏‏

    سلام و خدا قوت خوب بید نه عالی بید…

  • ‏‏
    حسین محمدی(۷ بهمن ۱۳۹۲)

    خیلی ممنون آموزش خوبی بود….
    برای استفاده از pattern باید Regular Expression بلد باشیم؟؟؟

    • ‏‏
      سجاد دریس(۸ بهمن ۱۳۹۲)

      سلام.
      نه به اون صورت که توی سایر زبان هاست و فقط همین هایی هست که توضیح دادم. ولی در کل آره چونکه از اون روش مقداردهی تبعیت میکنه.

  • ‏‏
    طراحی سایت(۹ بهمن ۱۳۹۲)

    واقعا ممنون منتظر آموزش های بعدی هستم

  • ‏‏
    1234567890(۱۵ بهمن ۱۳۹۲)

    ممنون عالی بود.

  • ‏‏

    سلام و خسته نباشید حدمت اساتید محترم و ضمن تبریک سال نو.
    یه سوالی داشتم .تگ em چی هست اگه امکانش هست توضیح بدید که چرا ازین تگ استفاده شده و با استفاده نکردنش چه فرقی داره؟

    • ‏‏
      لقمان آوند(۱ فروردین ۱۳۹۳)

      یکی از تگ های فرمت بندی متن هست و برای نمایش متن های تاکید شده و مهم معمولا ازش استفاده میشه . موتور های جستجو متن درون این تگ رو هم می تونن مهم قلمداد کنند . توضیحات بیشتر …

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram