Gerador de Formulário CSS

O formulário básico

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Por favor, insira um email válido.</span>
  </label>

  <label class="field">
    <span class="field-label">Senha</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Inscrever-se</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Quatro estilos comuns

Rótulo flutuante é o mais bonito, mas requer marcação extra ou JavaScript para detectar estado vazio. Contornado é o mais universal.

Lista de verificação de acessibilidade

• Rótulo visível para cada entrada. Nunca use placeholder como o único rótulo, ele desaparece ao focar e falha no contraste.
• <label for> ou <label> envolvente. Ambos são válidos; o envolvente é ligeiramente mais fácil.
• Indicador de foco. Nunca outline: none sem uma substituição. Usuários de teclado precisam disso.
• Mensagens de erro: vincule-as via aria-describedby na entrada. Não use apenas cor para marcar erros, inclua uma mensagem de texto ou ícone.
• Campos obrigatórios: use o atributo required. Adicione um marcador visual (asterisco) no rótulo para usuários com visão.
• Tipos de entrada: use type="email", type="tel", type="url", type="number". Teclados móveis se adaptam.
• Atributos autocomplete: autocomplete="email", autocomplete="current-password", etc. Economiza muito digitação dos usuários.

Estados de validação nativa

CSS tem pseudo-classes para validade de formulário:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (para entradas numéricas com min/max)
• :placeholder-shown (vazio, placeholder visível)
• :user-invalid (inválido e o usuário interagiu, o correto para estilos de erro)

A pseudo-classe :user-invalid é a maneira mais limpa de mostrar erros apenas depois que o usuário fez algo, evitando bordas vermelhas pré-interação. Suporte foi adicionado em todos os principais em torno de 2023.

Estado desativado

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Entradas desativadas não são focáveis ou enviáveis. Se você quiser que sejam focáveis para leitores de tela, use readonly em vez disso, o formulário envia o valor, mas o usuário não pode editá-lo.