Moduli mobile-first

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 10 di 35.

I moduli sono una delle parti più importanti del web: gli utenti digitano, toccano e interagiscono con essi continuamente. Quando progettiamo i moduli partendo dai dispositivi mobili, ci concentriamo sulla usabilità sugli schermi piccoli:

Rendi più grandi gli input e i pulsanti così gli utenti possono digitare e toccare facilmente.
Disponi i campi in verticale e usa input a larghezza intera.
Aggiungi spaziatura interna e spazio per le dita.

Esempio per dispositivi mobili:

input, button {
  width: 100%;       /* larghezza completa per gli schermi piccoli */
  padding: 0.75rem;  /* più facile da toccare */
  font-size: 1rem;   /* testo leggibile */
}

Poi, per gli schermi più grandi (tablet o computer desktop), miglioriamo il layout:

Centra il modulo nella pagina.
Disponi alcuni campi affiancati invece che impilati.
Regola le larghezze e la spaziatura per migliorare l'aspetto.

Esempio per schermi più grandi:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centra e limita la larghezza */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* campi di input affiancati */
  }
}

Sfida

Facile

Ti viene fornito un modulo HTML di base. Il tuo compito è impostare stili mobile-first:

Gli elementi all'interno del modulo devono essere disposti verticalmente. Usa display: flex e flex-direction: column e aggiungi un po' di gap per ottenere un buon risultato.
Applica width: 100% e aggiungi un po' di padding agli elementi input, button e textarea, in modo che siano abbastanza grandi per gli schermi dei dispositivi mobili e facili da toccare.

Provalo tu

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