أنشئ نموذجًا يسهّل على المستخدمين قدر الإمكان إدخال بيانات العناوين على أجهزة الكمبيوتر والأجهزة الجوّالة. تأكَّد من أنّ النموذج يستفيد إلى أقصى حد من ميزات المتصفّح المضمّنة للملء التلقائي والتحقّق من الصحة وقيود إدخال البيانات.
كيفية الإعداد
في ما يلي أهم الإرشادات لإنشاء نماذج عناوين ناجحة.
استخدام ترميز 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 أو أي عنصر عشوائي آخر يعمل كزر. توفّر عناصر الأزرار سلوكًا يسهل الوصول إليه، ووظيفة مضمّنة لإرسال النماذج، ويمكن تصميمها بسهولة.
امنح كل زر إرسال نموذج قيمة توضح ما يفعله. لكل خطوة نحو الدفع، استخدِم عبارة وصفية تحث المستخدم على اتخاذ إجراء وتوضّح مستوى التقدم وتجعل الخطوة التالية واضحة. على سبيل المثال، يمكنك تسمية زر الإرسال في نموذج عنوان التسليم الانتقال إلى الدفع بدلاً من متابعة أو حفظ.
استخدام حقل واحد لإدخال الاسم كلما أمكن ذلك
اسمح للمستخدمين بإدخال أسمائهم باستخدام إدخال واحد، ما لم يكن لديك سبب وجيه لتخزين الأسماء الأولى أو أسماء العائلة أو الألقاب أو أجزاء الأسماء الأخرى بشكل منفصل. يؤدي استخدام حقل واحد لإدخال الاسم إلى جعل النماذج أقل تعقيدًا، ويتيح استخدام ميزة "القص واللصق"، ويجعل ميزة "الملء التلقائي" أبسط.
السماح بالأسماء الدولية لإجراء عملية التحقّق، تجنَّب استخدام التعبيرات العادية التي تتطابق مع الأحرف اللاتينية فقط. يستبعد خيار "الأحرف اللاتينية فقط" المستخدمين الذين تتضمّن أسماؤهم أو عناوينهم أحرفًا غير لاتينية. بدلاً من ذلك، اسمح بمطابقة أحرف Unicode، وتأكَّد من أنّ الواجهة الخلفية تتيح استخدام Unicode بشكل آمن كإدخال وإخراج. تتوافق المتصفّحات الحديثة مع ترميز Unicode في التعبيرات العادية.
السماح بمجموعة متنوعة من تنسيقات العناوين
عند إنشاء نموذج عنوان، يجب الانتباه إلى تنوّع تنسيقات العناوين، حتى داخل بلد واحد. لا تضع افتراضات حول العناوين "العادية".
استخدِم عنصر <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) تعمل بشكل صحيح كعملية تحقّق عادية من صحة النماذج.