مساعدة المستخدمين في استخدام النموذج من خلال متصفّحهم المفضّل
للحرص على أن يتمكّن أكبر عدد ممكن من المستخدمين من الوصول إلى النموذج، استخدِم العناصر المصمّمة للوظيفة: <input>
و<textarea>
و<select>
و<button>
. هذا هو المتوقع لنموذج قابل للاستخدام.
ولا تبدو أنماط المتصفح الافتراضية رائعة! دعونا نغير ذلك.
التأكّد من أنّ عناصر التحكّم في النموذج قابلة للقراءة للجميع
حجم الخط التلقائي لعناصر التحكم في النموذج في معظم المتصفحات صغير جدًا. ولضمان سهولة قراءة عناصر التحكم في النموذج، يمكنك تغيير حجم الخط باستخدام CSS:
عليك زيادة font-size
وline-height
لتحسين إمكانية القراءة.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
مساعدة المستخدمين في التنقل خلال النموذج
كخطوة تالية، عليك تغيير تنسيق النموذج وزيادة تباعد عناصر النموذج لمساعدة المستخدمين في فهم العناصر التي تنتمي معًا إلى بعضها.
تزيد السمة margin
CSS من المساحة بين العناصر، وتزيد السمة padding
المساحة حول محتوى العنصر.
بالنسبة إلى التنسيق العام، استخدِم Flexbox أو Grid. تعرّف على المزيد من المعلومات عن طرق تنسيق CSS.
التأكّد من أنّ عناصر التحكّم في النموذج تبدو مثل عناصر التحكّم في النموذج
يمكنك تسهيل ملء نموذجك على المستخدمين من خلال استخدام أنماط مفهومة جيدًا لعناصر التحكّم في النماذج.
على سبيل المثال، استخدِم حدودًا ثابتة لعناصر <input>
.
input,
textarea {
border: 1px solid;
}
مساعدة المستخدمين في إرسال نموذجك
يمكنك استخدام background
لـ <button>
لمطابقة نمط موقعك الإلكتروني، وإلغاء أنماط border
التلقائية أو إزالتها.
مساعدة المستخدمين في فهم الوضع الحالي
تطبّق المتصفّحات نمطًا تلقائيًا للسمة :focus
.
يمكنك إلغاء أنماط :focus
لمطابقة اللون مع علامتك التجارية.
button:focus {
outline: 4px solid green;
}
التحقق من فهمك
اختبر معلوماتك حول نماذج التصميم
لماذا عليك استخدام الوحدات النسبية في السمة font-size
؟
كيف يمكنك زيادة المسافة بين عناصر التحكّم في النموذج؟
padding
في CSS.spacer
في CSS.margin
في CSS.boundary
في CSS.