نماذج العناوين

قد يستغرق ملء العنوان وقتًا طويلاً وقد يكون أمرًا محبطًا. ما هو الغرض من سطر العنوان 2؟ قد لا يكون لديك اسم عائلة، فماذا يجب إدخاله في حقل اسم العائلة؟ تجنَّب هذه الالتباسات وساعد المستخدمين في ملء نماذج العناوين.

إنشاء نموذج سهل الاستخدام

تستخدم العديد من النماذج حقلاً للاسم الأول وحقلاً لاسم العائلة. ومع ذلك، لا يملك بعض الأشخاص اسم عائلة، أو لا يتضمّن اسمهم جزأين، فكيف يمكنهم ملء حقل اسم العائلة؟ استخدِم <input> واحدًا لحقل الاسم. مزيد من المعلومات حول التعامل مع تنسيقات الأسماء المختلفة

وفقًا للبحث، قد يكون حقل سطر العنوان 2 مربكًا للمستخدمين. ننصحك باستخدام <textarea> للعنوان الكامل، أو إخفاء الحقل سطر العنوان 2 خلف زر <button>.

انتبه إلى أوصاف عناصر التحكّم في النماذج. على سبيل المثال، يقول المستخدمون في الولايات المتحدة الرمز البريدي، وفي المملكة المتحدة الرمز البريدي. استخدِم <label for="zip">ZIP or postal code (optional)</label> للتأكّد من أنّ المستخدمين يعرفون البيانات التي يجب إدخالها. اجعل حقل الرمز البريدي اختياريًا، فليس لكل عنوان رمز بريدي.

مساعدة المستخدمين في إدخال عناوينهم

يمكن أن تساعد السمة autocomplete المستخدمين في إعادة إدخال عناوينهم:

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

يمكنك تحديد قيم متعددة مفصولة بمسافة لـ autocomplete. لنفترض أنّ لديك نموذجًا يتضمّن عنوان شحن وآخر يتضمّن عنوان إرسال فواتير. لتحديد الرمز البريدي الخاص بعنوان الفوترة للمتصفّح، يمكنك استخدام autocomplete="billing postal-code". بالنسبة إلى عنوان الشحن، استخدِم shipping كالقيمة الأولى.

يمكنك تغيير تصنيف المفتاح Enter على لوحات المفاتيح الظاهرة على الشاشة باستخدام السمة enterkeyhint. استخدِم enterkeyhint="done" لعنصر التحكّم الأخير في النموذج، وenterkeyhint="next" لعناصر التحكّم الأخرى في النموذج.

الموارد