از ویژگی‌های مرورگر چندسکویی برای ساختن فرم‌های ورود به سیستم استفاده کنید که ایمن، دردسترس، و آسان برای استفاده باشند.
اگر کاربران نیاز به ورود به سیستم سایت شما داشته باشند، طراحی خوب فرم ورود به سیستم بسیار مهم است. این امر به‌ویژه برای افرادی که اتصال ضعیف دارند، از تلفن همراه استفاده می‌کنند، عجله دارند، یا تحت استرس هستند صادق است. فرم‌های ورود به سیستم با طراحی ضعیف نرخ واگشت بالایی دارند. هر پرش می‌تواند به‌معنای ازدست رفتن مشتری و نارضایتی کاربر باشد—نه فقط ازدست رفتن فرصت ورود به سیستم.
نحوه پیاده‌سازی
مهم‌ترین دستورالعمل‌ها برای ساختن فرم‌های ورود به سیستم موفق در زیر شرح داده شده است.
استفاده از HTML معتبر و معنادار
از عناصر و مشخصه‌هایی که برای ایجاد فرم‌ها ساخته شده‌اند نهایت استفاده را ببرید:
-
<form>،<input>،<label>، و<button> -
type،autocomplete، وinputmode
این ویژگی‌ها عملکرد داخلی مرورگر را فعال می‌کنند، دسترس‌پذیری را بهبود می‌بخشند، و به نشانه‌گذاری معنی می‌دهند.
از عنصر <label> برای برچسب‌گذاری فیلدهای فرم برای ورود داده استفاده کنید
برای برچسب‌گذاری <input>، <select>، یا <textarea>، از <label> استفاده کنید. با دادن مقدار یکسان به مشخصه for برچسب و مشخصه id ورودی، برچسب را با ورودی مرتبط کنید.
بیشترین بهره را از مشخصه‌های HTML ببرید
بااستفاده از ویژگی عنصر <input> <type> مناسب برای ارائه صفحه‌کلید مناسب در تلفن همراه و فعال کردن اعتبارسنجی داخلی پایه توسط مرورگر، وارد کردن داده‌ها را برای کاربران آسان کنید.
همیشه از type="email" برای نشانی‌های ایمیل و از type="tel" برای شماره تلفن‌ها استفاده کنید.
هر عنصر <input>، <select>، و <textarea> باید مشخصه autocomplete مناسبی داشته باشد تا دسترس‌پذیری بهبود یابد و به کاربران کمک شود از وارد کردن مجدد داده‌ها اجتناب کنند.
ورودی‌های نام کاربری و ایمیل حاوی شناسه‌ها هستند، نه نثر. spellcheck="false" را اضافه کنید تا مرورگر آن‌ها را به چیزی که با حساب مطابقت ندارد بازنویسی نکند. autocorrect و autocapitalize همیشه برای input type="email" غیرفعال هستند، اما برای نام‌های کاربری غیراز ایمیل الزامی هستند.
دکمه‌ها را مفید کنید
از <button> برای دکمه‌ها استفاده کنید. همچنین می‌توانید از <input type="submit"> استفاده کنید، اما از div یا عنصر تصادفی دیگری که به‌عنوان دکمه عمل می‌کند استفاده نکنید. عناصر دکمه رفتار دسترس‌پذیر، عملکرد ارسال فرم داخلی، و امکان سبک‌دهی آسان را فراهم می‌کنند.
به هر دکمه ارسال فرم مقداری بدهید که نشان دهد چه کاری انجام می‌دهد. از برچسبی واضح و قابل‌تشخیص استفاده کنید. برای مثال، از ورود به سیستم به‌جای ادامه یا ارسال استفاده کنید.
درصورت امکان، از یک ورودی نام استفاده کنید
به کاربران اجازه دهید نامشان را بااستفاده از یک ورودی وارد کنند، مگراینکه دلیل خوبی برای ذخیره جداگانه نام، نام خانوادگی، عناوین افتخاری، یا سایر بخش‌های نام داشته باشید. استفاده از یک ورودی نام باعث می‌شود فرم‌ها پیچیدگی کمتری داشته باشند، امکان برش و جای‌گذاری را فراهم می‌کند، و تکمیل خودکار را ساده‌تر می‌کند.
نام‌های بین‌المللی مجاز است. برای اعتبارسنجی، از عبارت‌های باقاعده‌ای که فقط با نویسه‌های لاتین مطابقت دارند استفاده نکنید. «فقط لاتین» کاربرانی را که نام یا نشانی آن‌ها حاوی نویسه‌هایی است که در الفبای لاتین نیستند مستثنی می‌کند. به‌جای آن، مطابقت حرف یونیکد را مجاز کنید—و مطمئن شوید که پسای شما از یونیکد به‌صورت ایمن هم به‌عنوان ورودی و هم به‌عنوان خروجی پشتیبانی می‌کند. مرورگرهای نو از یونیکد در عبارت‌های باقاعده به‌خوبی پشتیبانی می‌کنند.
نمایش پیشرفت ورود به سیستم
برای هر مرحله از ورود به سیستم، از عنوان‌های صفحه و مقادیر دکمه توصیفی استفاده کنید که مشخص کند اکنون چه کاری باید انجام شود و مرحله بعدی چیست.
از مشخصه enterkeyhint در ورودی‌های فرم برای تنظیم برچسب کلید Enter صفحه‌کلید تلفن همراه استفاده کنید. برای مثال، از enterkeyhint="previous" و enterkeyhint="next" در فرم چندصفحه‌ای، از enterkeyhint="done" برای ورودی نهایی در فرم، و از enterkeyhint="search" برای ورودی جستجو استفاده کنید.
کمک به کاربران برای اجتناب از وارد کردن مجدد داده‌های ورود به سیستم
حتماً مقادیر autocomplete مناسب را در فرم‌های ورود به سیستم اضافه کنید.
این کار به مرورگرها امکان می‌دهد با ذخیره ایمن جزئیات ورود به سیستم و وارد کردن صحیح داده‌های فرم به کاربران کمک کنند. بدون تکمیل خودکار، احتمال اینکه کاربران جزئیات ورود به سیستم را به‌صورت فیزیکی ثبت کنند یا داده‌های ورود به سیستم را به‌صورت ناامن در دستگاهشان ذخیره کنند بیشتر است.
بادقت اعتبارسنجی کنید
ورود داده‌ها را هم به‌صورت هم‌زمان و هم قبل‌از ارسال فرم اعتبارسنجی کنید. از type="email" برای ورودی‌های ایمیل استفاده کنید — مرورگر به‌طور خودکار قالب را اعتبارسنجی می‌کند. مشخصه required را به فیلدهای اجباری اضافه کنید تا از ارسال فرم‌های خالی جلوگیری شود.
ورود به سیستم را در عنصر <form> خودش قرار دهید
همیشه وقتی از کاربران می‌خواهید داده وارد کنند، از عنصر <form> استفاده کنید
ورودی‌ها را در <div> قرار ندهید و ارسال داده‌های ورودی را صرفاً با JavaScript انجام دهید. بهتر است به‌طور کلی از عنصر <form> استفاده کنید. این کار باعث می‌شود سایت شما برای صفحه‌خوان‌ها و سایر دستگاه‌های کمکی قابل‌دسترس باشد، طیفی از ویژگی‌های داخلی مرورگر را فعال می‌کند، ساخت ورود به سیستم کاربردی پایه را برای مرورگرهای قدیمی‌تر ساده‌تر می‌کند، و حتی اگر جاوا اسکریپت ازکار بیفتد همچنان می‌تواند کار کند.
ورودی‌ها را دوبرابر نکنید
برخی‌از سایت‌ها کاربران را مجبور می‌کنند ایمیل یا گذرواژه را دو بار وارد کنند. این کار ممکن است خطاها را برای چند کاربر کاهش دهد، اما باعث کار اضافی برای همه کاربران می‌شود و نرخ رها کردن را افزایش می‌دهد. همچنین در مواردی که مرورگرها نشانی‌های ایمیل را به‌طور خودکار تکمیل می‌کنند یا گذرواژه‌های قوی پیشنهاد می‌دهند، درخواست دوباره منطقی نیست. بهتر است به کاربران اجازه دهید نشانی ایمیلشان را تأیید کنند (به‌هرحال باید این کار را انجام دهید) و درصورت لزوم، بازنشانی گذرواژه را برایشان آسان کنید.
گذرواژه‌ها را خصوصی نگه دارید—اما به کاربران اجازه دهید درصورت تمایل آن‌ها را ببینند
ورودی‌های گذرواژه باید type="password" داشته باشند تا نوشتار گذرواژه پنهان شود و به مرورگر کمک کند متوجه شود که ورودی برای گذرواژه است. (توجه داشته باشید که مرورگرها از تکنیک‌های مختلفی برای درک نقش‌های ورودی و تصمیم‌گیری درباره پیشنهاد ذخیره گذرواژه‌ها استفاده می‌کنند.)
باید کلید نمایش گذرواژه را اضافه کنید تا کاربران بتوانند نوشتاری را که وارد کرده‌اند بررسی کنند—و فراموش نکنید که پیوند گذرواژه را فراموش کرده‌اید را اضافه کنید.
صفحه‌کلید مناسب را به کاربران تلفن همراه ارائه دهید
از <input type="email"> استفاده کنید تا صفحه‌کلید مناسبی به کاربران تلفن همراه ارائه دهید و اعتبارسنجی نشانی ایمیل داخلی پایه را توسط مرورگر فعال کنید… به جاوا اسکریپت نیازی نیست!
اگر لازم است به‌جای نشانی ایمیل از شماره تلفن استفاده کنید، <input type="tel"> صفحه‌کلید تلفن را در تلفن همراه فعال می‌کند. همچنین می‌توانید درصورت لزوم از مشخصه inputmode استفاده کنید: inputmode="numeric" برای شماره‌های پین ایده‌آل است.
جلوگیری از مسدود شدن دکمه «ورود به سیستم» توسط صفحه‌کلید تلفن همراه
اگر دقت نکنید، صفحه‌کلیدهای تلفن همراه ممکن است فرم شما را بپوشانند یا بدتر از آن، دکمه «ورود به سیستم» را تاحدی مسدود کنند. کاربران ممکن است قبل‌از اینکه متوجه شوند چه اتفاقی افتاده است، از ادامه کار منصرف شوند.
درصورت امکان، با نمایش دادن فقط ورودی‌های ایمیل (یا تلفن) و گذرواژه و دکمه «ورود به سیستم» در بالای صفحه ورود به سیستم، از این کار اجتناب کنید. محتوای دیگر را در زیر آن قرار دهید.
کمک به کاربران برای جلوگیری از وارد کردن مجدد داده‌ها
می‌توانید به مرورگرها کمک کنید داده‌ها را به‌درستی ذخیره کنند و ورودی‌ها را به‌طور خودکار تکمیل کنند تا کاربران مجبور نباشند مقادیر ایمیل و گذرواژه را به‌خاطر بسپارند. این امر به‌خصوص در تلفن همراه مهم است و برای ورودی‌های ایمیل که نرخ رها کردن بالایی دارند حیاتی است. این موضوع دو بخش دارد:
- مشخصه‌های
autocomplete،name،id، وtypeبه مرورگرها کمک می‌کنند نقش ورودی‌ها را درک کنند تا بتوانند داده‌هایی را که بعداً برای تکمیل خودکار استفاده می‌شود ذخیره کنند. برای اینکه داده‌ها برای تکمیل خودکار ذخیره شوند، مرورگرهای مدرن همچنین نیاز دارند که ورودی‌ها مقدارnameیاidپایداری داشته باشند (به‌طور تصادفی در هر بار بارگیری صفحه یا استقرار سایت تولید نشوند) و در عنصر<form>با دکمهsubmitقرار داشته باشند. - مشخصه
autocompleteبه مرورگرها کمک می‌کند تا ورودی‌ها را بااستفاده از داده‌های ذخیره‌شده به‌درستی تکمیل خودکار کنند.
برای ورودی‌های ایمیل از autocomplete="username" استفاده کنید، زیرا username توسط مدیران گذرواژه در مرورگرهای مدرن شناسایی می‌شود—هرچند باید از type="email" استفاده کنید و ممکن است بخواهید از id="email" و name="email" استفاده کنید. برای ورودی‌های گذرواژه، از مقدار autocomplete مناسب استفاده کنید تا به مرورگرها کمک کنید بین گذرواژه‌های جدید و فعلی تمایز قائل شوند.
برای گذرواژه موجود، از autocomplete="current-password" استفاده کنید
اجباری: از autocomplete="current-password" برای ورودی گذرواژه در فرم ورود به سیستم استفاده کنید. این کار به مرورگر می‌گوید که می‌خواهید از گذرواژه فعلی که برای سایت ذخیره کرده است استفاده کند.
برای فرم ورود به سیستم:
<input type="password" autocomplete="current-password" id="current-password" …>
فعال کردن مرورگر برای پیشنهاد گذرواژه قوی
مرورگرهای مدرن از روش‌های اکتشافی برای تصمیم‌گیری درباره زمان نمایش واسط کاربر مدیر گذرواژه و پیشنهاد گذرواژه قوی استفاده می‌کنند.
وجود تولیدکننده‌های گذرواژه داخلی در مرورگرها به این معنی است که کاربران و توسعه‌دهندگان نیازی به تشخیص «گذرواژه قوی» ندارند. ازآنجایی‌که مرورگرها می‌توانند گذرواژه‌ها را به‌طور ایمن ذخیره کنند و درصورت لزوم آن‌ها را به‌طور خودکار تکمیل کنند، نیازی نیست کاربران گذرواژه‌ها را به‌خاطر بسپارند یا وارد کنند. تشویق کاربران به استفاده از تولیدکننده‌های گذرواژه داخلی مرورگر همچنین به این معنی است که احتمال بیشتری وجود دارد که از گذرواژه قوی و منحصربه‌فردی در سایت شما استفاده کنند و احتمال کمتری وجود دارد که از گذرواژه‌ای که ممکن است در جای دیگری به‌خطر افتاده باشد دوباره استفاده کنند.
کمک به کاربران برای جلوگیری از جا انداختن تصادفی ورودی‌ها
اجباری: مشخصه required را به هر دو فیلد ایمیل و گذرواژه اضافه کنید. مرورگرهای جدید به‌طور خودکار برای داده‌های مفقودشده پیام‌واره نشان می‌دهند و تمرکز را روی آن‌ها قرار می‌دهند.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
مجاز کردن جای‌گذاری گذرواژه
برخی‌از سایت‌ها اجازه نمی‌دهند نوشتار در ورودی‌های گذرواژه جای‌گذاری شود.
اجازه ندادن به جای‌گذاری گذرواژه باعث آزار کاربران می‌شود، آن‌ها را به استفاده از گذرواژه‌هایی که به‌خاطر سپردنشان آسان است (و بنابراین ممکن است راحت‌تر لو بروند) تشویق می‌کند، و طبق گفته سازمان‌هایی مانند «مرکز ملی امنیت سایبری بریتانیا»، ممکن است درواقع امنیت را کاهش دهد. کاربران فقط زمانی متوجه می‌شوند که جای‌گذاری مجاز نیست که سعی کنند گذرواژه‌شان را جای‌گذاری کنند، بنابراین غیرمجاز کردن جای‌گذاری گذرواژه از آسیب‌پذیری‌های بریده‌دان جلوگیری نمی‌کند.
راهبردهای جایگزین
تکمیل خودکار یک ارتقای پیش‌رو است. در مرورگرهایی که از تکمیل خودکار پشتیبانی نمی‌کنند، کاربران باید اطلاعات اعتباری ورود به سیستم خود را به‌صورت دستی وارد کنند. محدودیت‌های HTML معنایی (مانند type، inputmode، و required) همچنان به‌درستی عمل خواهند کرد تا ورودی کاربر را اعتبارسنجی کنند و صفحه‌کلیدهای مجازی صحیح را ارائه دهند.