Mobile-First-Formulare

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

Formulare sind einer der wichtigsten Bestandteile des Webs — Benutzer tippen, klicken und interagieren ständig mit ihnen. Beim Entwerfen von Formularen nach dem Mobile-First-Prinzip konzentrieren wir uns auf Benutzerfreundlichkeit auf kleinen Bildschirmen:

Machen Sie Eingabefelder und Schaltflächen größer, damit Benutzer einfach tippen und klicken können.
Stapeln Sie Felder vertikal und verwenden Sie Eingabefelder in voller Breite.
Fügen Sie Padding und Abstände für Finger hinzu.

Beispiel für Mobilgeräte:

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

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

Zentrieren Sie das Formular auf der Seite.
Platzieren Sie einige Felder nebeneinander, anstatt sie untereinander anzuordnen.
Passen Sie Breiten und Abstände für ein besseres Erscheinungsbild an.

Beispiel für größere Bildschirme:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* Breite begrenzen und zentrieren */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* Eingabefelder nebeneinander */
  }
}

Aufgabe

Einfach

Dir wird ein einfaches HTML-Formular bereitgestellt. Deine Aufgabe ist es, Mobile-First-Styles festzulegen:

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

Spickzettel

Beim Entwerfen von Formularen nach dem Mobile-First-Prinzip liegt der Fokus auf der Benutzerfreundlichkeit auf kleinen Bildschirmen:

Machen Sie Eingabefelder und Schaltflächen größer, damit Benutzer sie leicht antippen und darin schreiben können
Ordnen Sie Felder vertikal an und verwenden Sie Eingabefelder mit voller Breite
Fügen Sie Padding und Abstände für die Bedienung mit den Fingern hinzu

Mobile-First-Formularstile:

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

Für größere Bildschirme (Tablet oder Desktop) optimieren Sie das Layout:

Zentrieren Sie das Formular auf der Seite
Platzieren Sie einige Felder nebeneinander statt untereinander
Passen Sie Breiten und Abstände für ein besseres Erscheinungsbild an

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* zentrieren und Breite begrenzen */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* Eingabefelder nebeneinander */
  }
}

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>