HTML + CSSInputs
Input con validación en vivo
Se pone verde con un check si el correo es válido, o rojo, con una sacudida y un aviso, si no.
Ajustes
16px
1x
Código
<label class="uv-in2v"><input placeholder="tu@correo.com"><span class="ic"><svg class="ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><svg class="no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><em class="hp">Introduce un correo válido</em></label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Dónde usarlo
Pillar una errata en el correo antes de enviar el formulario ahorra disgustos a todos. Colócalo en la newsletter del pie de página, en el registro de una app o en la compra como invitado de una tienda. Comprueba al salir del campo o al pulsar Enter, no mientras escribes. Validación de email en HTML, CSS y JavaScript.
Solo revisa el formato, no si la dirección existe, así que valida también en el servidor. Reescribe el aviso con tus palabras; «Parece que falta algo» suena más amable que un error seco.