Generador de Formularios CSS

El formulario base

<form class="form">
  <label class="field">
    <span class="field-label">Correo electrónico</span>
    <input type="email" required>
    <span class="field-error">Por favor, introduce un correo electrónico válido.</span>
  </label>

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

  <button type="submit" class="button">Registrarse</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; }

Cuatro estilos comunes

La etiqueta flotante es la más bonita pero requiere marcado adicional o JavaScript para detectar el estado vacío. El contorneado es el más universal.

Lista de verificación de accesibilidad

• Etiqueta visible para cada entrada. Nunca uses un placeholder como la única etiqueta, desaparece al enfocar y falla en contraste.
• <label for> o envolviendo <label>. Ambos son válidos; envolver es un poco más fácil.
• Indicador de foco. Nunca outline: none sin un reemplazo. Los usuarios de teclado lo necesitan.
• Mensajes de error: enlázalos a través de aria-describedby en la entrada. No uses solo color para marcar errores, incluye un mensaje de texto o icono.
• Campos requeridos: usa el atributo required. Agrega un marcador visual (asterisco) en la etiqueta para usuarios videntes.
• Tipos de entrada: usa type="email", type="tel", type="url", type="number". Los teclados móviles se adaptan.
• Atributos autocomplete: autocomplete="email", autocomplete="current-password", etc. Ahorra mucho tecleo a los usuarios.

Estados de validación nativos

CSS tiene pseudo-clases para la validez del formulario:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (para entradas numéricas con min/max)
• :placeholder-shown (vacío, placeholder visible)
• :user-invalid (inválido y el usuario ha interactuado, el correcto para estilos de error)

La pseudo-clase :user-invalid es la forma más limpia de mostrar errores solo después de que el usuario ha hecho algo, evitando bordes rojos antes de la interacción. El soporte llegó a todos los principales alrededor de 2023.

Estado deshabilitado

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

Las entradas deshabilitadas no son enfocables ni enviables. Si deseas que sean enfocables para lectores de pantalla, usa readonly en su lugar, el formulario envía el valor pero el usuario no puede editarlo.