خلاصه مطالب استاد فصل طراحی فرم ها

پرسیده شده
فعالیت 1159 روز پیش
دیده شده 507 بار
3

ما اعتبارسنجی فرم هامون رو هم میتونیم در سمت سرور انجام بدیم هم سمت فرانت ولی چون سمت فرانت احتمال دور زدنش بیشتره و میتونن با دستکاری inspector بیان و تغیرش بدن معمولا این اعتبار سنجی رو سمت سرور انجام میدهند

 

 

نکات UX که در طراحی فرم هامون بهتر هستش که بیایم و رعایت بکنیم 

--------------------------------------------------------------------

 

1 - فرم ها را کوتاه کنید 

 

2- فواصل بین المان های فرم را برای جلوه بصری بهتر رعایت کنید 

 

3- خطاها و باید ها رو واضح بیان کنید 

 

4- از placeholder به عنوان برچسب استفاده نکنید ولی موقعی می تونیم استفاده بکنیم که وقتی کاربر اومد و روش کلیک کرد به بالا منتقل شود و باشد ولی از اون حالت قبلیش در اومده باشه 

 

5- از auto-focus استفاده کنید 

 

6- به کاربر اطلاع دهید Caps Lock کیبورد فعال است 

 

7- از محدودیت های بصری استفاده کنید متناسب با طول المان هامون بیایم و براشون عرض مشخص کنیم 

 

8- گزارش خطاها رو پنهان نکنید بزارید باشه 

 

9- گزینه های اختیاری را به وضوح نشان دهید استفاده از * و اختیاری  

 

10 - از تصاویر برای افزایش تعامل با کاربر استفاده کنید 

 

 

فایل پیوست

emad ta
emad ta

4 بهمن 99

1
حذف شده

  احسنت به این پشتکار و نت برداری دقیق و مختصر همشون رو دنبال می کنم..’

فایل پیوست

وحید صالحی

توسط

وحید صالحی

5 بهمن 99

2
حذف شده

نکته : هر موقع که خواستیم بیایم و در داخل سودو المنت هامون مثل Before  و  After  از آیکون ها استفاده کنیم جدا از این که در داخل content اون میایم و unicode  امون رو می نویسیم باید  با استفاده از font Family نوع اون رو هم مشخص کنیم مثلا FontAwesome رو بنویسیم 

فایل پیوست

emad ta

توسط

emad ta

5 بهمن 99

2
حذف شده

در زمینه های اعتبار  سنجی ها ما از تگ های فرم استفاده میکنیم و تگ های input امون در داخل اون قرار میدهیم

استفاده از autoComplete به صورت Off  که به کاربرمون پیشنهاد های الکی ندهد که بهتر هستش در تگ فرم امون قرار دهیم 

 required که کاربر رو ملزم به این می کند که فرم اعتبار سنجی ما رو به صورت کامل بیاد و پر بکند همچنین با استفاده از مشخص کردن type می تونیم بیایم و اعتبار سنجی هامون رو دقیق تر کنیمبدون استفاده از ری جکس مثل استفاده از نوع های email و password و url و tel

 

با استفاده از minlength  و maxLength می تونیم بیایم و بیشترین و کمترین مقدار های متن امون رو مشخص کنیم برای اینپوت هامون

با استفاده از pattern  میتونیم بیایم و از Regex استفاده بکنیم 

 

با استفاده از  دو تا پراپرتی valid و invalid می توینم بیایم و روی تگ های اینپوت امون کنترل بیشتری داشته باشیم و هرکدوم که درست بود یا پر شد یک سری تغیرات بهش بدیم

 

حال برای فارسی کردن اون پیام هشدار required  باید از یک ویژگی با نام oninvalid استفاده کنیم که در آن می توانیم از توابع جاوااسکریپت استفاده کنیم

oninvaid="this.setCustomValidity(" پیام ما" ) "

همچنین می توانیم یک باکس هم برای اون بیایم و درست کنیم و قرارش بدهیم

 

فایل پیوست

emad ta

توسط

emad ta

5 بهمن 99

2
حذف شده

نکته : ما در هنگام استفاده از display  :  flex اگر به این مشکل خوردیم که عناصر مون به صورت column بودن می تونیم با تغیر دادن مقدار   display  : inline - flex  عناصرمون رو به صورت  row در یباریم

 

 

فایل پیوست

emad ta

توسط

emad ta

5 بهمن 99