تکمیل خودکار

مجبور شدن دوباره آدرس خود را برای دهمین بار وارد کنید خسته کننده است. مرورگرها و شما به عنوان یک توسعه دهنده می توانید به کاربران کمک کنید تا داده ها را سریعتر وارد کنند و از وارد کردن مجدد داده ها خودداری کنند. این ماژول به شما می آموزد که چگونه تکمیل خودکار کار می کند و چگونه autocomplete و سایر ویژگی های عنصر می توانند اطمینان حاصل کنند که مرورگرها گزینه های تکمیل خودکار مناسب را ارائه می دهند.

تکمیل خودکار چگونه کار می کند؟

در مقدمه تکمیل خودکار ، شما قبلاً اصول تکمیل خودکار را یاد گرفته‌اید. اما چرا مرورگرها تکمیل خودکار را ارائه می دهند؟

پر کردن فرم ها فعالیت جالبی نیست، اما همچنان کاری است که اغلب انجام می دهید. با گذشت زمان، فرم های زیادی را پر می کنید و اغلب همان داده ها را پر می کنید. یکی از راه‌های کمک به کاربران برای پر کردن سریع‌تر فرم‌ها، ارائه گزینه پر کردن خودکار فیلدهای فرم با داده‌های وارد شده قبلی است. این تکمیل خودکار است.

چگونه مرورگرها می دانند چه داده هایی را باید به صورت خودکار پر کنند؟ به یک فیلد فرم نمونه نگاهی بیندازید تا متوجه شوید.

<label for="name">Name</label>
<input name="name" id="name">

اگر این فیلد فرم را ارسال کنید، مرورگرها مقدار (داده‌هایی که وارد کرده‌اید) را همراه با مقدار ویژگی name (نام) ذخیره می‌کنند. برخی از مرورگرها هنگام ذخیره و پر کردن داده ها به ویژگی id نیز نگاه می کنند.

مثلاً هفته‌ها بعد، فرم دیگری را در وب‌سایت دیگری پر می‌کنید. این سایت همچنین دارای یک فیلد فرم با name="name" است. مرورگر شما اکنون می‌تواند تکمیل خودکار را ارائه دهد، زیرا مقدار نام قبلاً ذخیره شده است.

تکمیل خودکار به ویژه در فرم هایی که به طور منظم استفاده می کنید مفید است، مانند ثبت نام و ورود به سیستم، پرداخت، پرداخت، و فرم هایی که باید نام یا آدرس خود را وارد کنید.

می توانید با استفاده از مقادیر مناسب برای ویژگی تکمیل autocomplete به مرورگرها کمک کنید تا بهترین گزینه های تکمیل خودکار را ارائه دهند. مقادیر زیادی برای autocomplete وجود دارد. در اینجا نمونه ای از آدرس ها آورده شده است.

آیا مرورگر شما قبلاً آدرسی برای شما ذخیره کرده است؟ عالی! پس از تعامل با اولین فیلد در فرم آدرس، مرورگر لیستی از آدرس های ذخیره شده را به شما نشان می دهد. می توانید یکی را انتخاب کنید و مرورگر تمام فیلدهای مربوط به آدرس را پر می کند. تکمیل خودکار پر کردن فرم ها را سریع و آسان می کند.

هر فرم آدرس دارای فیلدهای یکسانی نیست و ترتیب فیلدها نیز متفاوت است. استفاده از مقادیر صحیح برای autocomplete تضمین می کند که مرورگر مقادیر صحیح یک فرم را پر می کند. مقادیری برای country ، postal-code و بسیاری موارد دیگر وجود دارد.

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

بسیاری از مردم در به خاطر سپردن رمزهای عبور خوب نیستند. متداول ترین رمز عبور «123456» است و پس از آن سایر ترکیبات آسان به خاطر سپردن قرار می گیرند. چگونه می توانید از رمزهای عبور امن و منحصر به فرد بدون به خاطر سپردن همه آنها استفاده کنید؟

مرورگرها دارای مدیران رمزهای عبور داخلی هستند تا رمزهای عبور را برای شما تولید، ذخیره و پر کنند. ببینید چگونه می‌توانید در پر کردن خودکار ایمیل‌ها و مدیریت رمزهای عبور به مرورگرها کمک کنید.

می توانید از autocomplete="email" برای فیلد ایمیل استفاده کنید، بنابراین کاربران گزینه تکمیل خودکار آدرس ایمیل را دریافت می کنند.

از آنجایی که این یک فرم ثبت نام است، کاربران نباید گزینه ای برای پر کردن رمزهای عبور قبلاً استفاده شده را داشته باشند. می توانید از autocomplete="new-password" استفاده کنید تا مطمئن شوید مرورگرها گزینه ای برای ایجاد رمز عبور جدید ارائه می دهند.

در فرم ورود به سیستم، می‌توانید از autocomplete="current-password" استفاده کنید تا به مرورگرها بگویید که گزینه پر کردن رمزهای عبور ذخیره شده قبلی برای این وب سایت را ارائه دهند.

