كيف يمكنك تصميم نموذج يعمل بشكل جيد مع مجموعة متنوعة من الأسماء وتنسيقات العناوين؟ تؤدي أعطال النماذج البسيطة إلى إزعاج المستخدمين ويمكن أن تؤدي إلى مغادرتهم لموقعك أو التوقف عن إكمال عملية الشراء أو الاشتراك.
يوضّح لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج سهل الاستخدام يمكن الوصول إليه ويكون مناسبًا لمعظم المستخدمين.
الخطوة 1: الاستفادة إلى أقصى حدّ من عناصر HTML والسمات
ستبدأ هذا الجزء من الدرس التطبيقي حول الترميز بنموذج فارغ، مجرد عنوان وزر، وكل ذلك من تلقاء نفسه. بعد ذلك، ستبدأ في إضافة إدخالات. (تم تضمين CSS وقليل من JavaScript بالفعل).
انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
أضِف حقل اسم إلى العنصر
<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"تصنيف مفتاح الإدخال للوحة مفاتيح الأجهزة الجوّالة للإشارة إلى أنّ هذا هو الحقل الأخير ويمكن الآن إرسال النموذج (الإعداد التلقائي هوnext).
يجب أن يبدو نموذج العنوان الكامل الآن على النحو التالي:
- جرِّب النموذج على أجهزة مختلفة. ما هي الأجهزة والمتصفحات التي تستهدفها؟ كيف يمكن تحسين النموذج؟
هناك عدة طرق لاختبار النموذج على أجهزة مختلفة:
- استخدام وضع الجهاز في "أدوات مطوري البرامج في Chrome" لمحاكاة الأجهزة الجوّالة
- أرسِل عنوان URL من جهاز الكمبيوتر إلى هاتفك.
- يمكنك استخدام خدمة، مثل BrowserStack، لاختبار مجموعة من الأجهزة والمتصفحات.
تحقيق المزيد من الإنجازات
"الإحصاءات" و"المراقبة الفعلية للمستخدم": أتاح لك إمكانية اختبار أداء تصميم النموذج وسهولة استخدامه ومراقبته للمستخدمين الحقيقيين، والتحقق من نجاح التغييرات. عليك مراقبة أداء التحميل ومؤشرات أداء الويب الأخرى بالإضافة إلى إحصاءات الصفحة (ما هي نسبة المستخدمين الذين يرتدون من نموذج العنوان بدون استكماله؟ والمدة التي يقضيها المستخدمون في صفحات نماذج العناوين؟) وإحصاءات التفاعل (ما هي مكوّنات الصفحة التي يتفاعل معها المستخدمون أم لا؟)
أين يوجد المستخدمون؟ كيف ينسقون عناوينهم؟ ما الأسماء التي يستخدمونها لمكونات العناوين، مثل الرمز البريدي أو الرمز البريدي؟ يوفّر دليل "فرانك" الإلزامي للعناوين البريدية روابط مفيدة وإرشادات شاملة تفصّل تنسيقات العناوين في أكثر من 200 بلد.
تشتهر أدوات اختيار البلدان بأنّها سيئة الاستخدام. من الأفضل تجنُّب العناصر المحدَّدة في قائمة طويلة من العناصر والمعيار الخاص برمز البلد وفقًا لمعيار ISO 3166 يتضمّن حاليًا 249 بلدًا. بدلاً من استخدام
<select>، يمكنك استخدام طريقة بديلة، مثل أداة اختيار البلد في معهد Baymard Institute.هل يمكنك تصميم أداة اختيار أفضل للقوائم التي تحتوي على الكثير من العناصر؟ كيف يمكنك التأكد من إمكانية الوصول إلى تصميمك عبر مجموعة من الأجهزة والمنصات؟ (لا يعمل العنصر
<select>بشكل جيد مع عدد كبير من العناصر، ولكنه على الأقل يمكن استخدامه على جميع المتصفحات والأجهزة المساعِدة).تتناول مشاركة المدونة <input type="country" /> مدى تعقيد عملية توحيد أداة اختيار البلد. يمكن أن يكون أقلمة أسماء البلدان أيضًا مشكلة. تتضمن قوائم البلدان أداة لتنزيل رموز البلدان وأسمائها بعدة لغات وبتنسيقات متعددة.