حقول الإدخال في كود المنصات هي عناصر تفاعلية تمكن المستخدمين من إدخال أو تعديل النصوص، الأرقام، أو بيانات أخرى. حيث تعتبر وسيلة للمستخدمين لإدخال المعلومات مثل: أسماء المستخدمين وكلمات المرور أو استفسارات البحث، وتوجد عادة في النماذج أو أشرطة البحث.
المظهر
نظام تصميم كود المنصات يوفر مجموعة واسعة من أنواع حقول الإدخال المصممة وفقًا لاحتياجات التصميم وتفاعلات المستخدم، والتي تستوعب عناصر مختلفة داخل الحاوية. تلبي هذه المجموعة المتنوعة من حقول الإدخال مجموعة واسعة من تفاعلات المستخدمين، مما يضمن المرونة والقدرة على التكيف.
الأنواع
المدخلات متاحة بأربعة انواع.
- حقل الإدخال القياسي: هو عنصر أساسي في واجهة المستخدم يسمح للمستخدم بإدخال أي معلومات باستخدام لوحة المفاتيح.
- حقل الإدخال مع أيقونة: حقل إدخال قياسي يتميز بأيقونة لتمثيل الغرض منه بشكل بصري.
- حقل الإدخال مع بادئة ولاحقة: حقل الإدخال مع حاويتين ممتدة ومنفصلة بشكل بصري، غالبًا ما تكون تفاعلية، تستخدم لتوفير معلومات سياقية. على سبيل المثال، إضافة رمز الدولة قبل رقم الهاتف أو رمز العملة بعد المبلغ.
- حقل الإدخال للقراءة فقط: هو حقل نصي داخل واجهة المستخدم يعرض المعلومات ولكن لا يسمح بتعديلها من قبل المستخدم.
أنماط مملوءة
- مملوء - افتراضي: النمط الافتراضي لحقل الإدخال المملوء مع خلفية قياسية وحدود.
- مملوء - أفتح: نمط أفتح من حقول الإدخال المملوءة بدون إطار وخلفية خفيفة.
- مملوء - أغمق: نمط أغمق من حقول الإدخال المملوءة بدون إطار وخلفية داكنة.
النصوص المساعدة
- النصوص المساعدة: هذا حقل إدخال قياسي مصحوب بمعلومات داعمة. تم تصميمه لإرشاد المستخدمين لإدخال بيانات دقيقة، مع تقديم تفاصيل إضافية حول الحقل.
- نص المساعدة للخطأ: مشابه للنص المساعد القياسي، يتم تمييز هذا الحقل الإدخالي باللون الأحمر للإشارة إلى إدخال بيانات غير ناجح. يوجه المستخدمين لتصحيح إدخالهم، مقدماً معلومات إضافية عن الخطأ الذي تم مواجهته.
السلوكيات (الحالات)
تُظهر حقول الإدخال في نظام تصميم كود المنصات سلوكيات مختلفة اعتمادًا على تفاعل المستخدم. وتشتمل هذه السلوكيات على ما يلي:
- الافتراضي: حالة حقل الإدخال الأولية عندما لا يتم التفاعل معه، يظهر كحقل إدخال قياسي قابل للتحرير.
- التمرير: تُفعل هذه الحالة عندما يمرر المستخدم المؤشر فوق حقل الإدخال دون النقر عليه.
- الضغط: تُفعل هذه الحالة عندما ينقر المستخدم على حقل الإدخال، مما يوفر ملاحظات تفيد بأن الحقل قد تم تنشيطه بنجاح.
- التركيز: يحدث عندما تتلقى عناصر حقول الإدخال تركيزًا من لوحة المفاتيح عن طريق مفتاح «Tab»، و
- معطل: حالة تشير إلى أن حقل الإدخال غير تفاعلي أو قابل للتحرير، وغالبًا ما يستخدم في واجهات المستخدم لإيصال أن حقل الإدخال لا يمكن تعديله في ظل الظروف الحالية.
التركيب
- الحاوية: المنطقة القابلة للتحرير التي تحتوي على جميع العناصر.
- مسمى حقل الإدخال: يعرض عنوان حقل الإدخال.
- المنطقة القابلة للتحرير: تمكنك من تعيين قيمة لهذا الحقل عندما يتم التفاعل معه، ويظهر هذا القيمة في حقل الإدخال القياسي.
- الأيقونة: توفر تمثيلاً بصرياً لغرض أو اسم الإدخال.
- أيقونة الملاحظات: توفر تمثيل بصري لصحة الإدخال.
- النص المساعد: يوفر للمستخدم معلومات إضافية للمساعدة.
- البادئة: معلومات مضافة قبل حقل الإدخال الرئيسي لتوفير معلومات سياقية.
- اللاحقة: معلومات مضافة بعد حقل الإدخال الرئيسي لتوفير معلومات سياقية.
إمكانية الوصول
ضمان إمكانية الوصول إلى حقول الإدخال يعتبر أمر في غاية الأهمية لأنها غالبًا ما تشكل العمود الفقري لتفاعلات المستخدمين على مواقع الويب والتطبيقات. فيما يلي دليل مفصل لإنشاء مكونات إدخال قابلة للوصول:
- استخدم عناصر وأنواع HTML الصحيحة للإدخال من أجل التأكد من أن المتصفح والتقنيات المساعدة يمكنها تفسير الغرض من العنصر بشكل صحيح.
- تأكد من إمكانية الوصول إلى جميع حقول الإدخال واستخدامها عبر لوحة المفاتيح فقط.
- استخدم سمات نوع محدد للعناصر عندما يتطلب الأمر ذلك، مثل: البريد الإلكتروني، الهاتف، والرقم …الخ، لاستدعاء لوحة المفاتيح الصحيحة وتوفير التحقق المدمج في بعض المتصفحات.
- استخدم العناصر لتوفير تسمية واضحة لكل مدخل. بالنسبة للمستخدمين الذين يعتمدون على قارئات الشاشة اربط التسمية بالمدخل باستخدام السمة التي تتطابق مع id المدخل. إذا كانت العلامة المرئية غير مرغوب فيها لأسباب تتعلق بالتصميم على سبيل المثال، استخدم aria-label أو aria-labelledby لتوفير اسم يمكن الوصول إليه.
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email">.
- استخدم "aria-describe" لربط أي نص وصفي إضافي أو في الرسائل التي تشير إلى خطأ بالمدخل، مما يساعد المستخدمين على فهم القيود أو التصحيحات. يجب أن يكون اسم المستخدم الخاص بك من 8-20 حرف.
- تأكد بأن المستخدمين يمكنهم التنقل من وإلى حقل الإدخال باستخدام أدوات التحكم القياسية في لوحة المفاتيح (Tab and Shift + Tab).
- الإشارة بوضوح إلى الحقول التي يوجد بها أخطاء بعد التحقق من الصحة وقدم رسائل تفيد بشأن هذا الخطأ. استخدم aria-invalid = «صحيح» على المدخلات التي بها أخطاء وربطها برسالة خطأ وصفية باستخدام aria-description. خطأ: تم أخذ اسم المستخدم بالفعل.
- توفير مؤشرات بصرية واضحة لحالات التركيز مثل الحدود أو الظلال؛ لمساعدة المستخدمين على تحديد العنصر النشط.
- تأكد من وجود تباين كبير بين ألوان النص والخلفية، واستخدم أحجام خطوط مقروءة.
- تأكد بأن حقول الإدخال قابلة للاستخدام على جميع الأجهزة مع أهداف ملموسة ذات حجم مناسب لمستخدمي الهاتف المحمول.