مساعدة المستخدمين في استخدام النموذج من خلال المتصفّح المفضّل لديهم
لضمان إمكانية وصول أكبر عدد ممكن من المستخدمين إلى النموذج، استخدم العناصر المصممة
الوظيفة: <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 CSSmargin CSSboundary CSS