Formularios Mobile-First

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 10 de 35.

Los formularios son una de las partes más importantes de la web: los usuarios escriben, pulsan e interactúan con ellos constantemente. Al diseñar formularios pensando primero en los dispositivos móviles, nos centramos en la usabilidad en pantallas pequeñas:

Haz que los inputs y botones sean más grandes para que los usuarios puedan escribir y tocar fácilmente.
Apila los campos verticalmente y usa inputs de ancho completo.
Añade padding y espaciado para los dedos.

Ejemplo para móviles:

input, button {
  width: 100%;       /* ancho completo para pantallas pequeñas */
  padding: 0.75rem;  /* más fácil de tocar */
  font-size: 1rem;   /* texto legible */
}

Luego, para pantallas más grandes (tableta o escritorio), mejoramos el diseño:

Centra el formulario en la página.
Coloca algunos campos uno al lado del otro en lugar de apilarlos.
Ajusta los anchos y el espaciado para una mejor apariencia.

Ejemplo para pantallas más grandes:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centrar y limitar el ancho */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* entradas una al lado de la otra */
  }
}

Desafío

Fácil

Se te proporciona un formulario HTML básico. Tu tarea es establecer estilos mobile-first:

Los elementos dentro del formulario deben estar apilados verticalmente. Usa display: flex y flex-direction: column, y añade algo de gap para que se vea bien.
Aplica width: 100% y añade algo de padding a los elementos input, button y textarea para que sean lo suficientemente grandes para pantallas móviles y fáciles de tocar para los usuarios.

Hoja de referencia

Al diseñar formularios priorizando los dispositivos móviles (mobile-first), enfócate en la usabilidad en pantallas pequeñas:

Haz que los campos de entrada y botones sean más grandes para que los usuarios puedan escribir y tocar fácilmente
Apila los campos verticalmente y usa entradas de ancho completo
Añade relleno (padding) y espaciado para los dedos

Estilos de formulario para móviles:

input, button {
  width: 100%;       /* ancho completo para pantallas pequeñas */
  padding: 0.75rem;  /* más fácil de tocar */
  font-size: 1rem;   /* texto legible */
}

Para pantallas más grandes (tableta o escritorio), mejora el diseño:

Centra el formulario en la página
Coloca algunos campos uno al lado del otro en lugar de apilarlos
Ajusta los anchos y el espaciado para una mejor apariencia

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centrar y limitar el ancho */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* entradas una al lado de la otra */
  }
}

Pruébalo tú mismo

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