Formularios: Interacción y Validación

El formulario es el componente más crítico para la conversión. En CSS moderno, podemos manejar estados de validación y accesibilidad sin una sola línea de JS.

¿Cuándo usarlo?

Para captación de leads, autenticación o configuración. Un buen formulario debe ser escaneable, con etiquetas claras y feedback inmediato.

Ejemplo Visual: Formulario "Clean & Pro"

No compartiremos tu email.

Código Listo para Copiar

/* Estilos de validación pura CSS */
input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
}

/* Para Checkboxes y Radios modernos */
input[type="checkbox"] {
    accent-color: #38bdf8;
}

Errores Comunes

Error: Sustituir label por placeholder.

Es un error de UX y Accesibilidad grave. El placeholder desaparece al escribir; el usuario pierde el contexto de lo que está rellenando.

Tip Senior: Usa appearance: none si quieres rediseñar selectores nativos desde cero manteniendo la funcionalidad del sistema operativo.

🎯 Mini Ejercicio Práctico

Intenta implementar un "Checkbox" personalizado usando el selector :checked y el pseudo-elemento ::after.