النماذج للهاتف المحمول أولاً

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 10 من 35.

تعد النماذج من أهم أجزاء الويب — حيث يكتب المستخدمون، وينقرون، ويتفاعلون معها باستمرار. عند تصميم النماذج للهواتف المحمولة أولاً، نركز على سهولة الاستخدام على الشاشات الصغيرة:

اجعل المدخلات والأزرار أكبر ليتمكن المستخدمون من الكتابة والنقر بسهولة.
قم برص الحقول عمودياً واستخدم مدخلات بعرض كامل.
أضف مسافات بادئة (padding) وفراغات للأصابع.

مثال للهاتف المحمول:

input, button {
  width: 100%;       /* عرض كامل للشاشات الصغيرة */
  padding: 0.75rem;  /* أسهل للنقر */
  font-size: 1rem;   /* نص قابل للقراءة */
}

ثم، بالنسبة لـ الشاشات الأكبر (الأجهزة اللوحية أو أجهزة الكمبيوتر المكتبية)، نقوم بتحسين التخطيط:

توسيط النموذج في الصفحة.
وضع بعض الحقول جنباً إلى جنب بدلاً من تكديسها.
ضبط العروض والتباعد للحصول على مظهر أفضل.

مثال للشاشات الكبيرة:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* توسيط وتحديد العرض */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* مدخلات جنباً إلى جنب */
  }
}

التحدي

سهل

لقد تم تزويدك بنموذج HTML أساسي. مهمتك هي تعيين أنماط تعتمد على مبدأ الهاتف أولاً (mobile-first):

يجب أن يتم تكديس العناصر داخل النموذج عمودياً. استخدم display: flex و flex-direction: column، وأضف بعض الـ gap لتبدو بشكل جيد.
قم بتطبيق width: 100% وأضف بعض الـ padding لعناصر input و button و textarea حتى تكون كبيرة بما يكفي لشاشات الهاتف وسهلة النقر للمستخدمين.

ورقة مرجعية

عند تصميم النماذج للأجهزة المحمولة أولاً، ركز على سهولة الاستخدام على الشاشات الصغيرة:

اجعل المدخلات والأزرار أكبر حتى يتمكن المستخدمون من الكتابة والنقر بسهولة
قم برص الحقول رأسياً واستخدم مدخلات بكامل العرض
أضف حشوة (padding) وتباعداً للأصابع

أنماط النماذج للأجهزة المحمولة أولاً:

input, button {
  width: 100%;       /* عرض كامل للشاشات الصغيرة */
  padding: 0.75rem;  /* أسهل للنقر */
  font-size: 1rem;   /* نص قابل للقراءة */
}

بالنسبة للشاشات الأكبر (الأجهزة اللوحية أو أجهزة الكمبيوتر المكتبية)، قم بتحسين التخطيط:

قم بتوسيط النموذج في الصفحة
ضع بعض الحقول جنباً إلى جنب بدلاً من رصها
اضبط العروض والتباعد لمظهر أفضل

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* توسيط وتحديد العرض */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* مدخلات جنباً إلى جنب */
  }
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>