فرمی ایجاد کنید که وارد کردن داده‌های نشانی را در رایانه و تلفن همراه تا حد امکان برای کاربران آسان کند. مطمئن شوید فرم از ویژگی‌های داخلی مرورگر برای تکمیل خودکار، اعتبارسنجی، و محدودیت‌های ورود داده نهایت استفاده را می‌کند.
نحوه پیاده‌سازی
مهم‌ترین دستورالعمل‌ها برای ساختن فرم‌های نشانی موفق در زیر ارائه شده است.
استفاده از HTML معتبر و معنادار
از عناصر و مشخصه‌هایی که برای ایجاد فرم‌ها ساخته شده‌اند نهایت استفاده را ببرید:
-
<form>،<input>،<label>، و<button> -
type،autocomplete، وinputmode
این ویژگی‌ها عملکرد داخلی مرورگر را فعال می‌کنند، دسترس‌پذیری را بهبود می‌بخشند، و به نشانه‌گذاری معنی می‌دهند.
از عنصر <label> برای برچسب‌گذاری فیلدهای فرم برای ورود داده استفاده کنید
برای برچسب‌گذاری <input>، <select>، یا <textarea>، از <label> استفاده کنید. با دادن مقدار یکسان به مشخصه for برچسب و مشخصه id ورودی، برچسب را با ورودی مرتبط کنید.
بیشترین بهره را از مشخصه‌های HTML ببرید
بااستفاده از ویژگی عنصر <input> <type> مناسب برای ارائه صفحه‌کلید مناسب در تلفن همراه و فعال کردن اعتبارسنجی داخلی پایه توسط مرورگر، وارد کردن داده‌ها را برای کاربران آسان کنید.
همیشه از type="email" برای نشانی‌های ایمیل و از type="tel" برای شماره تلفن‌ها استفاده کنید.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
هر عنصر <input>، <select>، و <textarea> باید مشخصه autocomplete مناسبی داشته باشد تا دسترس‌پذیری بهبود یابد و به کاربران کمک شود از وارد کردن مجدد داده‌ها اجتناب کنند.
دکمه‌ها را مفید کنید
از <button> برای دکمه‌ها استفاده کنید. همچنین می‌توانید از <input type="submit"> استفاده کنید، اما از div یا عنصر تصادفی دیگری که به‌عنوان دکمه عمل می‌کند استفاده نکنید. عناصر دکمه رفتار دسترس‌پذیر، عملکرد ارسال فرم داخلی، و امکان سبک‌دهی آسان را فراهم می‌کنند.
به هر دکمه ارسال فرم مقداری بدهید که نشان دهد چه کاری انجام می‌دهد. برای هر مرحله از تسویه‌حساب، از یک دعوت به اقدام توصیفی استفاده کنید که پیشرفت را نشان دهد و مرحله بعدی را واضح کند. برای مثال، دکمه ارسال را در فرم نشانی تحویل کالا به‌جای ادامه یا ذخیره، ادامه به پرداخت برچسب‌گذاری کنید.
درصورت امکان، از یک ورودی نام استفاده کنید
به کاربران اجازه دهید نامشان را بااستفاده از یک ورودی وارد کنند، مگراینکه دلیل خوبی برای ذخیره جداگانه نام، نام خانوادگی، عناوین افتخاری، یا سایر بخش‌های نام داشته باشید. استفاده از یک ورودی نام باعث می‌شود فرم‌ها پیچیدگی کمتری داشته باشند، امکان برش و جای‌گذاری را فراهم می‌کند، و تکمیل خودکار را ساده‌تر می‌کند.
نام‌های بین‌المللی مجاز است. برای اعتبارسنجی، از عبارت‌های باقاعده‌ای که فقط با نویسه‌های لاتین مطابقت دارند استفاده نکنید. «فقط لاتین» کاربرانی را که نام یا نشانی آن‌ها حاوی نویسه‌هایی است که در الفبای لاتین نیستند مستثنی می‌کند. به‌جای آن، مطابقت حرف یونیکد را مجاز کنید—و مطمئن شوید که پسای شما از یونیکد به‌صورت ایمن هم به‌عنوان ورودی و هم به‌عنوان خروجی پشتیبانی می‌کند. مرورگرهای نو از یونیکد در عبارت‌های باقاعده به‌خوبی پشتیبانی می‌کنند.
قالب‌های نشانی مختلف را بپذیرید
هنگام ساختن فرم نشانی، به تنوع قالب‌های نشانی، حتی در یک کشور، توجه داشته باشید. درباره نشانی‌های «معمولی» پیش‌فرض نداشته باشید.
درصورت امکان، از یک عنصر <textarea> برای نشانی خیابان استفاده کنید.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
این گزینه انعطاف‌پذیرترین گزینه برای انواع قالب‌های نشانی محلی و بین‌المللی است.
اگر مدل داده شما به خطوط نشانی جداگانه نیاز دارد، از یک <input> در هر خط با نشان‌های address-line1، address-line2 (و درصورت نیاز، address-line3) autocomplete استفاده کنید تا تکمیل خودکار همچنان کار کند. نشانی خیابان را در ورودی‌هایی که فاقد این نشان‌ها هستند تقسیم نکنید و فقط خط اول را الزامی کنید.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
کمک به کاربران برای جلوگیری از جا انداختن تصادفی فیلدهای داده
مشخصه required را به فیلدهای الزامی اضافه کنید.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
راهبردهای جایگزین
تکمیل خودکار یک ارتقای پیش‌رو است. در مرورگرهایی که از تکمیل خودکار پشتیبانی نمی‌کنند، کاربران باید جزئیات نشانی‌شان را به‌صورت دستی وارد کنند. محدودیت‌های HTML معنایی (مانند type، inputmode، و required) همچنان به‌طور مناسب به‌عنوان اعتبارسنجی فرم استاندارد عمل خواهند کرد.