Mobile-First-Formulare

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 10 von 35.

Formulare gehören zu den wichtigsten Bestandteilen des Webs: Nutzer tippen und interagieren ständig mit ihnen. Beim Entwerfen von Formularen nach dem Mobile-First-Prinzip konzentrieren wir uns auf die Benutzerfreundlichkeit auf kleinen Bildschirmen:

Gestalte Eingabefelder und Schaltflächen größer, damit Nutzer problemlos tippen und tippen können.
Ordne die Felder vertikal an und verwende vollbreite Eingabefelder.
Füge Innenabstand und Abstände für die Finger hinzu.

Beispiel für Mobilgeräte:

input, button {
  width: 100%;       /* volle Breite für kleine Bildschirme */
  padding: 0.75rem;  /* leichter zu tippen */
  font-size: 1rem;   /* lesbarer Text */
}

Dann verbessern wir für größere Bildschirme (Tablet oder Desktop) das Layout:

Zentriere das Formular auf der Seite.
Platziere einige Felder nebeneinander, anstatt sie untereinander anzuordnen.
Passe Breiten und Abstände für ein besseres Erscheinungsbild an.

Beispiel für größere Bildschirme:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* center and limit width */
    margin: 0 auto;
  }

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

Aufgabe

Einfach

Du erhältst ein einfaches HTML-Formular. Deine Aufgabe ist es, Mobile-First-Stile festzulegen:

Die Elemente innerhalb des Formulars sollen vertikal angeordnet werden. Verwende display: flex und flex-direction: column und füge etwas gap hinzu, damit es ansprechend aussieht.
Wende width: 100% an und füge den Elementen input, button und textarea etwas padding hinzu, damit sie für mobile Bildschirme groß genug und für Benutzer leicht anzutippen sind.

Probier es selbst

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