پس از آشنایی با عنصر فرم و نحوه تعاملی کردن فرم، بیایید ببینیم چگونه می‌توانید به کاربران کمک کنید از وارد کردن مجدد داده‌ها اجتناب کنند.
از تکمیل خودکار حداکثر استفاده را ببرید
پر کردن فرم ها می تواند زمان بر باشد. به عنوان مثال، وارد کردن آدرس خود به طور مکرر در هر سایتی که می خواهید چیزی بخرید، تجربه خرید خوبی نیست.
تکمیل خودکار می تواند در اینجا به شما کمک کند. شما یک بار آدرس خود را وارد کنید. از این پس، مرورگر شما این گزینه را به شما پیشنهاد می دهد که همان آدرس را برای سایر فرم ها به صورت خودکار پر کنید.
به شهر دیگری نقل مکان کردی؟ نگران دریافت آدرس قدیمی به عنوان یک گزینه برای همیشه نباشید. می‌توانید داده‌های آدرسی را که مرورگرتان برای شما ذخیره کرده است ویرایش کنید تا آن‌ها را به‌روز نگه دارید.
تکمیل خودکار در مرورگر چگونه کار می کند؟
فیلد آدرس می تواند در سایت های مختلف بسیار متفاوت به نظر برسد. چگونه یک مرورگر بفهمد که یک فیلد آدرس است؟
مرورگرها از روش های اکتشافی برای شناسایی یک فیلد آدرس استفاده می کنند. مقادیر name ، type و ویژگی های id چیست؟ آیا یک ویژگی autocomplete در کنترل فرم وجود دارد؟
بر اساس این اطلاعات، مرورگرها می توانند گزینه ای را برای تکمیل خودکار یک فیلد با داده هایی که قبلاً از همان نوع وارد کرده اند ارائه دهند. مرورگرها حتی می توانند تکمیل خودکار یک فرم را ارائه دهند.
به مرورگرها در تکمیل خودکار کمک کنید
بیایید ببینیم چه کاری می توانید انجام دهید تا به مرورگرها کمک کنید گزینه های تکمیل خودکار صحیح را ارائه دهند.
از مقادیر مشخصه معقول استفاده کنید
همانطور که یاد گرفتید، مرورگرها می توانند نوع داده را با مشاهده ویژگی های یک کنترل فرم شناسایی کنند.
<label for="email">Email</label>
<input type="email" name="email" id="email">
آیا فیلدی دارید که کاربران باید آدرس ایمیل خود را در آن وارد کنند؟ از email به عنوان یک مقدار برای name ، id و ویژگی type استفاده کنید. سه نکته برای مرورگر که این یک فیلد ایمیل است.
ویژگی تکمیل خودکار
مثال‌های دیگری نیز وجود دارد که شناسایی نوع داده صرفاً از name ، id و ویژگی‌های type برای مرورگرها دشوار است. در اینجا می توانید با استفاده از ویژگی autocomplete کمک کنید.
آیا قبلاً نامی را در مرورگری که استفاده می کنید وارد کرده اید؟ احتمالاً مرورگر این گزینه را به شما پیشنهاد می دهد که دوباره آن را برای این قسمت در نسخه آزمایشی پر کنید.
می‌توانید درباره استفاده از تکمیل خودکار و تکمیل خودکار در ماژول بعدی بیشتر بیاموزید.
درک خود را بررسی کنید
دانش خود را در مورد تکمیل خودکار آزمایش کنید
بر اساس کدام ویژگی ها تکمیل خودکار ارائه می شود؟
name .typeautocomplete