Formulários Mobile-First

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 10 de 35.

Formulários são uma das partes mais importantes da web — os usuários digitam, tocam e interagem com eles constantemente. Ao projetar formulários para mobile-first, focamos na usabilidade em telas pequenas:

Torne os inputs e botões maiores para que os usuários possam digitar e tocar facilmente.
Empilhe os campos verticalmente e use inputs de largura total.
Adicione padding e espaçamento para os dedos.

Exemplo para dispositivos móveis:

input, button {
  width: 100%;       /* largura total para telas pequenas */
  padding: 0.75rem;  /* mais fácil de tocar */
  font-size: 1rem;   /* texto legível */
}

Então, para telas maiores (tablet ou desktop), aprimoramos o layout:

Centralize o formulário na página.
Coloque alguns campos lado a lado em vez de empilhá-los.
Ajuste as larguras e o espaçamento para uma melhor aparência.

Exemplo para telas maiores:

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

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

Desafio

Fácil

Você recebeu um formulário HTML básico. Sua tarefa é definir estilos mobile-first:

Os elementos dentro do formulário devem ser empilhados verticalmente. Use display: flex e flex-direction: column, e adicione algum gap para que fique com uma boa aparência.
Aplique width: 100% e adicione algum padding aos elementos input, button e textarea para que sejam grandes o suficiente para telas móveis e fáceis para os usuários tocarem.

Folha de consulta

Ao projetar formulários com foco em mobile-first, concentre-se na usabilidade em telas pequenas:

Torne os inputs e botões maiores para que os usuários possam digitar e tocar facilmente
Empilhe os campos verticalmente e use inputs de largura total
Adicione padding e espaçamento para os dedos

Estilos de formulário mobile-first:

input, button {
  width: 100%;       /* largura total para telas pequenas */
  padding: 0.75rem;  /* mais fácil de tocar */
  font-size: 1rem;   /* texto legível */
}

Para telas maiores (tablet ou desktop), aprimore o layout:

Centralize o formulário na página
Coloque alguns campos lado a lado em vez de empilhá-los
Ajuste as larguras e o espaçamento para uma melhor aparência

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centraliza e limita a largura */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* inputs lado a lado */
  }
}

Experimente você mesmo

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