كيف يمكنك تصميم نموذج يناسب مجموعة متنوعة من تنسيقات الأسماء والعناوين؟ إنّ الأخطاء البسيطة في النموذج تثير انزعاج المستخدمين ويمكن أن تؤدي إلى مغادرة موقعك الإلكتروني أو التوقّف عن إكمال عملية شراء أو اشتراك.
يوضّح لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج سهل الاستخدام وسهل الوصول إليه يعمل بشكل جيد لمعظم المستخدمين.
الخطوة 1: الاستفادة إلى أقصى حد من عناصر HTML وسماته
ستبدأ هذا الجزء من ورشة إعداد الرمز البرمجي بنموذج فارغ، يتضمّن عنوانًا وزرًا فقط بمفردهما. بعد ذلك، ستبدأ بإضافة مدخلات. (يتم تضمين CSS وقليل من JavaScript مسبقًا).
انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.
أضِف حقل اسم إلى عنصر
<form>باستخدام الرمز البرمجي التالي:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
قد يبدو ذلك معقّدًا ومتكرّرًا لحقل اسم واحد فقط، ولكنه يؤدي حاليًا إلى الكثير من الإجراءات.
لقد ربطت label بـ input من خلال مطابقة سمة for في label مع
name أو id في input. يؤدي النقر على تصنيف إلى نقل التركيز إلى إدخاله، ما يجعله هدفًا أكبر بكثير مقارنةً بالإدخال وحده، ما يناسب الأصابع والإبهام ونقرات الماوس. تُعلِن تطبيقات قراءة الشاشة عن نص التصنيف عندما يتم التركيز على التصنيف أو إدخاله.
ماذا عن 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} \-\.]+"تعبيرًا عاديًا يسمح باستخدام أحرف يونيكود، والواصلات والنقاط (النقاط الكاملة). وهذا يعني أنّ الأسماء مثل "فاتن" أو "عماد" لا يتم تصنيفها على أنّها "غير صالحة". لا ينطبق ذلك في حال استخدام القيمة\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 ومراقبة المستخدِمين الفعليين: يمكنك تفعيل اختبار ومراقبة أداء تصميم النموذج وقابليته للاستخدام من قِبل المستخدِمين الفعليين، وتحقّق مما إذا كانت التغييرات ناجحة. يجب مراقبة أداء التحميل ومؤشرات أداء الويب الأخرى، بالإضافة إلى إحصاءات الصفحة (ما هي نسبة المستخدمين الذين يغادرون صفحة نموذج العنوان بدون إكماله؟ ما هو الوقت الذي يقضيه المستخدمون على صفحات نموذج العنوان؟) وإحصاءات التفاعل (ما هي مكونات الصفحة التي يتفاعل معها المستخدمون أو لا يتفاعلون معها؟)
ما هو الموقع الجغرافي لمستخدمي تطبيقك؟ كيف يتم تنسيق عنوانه؟ ما هي الأسماء التي يستخدمونها لمكونات العنوان، مثل الرمز البريدي؟ دليل Frank's Compulsive Guide to Postal Addresses يقدّم روابط مفيدة وإرشادات مفصّلة حول تنسيقات العناوين في أكثر من 200 بلد.
تشتهر أدوات اختيار البلدان بسهولة استخدامها المنخفضة. من الأفضل تجنُّب اختيار عناصر لقائمة طويلة من العناصر، ويُرجى العِلم أنّ معيار رموز البلدان ISO 3166 يُدرِج حاليًا 249 بلدًا. بدلاً من
<select>، ننصحك باستخدام بديل مثل أداة اختيار البلدان من Baymard Institute.هل يمكنك تصميم أداة اختيار أفضل للقوائم التي تحتوي على الكثير من العناصر؟ كيف يمكنك التأكّد من أنّ تصميمك يمكن الوصول إليه على مجموعة من الأجهزة والأنظمة الأساسية؟ (لا يعمل عنصر
<select>بشكل جيد مع عدد كبير من العناصر، ولكن يمكن استخدامه على جميع المتصفحات والأجهزة المساعِدة تقريبًا).تتناول مشاركة المدونة <input type="country" /> مدى تعقيد توحيد أداة اختيار البلد. يمكن أن تؤدي ترجمة أسماء البلدان أيضًا إلى مشاكل. تتضمّن قوائم البلدان أداة لتحميل رموز البلدان وأسمائها بعدّة لغات وبتنسيقات متعددة.