تصميم النماذج

مساعدة المستخدمين في استخدام النموذج من خلال متصفّحهم المفضّل

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

التحقق من فهمك

اختبر معلوماتك حول نماذج التصميم

المراجِع

• الاطّلاع على لغة CSS
• طرق تنسيق CSS
• تصميم مؤشرات التركيز
• إعادة النمط التلقائي لـ <button>.