در این آموزش با استفاده از خاصیت پترن در HTML فرم های وب سایت را به سادگی اعتبارسنجی کرده و سپس با کاربر تعامل می کنیم.
فرم ها در وب سایت ها کاربرد بسیار زیادی دارند. یکی از قابلیت های ورودی های وب سایت ها با رابط کاربری خوب، وجود سیستمی برای اعتبارسنجی اطلاعات است. به زبان ساده تر یعنی قبل از ارسال و ثبت اطلاعات، کاربر از صحت ساختار آن ها مطلع شود. برای مثال در input مربوط به ایمیل، یک آدرس ایمیل صحیح نوشته باشد. با ترکیب Pattern در HTML و انیمیشن در CSS می توان یک تجربه کاربری (User Experience) عالی برای کاربران وب سایت ایجاد کنیم.
پترن در HTML چیست؟
خاصیت pattern به عنوان یکی از صفات input ها است. مرورگر ورودی داخل input را با شرایط ذکر شده در پترن بررسی می کند. سپس در صورت صحت ساختار اطلاعات، فرم را ثبت می کند. نکته مهم روش نوشتن شرایط مقادیر در پترن است. pattern ها از دستورات regex یا همان Regular Expressions استفاده می کنند. با استفاده از regex می توان الگوها و ساختارهای پیچیده ای را به سادگی پیاده سازی کرد.
استفاده کامل از Regular Expressions نیاز به تجربه زیادی دارد. اما برای نیاز های ساده می توان به سادگی از آن استفاده کرد. برای مثال با نوشتن کد [a-z]، کاربر تنها از کاراکتر های کوچک انگلیسی می تواند استفاده کند. و یا برای مثال کد [۰-۹] تنها ورودی اعداد از صفر تا ۹ قابل قبول است. با ترکیب این کاراکتر ها نیز می توان موارد زیادی را به فرم ها اضافه کرد.
مثال regex در پترن HTML
مثال ها و نمونه ها زیادی وجود دارد. برای مثال در ورودی کلمه عبور می توان از کد زیر برای درج حداقل ۸ کاراکتر برای پسورد استفاده کرد:
<input pattern=".{8,}" />اینجا با کاراکتر نقطه تمام کاراکتر ها را آزاد و سپس تعداد آن ها را از ۸ تا بینهایت مشخص کردیم. به عنوان مثال دیگر با استفاده از کد زیر می توان کاربر را مجبور ورود آدرس ایمیل تنها از دامنه توسی کرد:
<input pattern=".+@tooc\.ir" />در این کد، ابتدا هر کاراکتری تا @ را آزاد اعلام کردیم. در بخش دوم تنها دامنه توسی را برای آدرس ایمیل مجاز کرده ایم.
تعامل بهتر با کاربر با pattern ها
پس از توانایی فرم در اعتبارسنجی، حال نوبت به تعامل با کاربر می رسد. با استفاده از چند تکنیک ساده در CSS می توان تجربه کاربری بهتری ایجاد کرد. برای مثال با نوشتن استایل متفاوت برای حالت invalid ورودی ها، کاربر متوجه وجود خطا می شود. در ویدیو بالا، با استفاده از CSS یک انیمیشن ساده و جذاب برای اخطار به کاربر در وب سایت ایجاد می کنیم.
دیدگاه خوبی داشتم
مرسی