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

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

لضمان استجابة الحجم لتفضيلات المستخدم.
لضمان استجابة الحجم للوضع الداكن
لضمان استجابة الحجم للاستعلامات عن الوسائط.
لضمان استجابة الحجم للعنصر السابق.

كيف يمكنك زيادة المسافة بين عناصر التحكّم في النموذج؟

استخدام سمة boundary CSS
استخدام سمة padding CSS
استخدام سمة spacer CSS
استخدام سمة margin CSS

الموارد