از ویژگی‌های مرورگر چندسکویی برای ساختن فرم‌های ثبت‌نامی استفاده کنید که ایمن، دردسترس، و آسان برای استفاده باشند.
اگر کاربران نیاز به ثبت‌نام در سایت شما داشته باشند، طراحی خوب فرم ثبت‌نام بسیار مهم است. این امر به‌ویژه برای افرادی که اتصال ضعیف دارند، از تلفن همراه استفاده می‌کنند، عجله دارند، یا تحت استرس هستند صادق است. فرم‌های ثبت‌نامی که طراحی ضعیفی دارند نرخ واگشت بالایی دارند. هر پرش می‌تواند به‌معنای ازدست رفتن مشتری و نارضایتی کاربر باشد—نه فقط ازدست رفتن فرصت ثبت‌نام.
نحوه پیاده‌سازی
مهم‌ترین دستورالعمل‌ها برای ساختن فرم‌های ثبت‌نام موفق در زیر به‌طور خلاصه بیان شده است.
استفاده از 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" برای ورودی‌های ایمیل استفاده کنید — مرورگر به‌طور خودکار قالب را اعتبارسنجی می‌کند. برای گذرواژه‌ها، از مشخصه pattern استفاده کنید تا الزامات استحکام را اعمال کنید و درصورت ناموفق بودن اعتبارسنجی، پیام‌های خطای واضحی ارائه دهید. مشخصه 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="new-password" استفاده کنید
اجباری: برای فرم ثبت‌نام، از autocomplete="new-password" استفاده کنید.
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
فعال کردن مرورگر برای پیشنهاد گذرواژه قوی
مرورگرهای مدرن از روش‌های اکتشافی برای تصمیم‌گیری درباره زمان نمایش واسط کاربر مدیر گذرواژه و پیشنهاد گذرواژه قوی استفاده می‌کنند.
وجود تولیدکننده‌های گذرواژه داخلی در مرورگرها به این معنی است که کاربران و توسعه‌دهندگان نیازی به تشخیص «گذرواژه قوی» ندارند. ازآنجایی‌که مرورگرها می‌توانند گذرواژه‌ها را به‌طور ایمن ذخیره کنند و درصورت لزوم آن‌ها را به‌طور خودکار تکمیل کنند، نیازی نیست کاربران گذرواژه‌ها را به‌خاطر بسپارند یا وارد کنند. تشویق کاربران به استفاده از تولیدکننده‌های گذرواژه داخلی مرورگر همچنین به این معنی است که احتمال بیشتری وجود دارد که از گذرواژه قوی و منحصربه‌فردی در سایت شما استفاده کنند و احتمال کمتری وجود دارد که از گذرواژه‌ای که ممکن است در جای دیگری به‌خطر افتاده باشد دوباره استفاده کنند.
کمک به کاربران برای جلوگیری از جا انداختن تصادفی ورودی‌ها
مشخصه required را به هر دو فیلد ایمیل و گذرواژه اضافه کنید. مرورگرهای جدید به‌طور خودکار برای داده‌های مفقودشده پیام‌واره نشان می‌دهند و تمرکز را روی آن‌ها قرار می‌دهند.
مجاز کردن جای‌گذاری گذرواژه
برخی‌از سایت‌ها اجازه نمی‌دهند نوشتار در ورودی‌های گذرواژه جای‌گذاری شود.
اجازه ندادن به جای‌گذاری گذرواژه باعث آزار کاربران می‌شود، آن‌ها را به استفاده از گذرواژه‌هایی که به‌خاطر سپردنشان آسان است (و بنابراین ممکن است راحت‌تر لو بروند) تشویق می‌کند، و طبق گفته سازمان‌هایی مانند «مرکز ملی امنیت سایبری بریتانیا»، ممکن است درواقع امنیت را کاهش دهد. کاربران فقط زمانی متوجه می‌شوند که جای‌گذاری مجاز نیست که سعی کنند گذرواژه‌شان را جای‌گذاری کنند، بنابراین غیرمجاز کردن جای‌گذاری گذرواژه از آسیب‌پذیری‌های بریده‌دان جلوگیری نمی‌کند.
ارائه ورود به سیستم شخص ثالث
بسیاری از کاربران ترجیح می‌دهند بااستفاده از فرم ثبت‌نام نشانی ایمیل و گذرواژه به سیستم وب‌سایت‌ها وارد شوند. بااین‌حال، باید به کاربران امکان دهید بااستفاده از ارائه‌دهنده هویت طرف سوم، که به‌عنوان ورود به سیستم مشارکتی نیز شناخته می‌شود، به سیستم وارد شوند.
این رویکرد چندین مزیت دارد. برای کاربرانی که بااستفاده از ورود به سیستم فدراسیونی حساب ایجاد می‌کنند، نیازی نیست گذرواژه درخواست کنید، ارسال کنید، یا ذخیره کنید.
همچنین ممکن است بتوانید ازطریق ورود به سیستم فدراسیونی به اطلاعات نمایه تأییدشده اضافی، مانند نشانی ایمیل، دسترسی پیدا کنید—این یعنی کاربر مجبور نیست آن داده‌ها را وارد کند و شما نیازی به انجام درستی‌سنجی ندارید. ورود به سیستم فدرال همچنین می‌تواند کار را برای کاربران هنگام دریافت دستگاه جدید بسیار آسان‌تر کند.
مراقب نام‌های کاربری باشید
بر داشتن نام کاربری اصرار نکنید، مگراینکه (یا تا زمانی که) به آن نیاز داشته باشید. به کاربران امکان دهید فقط با نشانی ایمیل (یا شماره تلفن) و گذرواژه—یا ورود به سیستم فدراسیونی درصورت تمایل—ثبت‌نام کنند و به سیستم وارد شوند. آن‌ها را مجبور نکنید نام کاربری انتخاب کنند و آن را به‌خاطر بسپارند.
اگر سایت شما به نام کاربری نیاز دارد، قوانین غیرمنطقی برای آن‌ها وضع نکنید و مانع به‌روزرسانی نام کاربری کاربران نشوید. در پس‌بخش خود باید برای هر حساب کاربری یک شناسه یکتا تولید کنید، نه شناسه‌ای براساس داده‌های شخصی مانند نام کاربری.
همچنین مطمئن شوید که از autocomplete="username" برای نام‌های کاربری استفاده می‌کنید.
راهبردهای جایگزین
تکمیل خودکار یک ارتقای پیش‌رو است. در مرورگرهایی که از تکمیل خودکار پشتیبانی نمی‌کنند، کاربران فقط باید اطلاعات اعتباری ثبت‌نام خود را به‌صورت دستی وارد کنند. محدودیت‌های HTML معنایی (مانند type، inputmode، و required) همچنان به‌درستی عمل خواهند کرد تا ورودی کاربر را اعتبارسنجی کنند و صفحه‌کلیدهای مجازی صحیح را ارائه دهند.