Formularios

Casi todos los proyectos para clientes tienen al menos un formulario: contacto, acceso, registro o cotización. Aquí tienes tres listos para usar, con validación accesible y buen aspecto en móvil.

Sobre el envío

Las demos no envían datos a ningún servidor (usan preventDefault()). Para hacerlo real, conecta el formulario a tu backend, a un servicio como Formspree o a un fetch() hacia tu API.

Login y registro con pestañas

Cuándo usarlo: páginas de acceso de aplicaciones, tiendas o áreas de clientes donde el usuario puede entrar o crear cuenta desde el mismo lugar.

Login y registro

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --acento y --acento-2 controlan el color principal y el degradado de fondo.
• Las pestañas siguen el patrón ARIA (role="tablist", role="tab", aria-selected, aria-controls) y se pueden cambiar con las flechas del teclado.
• El botón del ojo cambia el type del input entre password y text y actualiza su aria-label.
• Los atributos autocomplete (email, current-password, new-password) permiten que el navegador y los gestores de contraseñas rellenen los campos.

Buena práctica

Nunca bloquees pegar texto en el campo de contraseña. Los gestores de contraseñas lo necesitan y hacen tu sitio más seguro.

Formulario de contacto con validación

Cuándo usarlo: la página de contacto de cualquier negocio o portafolio, formularios de cotización y solicitudes.

Contacto con validación

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --acento, --error y --ok definen los colores de foco, error y campo correcto.
• Las reglas son atributos HTML nativos: required, type="email", minlength, maxlength. Añade más (por ejemplo pattern="[0-9]{10}" para teléfono) y agrega su mensaje en la función mensajeDe().
• Cada campo tiene un <p class="error"> enlazado con aria-describedby; el JS pone aria-invalid="true" y el texto del error, así los lectores de pantalla lo anuncian.
• Se valida al salir de cada campo (blur) y, si ya había error, mientras se escribe: así no regañas al usuario antes de tiempo.

Error común

Confiar solo en la validación del navegador. Siempre valida también en el servidor: cualquiera puede saltarse el JavaScript.

Inputs con label flotante

Cuándo usarlo: formularios cortos donde quieres un look moderno y compacto (checkout, suscripción, contacto) sin perder la etiqueta visible.

Label flotante

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Funciona solo con CSS: el truco es placeholder=" " (un espacio) y el selector :not(:placeholder-shown), que detecta si el campo tiene texto.
• El <label> debe ir justo después del input para que funcione el selector input + label.
• --acento colorea el borde y el label al enfocar; --radio el redondeo.
• Incluye dos estilos: con contorno (.flotante) y subrayado tipo Material (.linea). Usa uno solo por formulario para mantener la coherencia.

Resumen

• Usa validación nativa (required, type, minlength) y personaliza los mensajes con la API validity.
• Enlaza los errores con aria-describedby y marca los campos con aria-invalid.
• autocomplete correcto = formularios más rápidos de llenar.
• Label flotante: placeholder=" " + :placeholder-shown, sin JavaScript.