טפסים למובייל תחילה

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 10 מתוך 35.

טפסים הם אחד החלקים החשובים ביותר באינטרנט: משתמשים מקלידים, מקישים ומבצעים בהם פעולות כל הזמן. כשמתכננים טפסים קודם כול למכשירים ניידים, מתמקדים בשימושיות במסכים קטנים:

הגדל את שדות הקלט והכפתורים כדי שהמשתמשים יוכלו להקליד וללחוץ בקלות.
סדר את השדות במאונך והשתמש בשדות קלט ברוחב מלא.
הוסף ריווח פנימי ומרווחים שמתאימים לאצבעות.

דוגמה למכשירים ניידים:

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 בסיסי. המשימה שלך היא להגדיר סגנונות בגישת מובייל תחילה:

יש לסדר את הרכיבים שבתוך הטופס אנכית. השתמש ב־display: flex וב־flex-direction: column, והוסף מעט gap כדי שהמראה יהיה נאה.
החל width: 100% והוסף מעט padding לרכיבי input, button ו־textarea, כך שיהיו גדולים מספיק למסכים ניידים ושיהיה קל למשתמשים להקיש עליהם.

נסו בעצמכם

<!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>