شما می توانید احراز هویت دو مرحله ای را در بسیاری از وب سایت ها تنظیم کنید. علاوه بر رمز عبور، یک کد یکبار مصرف با پیامک یا یک برنامه احراز هویت دو مرحله ای ارسال می شود.

آیا عالی نیست اگر کدی که در پیام اس ام اس دریافت کرده اید توسط صفحه کلید روی صفحه پیشنهاد شود و بتوانید مستقیماً آن را برای پر کردن مقدار انتخاب کنید؟ در Safari 14 یا جدیدتر، می توانید از autocomplete="one-time-code" برای رسیدن به این هدف استفاده کنید. در کروم در اندروید، می‌توانید از WebOTP API برای رسیدن به این هدف با جاوا اسکریپت استفاده کنید.

درباره نحوه تأیید شماره تلفن در وب با بهترین روش‌های فرم OTP پیامک بیشتر بیاموزید.

به کاربران کمک کنید اطلاعات کارت اعتباری خود را پر کنند

در بسیاری از وب سایت های تجارت الکترونیک، می توانید از کارت اعتباری خود برای خرید محصولات استفاده کنید. سایت‌ها ممکن است از پلت‌فرم‌های پرداخت شخص ثالث استفاده کنند که فرم‌های خود را ارائه می‌کنند، اما اگر نیاز به ساخت فرم‌های پرداخت خود دارید، مطمئن شوید که افراد به راحتی می‌توانند اطلاعات پرداخت را پر کنند.

می‌توانید دوباره از ویژگی autocomplete استفاده کنید تا مطمئن شوید مرورگرها گزینه‌های تکمیل خودکار صحیح را ارائه می‌دهند.

مقادیری برای شماره کارت اعتباری cc-number ، تاریخ انقضای کارت اعتباری cc-exp و سایر اطلاعات مورد نیاز برای پرداخت کارت اعتباری وجود دارد.

از یک ورودی واحد برای اعدادی مانند شماره کارت اعتباری و شماره تلفن استفاده کنید تا مطمئن شوید مرورگرها تکمیل خودکار را ارائه می دهند. برای اطمینان از در دسترس بودن تکمیل خودکار، به جای عناصر سفارشی، از عناصر فرم استاندارد، به عنوان مثال، <select> برای تاریخ های کارت پرداخت استفاده کنید.

درباره کمک به کاربران برای جلوگیری از وارد کردن مجدد داده‌های پرداخت بیشتر بیاموزید.

اطمینان حاصل کنید که تکمیل خودکار برای همه فیلدهای شما کار می کند

علاوه بر آدرس‌ها، اطلاعات حساب و اطلاعات کارت اعتباری، زمینه‌های بیشتری وجود دارد که مرورگرها می‌توانند در تکمیل خودکار به کاربران کمک کنند.

هنگام افزودن یک فیلد تلفن به فرم خود بررسی کنید که آیا می توانید از هر یک از مقادیر موجود برای تکمیل خودکار استفاده کنید یا خیر. مقدار مناسبی برای فیلد فرم خود پیدا کردید؟ آن را اضافه کنید.

استفاده از مقادیر مناسب برای ویژگی autocomplete به مرورگرها کمک می کند تا بهترین گزینه تکمیل خودکار را ارائه دهند و به کاربران کمک می کند تا فرم ها را سریعتر پر کنند.

به مرورگرها کمک کنید بفهمند که یک فیلد نباید خودکار پر شود

یاد گرفتید که تکمیل خودکار چگونه کار می کند، چگونه می توانید به مرورگرها در تکمیل خودکار کمک کنید، و چرا تکمیل خودکار پر کردن فرم ها را برای کاربران راحت می کند. با این حال، گاهی اوقات نمی خواهید مرورگرها تکمیل خودکار را ارائه دهند.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

یکی از مکان‌هایی که تکمیل خودکار مفید نیست، هنگام وارد کردن مقادیر یکباره و منحصربه‌فرد مانند فیلد کد یک‌بار مصرف است. مقدار هر بار متفاوت است و مرورگر نباید مقادیر را ذخیره کند یا گزینه تکمیل خودکار ارائه دهد. برای جلوگیری از تکمیل خودکار می توانید از autocomplete="off" برای چنین فیلدهایی استفاده کنید.

مورد دیگری که برای autocomplete="off" استفاده می شود، یک فیلد honeypot است (به ماژول قبلی مراجعه کنید). حتی اگر فیلد قابل مشاهده نیست، مرورگرها ممکن است آن را به صورت خودکار با بقیه فیلدها پر کنند. خاموش کردن تکمیل خودکار تضمین می‌کند که کاربر واقعی به‌عنوان یک ربات شناسایی نمی‌شود، زیرا فیلد به‌طور خودکار تکمیل می‌شود.

فقط در صورتی باید تکمیل خودکار را غیرفعال کنید که مطمئن باشید به کاربران کمک می کند.

درک خود را بررسی کنید

دانش خود را در مورد تکمیل خودکار آزمایش کنید

منابع

• ویژگی تکمیل خودکار .
  • بهترین شیوه های پرداخت و آدرس را تشکیل می دهند