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

• فقط فیلد ضروری → رها نکردن فرم
• فیلد اضافی = خستگی کاربر
• ✔️ اگر اطلاعات واجب و زیاد بود → فرم چندمرحله‌ای

2- فواصل بین المان‌ها

• فاصله مناسب بین فیلدها → خوانایی + تجربه بهتر
• ✔️ استفاده از margin یا padding

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

• پیام خطا مشخص و نزدیک به فیلد

<span class="error">ایمیل معتبر نیست</span>

4- از Placeholder به جای Label استفاده نکن

• Label = ماندگار
• Placeholder = فقط نمونه ورودی

<label for="email">ایمیل</label>
<input type="email" id="email" placeholder="example@mail.com">

5- از Auto-Focus استفاده کنید

• اولین فیلد مهم (مثل ایمیل یا جستجو) → auto-focus

<input type="text" autofocus>

6- اطلاع فعال بودن Caps Lock

• مخصوص رمز عبور → جلوگیری از خطای ورود

input.addEventListener("keyup", e=>{
  if(e.getModifierState("CapsLock")){
    alert("Caps Lock روشن است!");
  }
});

7- از محدودیت‌های بصری استفاده کنید

• کاربر بداند چه چیزی می‌تواند وارد کند
• مثال: طول رمز عبور یا فقط عدد

<input type="number" min="1" max="10">

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

• پیام خطا واضح و مستمر باشد
• نباید بعد از چند ثانیه ناپدید شود بدون رفع مشکل

9- گزینه‌های اختیاری را واضح نشان دهید

• کنار فیلد بنویسید: (اختیاری)

<label>تلفن (اختیاری)</label>
<input type="tel">

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

• آیکون‌ها کمک به درک فیلد می‌کنند
• مثال: آیکون قفل کنار رمز عبور

<input type="password" placeholder="رمز عبور 🔒">

11- جستجوی پیش‌بینی‌شده (Auto-complete)

• سرعت ورود داده ↑
• جلوگیری از اشتباه تایپی

<input list="cities">
<datalist id="cities">
  <option value="Tehran">
  <option value="Shiraz">
  <option value="Mashhad">
</datalist>