Campos de formulario

El truco honesto de la etiqueta flotante

La etiqueta que flota al escribir no necesita JavaScript: se apoya en :placeholder-shown, un selector que detecta si el placeholder está visible. Si no se muestra, es que hay texto; si hay texto (o foco), la etiqueta sube. El único requisito, y por eso el HTML trae placeholder=" " con un espacio: sin placeholder el selector no tiene nada que evaluar.

Cómo usar estos campos

1. Copia CSS y HTML juntos: en formularios, el orden de los elementos es funcionalidad (la etiqueta flotante depende de que el span siga al input).
2. Conserva los atributos: type correcto, maxlength, aria-label donde no hay etiqueta visible. Son los que activan el teclado móvil adecuado y el autorrelleno.
3. Para el contador y el deslizador, añade el JS incluido — pocas líneas, sin dependencias.

Estados de error sin drama

Estos campos marcan el foco con borde violeta y halo suave. Para el estado de error, la misma técnica con otro color: borde coral, halo coral tenue y un mensaje corto debajo del campo — nunca solo un borde rojo, porque el color solo no comunica a todo el mundo. Valida al salir del campo, no a cada tecla: corregir mientras te gritan es la experiencia que todos odiamos.

Dónde encajan

• Contacto y registro: etiqueta flotante para nombre y correo, textarea con contador para el mensaje.
• Buscadores internos: el campo con lupa y atajo de teclado visible.
• Elección de plan o formato: radios como tarjetas, que se pulsan mejor y se comparan mejor.
• Ajustes: el deslizador para valores continuos como volumen o tamaño.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, botones y controles, tarjetas, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿La etiqueta flotante funciona sin JavaScript?

Sí, todo el efecto es CSS con :placeholder-shown y :focus. El único requisito es dejar placeholder=" " (con espacio) en el input, porque el selector necesita un placeholder que mostrar u ocultar.

¿Por qué el checkbox oculta el input en vez de usar appearance: none?

Son dos caminos válidos. Ocultar el input y dibujar una caja al lado da control total del dibujo (incluido el tick SVG animable) y funciona igual en todos los navegadores, que con appearance todavía guardan diferencias de detalle.

¿Cómo activo el teclado numérico o de correo en el móvil?

Con el type correcto: email, tel, url, number o search. Es un atributo, no un estilo, y por eso estas recetas lo conservan — al copiar, no lo cambies a text.

¿El deslizador funciona igual en Chrome y Firefox?

El aspecto sí, porque la receta define el pulgar con los dos pseudoelementos (::-webkit-slider-thumb y ::-moz-range-thumb). El relleno de la pista lo sincroniza el JS incluido escribiendo una variable CSS.

¿Cómo marco un campo como obligatorio?

Con el atributo required y un asterisco o la palabra «obligatorio» en la etiqueta visible. El navegador bloqueará el envío y enfocará el campo; si personalizas el mensaje, hazlo con setCustomValidity y déjalo debajo del campo.

¿Estos campos rompen el autorrelleno del navegador?

No: al ser inputs nativos con sus type y name normales, el navegador los reconoce. Es otra razón para no fabricar campos con divs — el autorrelleno de contraseñas y direcciones no funciona sobre imitaciones.