مساعدة المستخدمين في استخدام النموذج من خلال المتصفّح المفضّل لديهم
لضمان إمكانية وصول أكبر عدد ممكن من المستخدمين إلى النموذج، استخدم العناصر المصممة
الوظيفة: <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
لعنوان URL <button>
ليتوافق مع نمط موقعك الإلكتروني.
وإلغاء أنماط border
التلقائية أو إزالتها
مساعدة المستخدمين في فهم الحالة الحالية
تطبِّق المتصفّحات نمطًا تلقائيًا في :focus
.
يمكنك إلغاء أنماط :focus
لمطابقة اللون مع علامتك التجارية.
button:focus {
outline: 4px solid green;
}
التحقق من فهمك
اختبر معلوماتك حول تصميم النماذج
لمَ عليك استخدام الوحدات النسبية في font-size
؟
كيف يمكنك زيادة المسافة بين عناصر التحكّم في النموذج؟
padding
CSSspacer
CSSboundary
CSSmargin
CSS