كيف يمكنك تصميم نموذج يعمل بشكل جيد مع مجموعة متنوعة من الأسماء وتنسيقات العناوين؟ الشكل الثانوي تؤدّي الأعطال التقنية إلى إزعاج المستخدمين ويمكن أن تؤدي إلى تركهم لموقعك الإلكتروني أو التوقف عن إكمال عملية شراء. أو الاشتراك.
يعرض لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج سهل الاستخدام ويمكن الوصول إليه ويعمل بشكل جيد لمعظم المستخدمين.
الخطوة الأولى: الاستفادة إلى أقصى حدّ من عناصر وسمات HTML
ستبدأ في هذا الجزء من الدرس التطبيقي حول الترميز باستخدام نموذج فارغ وعنوان وزر. بأنفسهم. وبعد ذلك ستبدأ في إضافة المدخلات. (تتوفر لغة CSS وقليل من JavaScript included.)
انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
أضِف حقل اسم إلى عنصر
<form>باستخدام الرمز التالي:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
قد يبدو ذلك معقدًا ومتكررًا لحقل اسم واحد فقط، ولكنه يفعل كثيرًا.
لقد ربطت label بالسمة input من خلال مطابقة السمة for في label مع السمة.
جهاز input الخاص بـ name أو id يؤدي النقر على التصنيف إلى نقل التركيز إلى الإدخال الخاص به، ما يزيد كثيرًا
أكثر من الإدخال بمفرده - وهو أمر جيد للأصابع والإبهام ونقرات الماوس! برامج قراءة الشاشة
الإعلان عن نص التصنيف عند التركيز على التسمية أو على إدخال التصنيف.
ماذا عن name="name"؟ هذا هو الاسم (الذي يصادف أنه 'name'!) المرتبط بالبيانات
من هذا الإدخال الذي يتم إرساله إلى الخادم عند إرسال النموذج. تضمين سمة name
تعني أيضًا أنه يمكن الوصول إلى البيانات من هذا العنصر من خلال FormData API.
الخطوة 2: إضافة سمات لمساعدة المستخدمين على إدخال البيانات
ماذا يحدث عند النقر على إدخال الاسم في Chrome؟ من المفترض أن تظهر لك ميزة "الملء التلقائي"
الاقتراحات التي خزّنها المتصفح وتخميناتها مناسبة لهذا الإدخال، نظرًا
القيمتان name وid
الآن أضف autocomplete="name" إلى رمز الإدخال لكي يظهر على النحو التالي:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
أعِد تحميل الصفحة في Chrome وانقر على إدخال الاسم. ما هي الاختلافات؟
من المفترض أن تلاحظ تغييرًا طفيفًا: مع autocomplete="name"، أصبحت الاقتراحات الآن محددة
القيم التي تم استخدامها سابقًا في مدخلات النماذج التي كانت تحتوي أيضًا على autocomplete="name". المتصفح
ليس مجرد تخمين ما قد يكون مناسبًا: بل يمكنك التحكم فيه. سيظهر لك أيضًا قسم إدارة...
لعرض وتعديل الأسماء والعناوين التي خزنها متصفحك.
أضف الآن سمات التحقق من القيد
maxlength وpattern وrequired بحيث يظهر رمز الإدخال كما يلي:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
تعني العلامة
maxlength="100"أنّ المتصفّح لن يسمح بأي إدخال يزيد طوله عن 100 حرف.تستخدم
pattern="[\p{L} \-\.]+"تعبيرًا عاديًا يسمح بأحرف Unicode، الواصلات والنقاط (النقاط الكاملة). وهذا يعني أن الأسماء مثل فاطمة أو جورج لا يتم تصنيفها كـ "غير صالح". هذا لا يحدث إذا استخدمت القيمة\wالتي [تسمح فقط بالأحرف من الأبجدية اللاتينية.القيمة "
required" مطلوبة. لن يسمح المتصفح بإرسال النموذج بدون بيانات هذا الحقل، وسيتم تحذيره وإبراز الإدخال إذا حاولت إرساله. ما مِن رمز إضافي مطلوب!
لاختبار طريقة عمل النموذج مع هذه السمات أو بدونها، جرِّب إدخال البيانات:
- جرِّب إدخال قيم لا تتطابق مع سمة
pattern. - يُرجى محاولة إرسال النموذج باستخدام حقل فارغ. سترى تحذيرًا بشأن وظيفة المتصفح المضمّنة الحقل المطلوب الفارغ وضبط التركيز عليه.
الخطوة 3: إضافة حقل عنوان مرن إلى النموذج
لإضافة حقل عنوان، أضِف الرمز التالي إلى النموذج:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea هي الطريقة الأكثر مرونة لإدخال عناوينهم، وهذه الطريقة رائعة
قص ولصق.
يجب تجنب تقسيم نموذج العنوان إلى عناصر مثل اسم الشارع ورقمه إلا إذا التي تحتاج إليها حقًا. لا تجبر المستخدمين على محاولة إدراج عناوينهم في حقول غير منطقية.
الآن عليك إضافة حقول لكل من الرمز البريدي والبلد أو المنطقة. للتبسيط، تم تضمين أول خمسة بلدان فقط هنا. يتم تضمين قائمة كاملة في نموذج العنوان المكتمل.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
سترى أنّ الرمز البريدي اختياري، وذلك لأنّ العديد من البلدان لا تستخدم الرموز البريدية.
يوفّر دليل المصدر العالمي معلومات عن
تنسيقات العناوين في 194 بلدًا مختلفًا، بما في ذلك نماذج العناوين). تظهر التسمية البلد أو
تُستخدم المنطقة بدلاً من البلد، نظرًا لأن بعض الخيارات من القائمة الكاملة (مثل
المملكة المتحدة) ليست بلدانًا فردية (على الرغم من قيمة autocomplete).
الخطوة 4: السماح للعملاء بإدخال عناوين الشحن والفوترة بسهولة
أنشأت نموذج عنوان يعمل بشكل كبير، ولكن ماذا لو كان موقعك الإلكتروني يتطلب أكثر من نموذج واحد
عنوانك للشحن والفوترة، على سبيل المثال؟ جرِّب تعديل النموذج ليتمكّن العملاء من الدخول.
عنواني الشحن وإرسال الفواتير. كيف يمكنك جعل إدخال البيانات سريعًا وسهلاً قدر الإمكان،
خاصةً إذا كان العنوانان متماثلان؟ تشرح المقالة المتوافقة مع هذا الدرس التطبيقي حول الترميز
أساليب التعامل مع العناوين المتعددة.
مهما فعلت، احرص على استخدام قيم autocomplete الصحيحة.
الخطوة 5: إضافة حقل رقم هاتف
لإضافة إدخال رقم هاتف، أضِف الرمز التالي إلى النموذج:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
بالنسبة إلى أرقام الهواتف، يمكنك استخدام إدخال واحد: لا تقسم الرقم إلى أجزاء. هذا يسهل على للمستخدمين إدخال البيانات أو نسخها ولصقها، ويجعل عملية التحقق من الصحة أكثر بساطة، ويمكّن المتصفحات من الملء التلقائي.
هناك سمتان يمكنهما تحسين تجربة المستخدم عند إدخال رقم هاتف:
- يضمن
type="tel"حصول مستخدمي الأجهزة الجوّالة على لوحة المفاتيح الصحيحة. - يضبط
enterkeyhint="done"تصنيف مفتاح Enter في لوحة مفاتيح الأجهزة الجوّالة للإشارة إلى أن هذا هو آخر إدخال. ويمكن الآن إرسال النموذج (الإعداد التلقائي هوnext).
من المفترض أن يظهر نموذج العنوان الكامل الآن على النحو التالي:
- يمكنك تجربة النموذج على أجهزة مختلفة. ما الأجهزة والمتصفحات التي تستهدفها؟ كيف بإمكان تحسين النموذج؟
تتوفّر عدة طرق لاختبار النموذج على أجهزة مختلفة:
- استخدام وضع الجهاز "أدوات مطوري البرامج في Chrome" لمحاكاة الأجهزة المحمولة.
- إرسال عنوان URL من جهاز الكمبيوتر إلى هاتفك
- استخدِم خدمة مثل BrowserStack لاختبار نطاقٍ ما. من الأجهزة والمتصفحات
التقدم إلى أبعد من ذلك
"إحصاءات Google" ومراقبة المستخدمين الحقيقية: تمكين اختبار أداء تصميم النموذج وسهولة استخدامه ومراقبته للمستخدمين الحقيقيين، وللتحقق مما إذا كانت التغييرات ناجحة. يجب مراقبة أداء التحميل ومؤشرات أداء الويب الأخرى. إضافةً إلى إحصاءات الصفحة (نسبة المستخدمين الذين يرتدون من نموذج العنوان بدون إكمالها) ؟ وما المدة التي يقضيها المستخدمون على صفحات نماذج العناوين؟) وإحصاءات التفاعل (أي صفحة أو المكونات التي يتفاعل معها المستخدمون، أم لا؟)
أين يوجد المستخدمون؟ كيف يقوم بتنسيق عنوانه؟ ما الأسماء التي يستخدمها للعنوان مثل الرمز البريدي فقط؟ دليل "فرانك" القهري للعناوين البريدية توفّر روابط مفيدة وإرشادات شاملة توضّح تنسيقات العناوين في أكثر من 200 بلد.
تشتهر أدوات اختيار البلدان بسهولة الاستخدام. من الأفضل تجنُّب العناصر المحدّدة لقائمة طويلة من السلع ويسرد معيار رمز البلد ISO 3166 حاليًا 249 بلدًا. وبدلاً من
<select>، يمكنك استخدام بديل مثل أداة اختيار البلدان في معهد Baymardهل يمكنك تصميم أداة اختيار أفضل للقوائم التي تحتوي على الكثير من العناصر؟ كيف ستضمن أن يكون تصميمك عبر مجموعة من الأجهزة والأنظمة الأساسية؟ (لا يعمل العنصر
<select>بشكل جيد مع عدد كبير من العناصر، لكن على الأقل يمكن استخدامها على جميع المتصفحات والأجهزة المساعِدة)مشاركة المدونة <input type="country" /> يناقشها مدى تعقيد توحيد أداة اختيار البلد. يمكن أن يكون أقلمة أسماء البلدان أيضًا إشكالية. تضم قوائم البلدان أداة تنزيل رموز البلدان وأسماءها بلغات متعددة وتنسيقات متعددة.