Cómo recrear la etiqueta flotante de Material Design
Spanish (Español) translation by Valentino (you can also view the original English article)
Cuando se trata de crear formularios en páginas web, la accesibilidad y el diseño deben ir de la mano. Idealmente, cada campo de entrada deberías tener una etiqueta asociada y un marcador de posición, si es necesario. Sin embargo, desde una perspectiva de diseño, esto puede hacer que un formulario parezca bastante pesado en texto.
Las etiquetas como marcadores de posición, a veces conocidas como etiquetas flotantes, son una opción de diseño popular para crear formas minimalistas y accesibles. Este método también se usa comúnmente en sistemas de diseño populares como Bootstrap y Material Design (que se muestran a continuación):






En este tutorial, recrearemos la etiqueta flotante utilizada en los campos de texto de Material Design utilizando CSS y JavaScript vanilla.
Etiqueta flotante de diseño de materiales
Así es como se ve el resultado final:
Comienca con el formato HTML Markup
Primero, creamos el marcado para nuestro formulario de Material Design que incluye una etiqueta y un campo de entrada de texto.
<div class="input-container"> <input type="text" id="name" required/> <label for="name">First Name</label> </div> </form>
Es importante asociar etiquetas a tus campos de entrada relacionados mediante el atributo for
y el id
de la entrada. Los lectores de pantalla lo utilizan para comunicar los detalles del formulario.
Usando el panel de accesibilidad de DevTools, podemos ver cómo las etiquetas y las entradas están vinculadas en el marcado del formulario anterior:



Formulario de diseño de materiales CSS
El estilo más importante para una etiqueta flotante es hacer que la etiqueta esté absolutamente posicionada dentro de un elemento padre relativo. Queremos poder mover nuestra etiqueta alrededor del contenedor de entrada sin interrumpir el flujo de elementos.
.input-container { position: relative; height: 56px; } label { display: block; position: absolute; top: 50%; transform: translateY(-50%); }
Etiqueta flotante en foco
También queremos hacer flotar la etiqueta cada vez que el usuario hace clic en la entrada. Podemos hacer esto usando el selector: focus
y + (más)
. Cuando la entrada está enfocada, cambiamos la posición, el tamaño y el color de la etiqueta.
input:focus + label { transform: translateY(-100%) scale(0.75); color: #6200ee; }
Nota: Esto funciona porque la etiqueta es el siguiente elemento inmediatamente después del campo de entrada. El selector más apunta al siguiente elemento inmediato, por lo que no funcionará si la etiqueta se coloca antes de la entrada o si se coloca otro elemento entre los dos.
Etiqueta flotante con entrada de usuario
Otra característica de la etiqueta flotante es que permanece flotante si la entrada tiene un valor, incluso si el usuario ya no se centra en la entrada.
Podemos lograr esto usando CSS: selector válido
y el atributo requerido
en el marcado HTML
Usamos el selector válido para las entradas requeridas para detectar si la entrada tiene un valor.
input:focus + label, input:valid + label { transform: translateY(-100%) scale(0.75); }
Con esto, la etiqueta permanece flotante cuando la entrada está enfocada o tiene un valor.
Desafortunadamente, existen algunos inconvenientes al usar el selector válido. Por ejemplo, si se utiliza el selector válido en una entrada de correo electrónico, la entrada se considera no válida si el valor no está en formato de correo electrónico.



Podemos resolver esto con un poco de JavaScript.
Agregar oyente de eventos de JavaScript
Usamos JavaScript para detectar si la entrada tiene un valor cada vez que el usuario navega fuera de ella.
const inputs = document.querySelectorAll("input"); inputs.forEach((input) => { input.addEventListener("blur", (event) => { if (event.target.value) { input.classList.add("is-valid"); } else { input.classList.remove("is-valid"); } }); });
Siempre que la entrada pierde el foco, verificamos si contiene un valor. Si es así, agregamos la clase es válida
, si no, eliminamos la clase válida. Podemos actualizar nuestro estilo CSS para hacer flotar la etiqueta con la clase es válida
.
input:focus + label, input.is-valid + label { transform: translateY(-100%) scale(0.75); }
¡Con esto hemos implementado el diseño de etiqueta flotante!
Aquí está el CSS completo para recrear el aspecto del formulario de Material Design.
.form-container { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background-color: #fafafa; } form { padding: 3rem; display: flex; flex-direction: column; gap: 2rem; width: 95%; max-width: 300px; background-color: white; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0.5rem; box-shadow: 0 0 8px 0 rgb(0 0 0 / 8%), 0 0 15px 0 rgb(0 0 0 / 2%), 0 0 20px 4px rgb(0 0 0 / 6%); } .input-container { background-color: #f5f5f5; position: relative; border-radius: 4px 4px 0 0; height: 56px; transition: background-color 500ms; } .input-container:hover { background-color: #ececec; } .input-container:focus-within { background-color: #dcdcdc; } label { display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 16px; color: rgba(0, 0, 0, 0.5); transform-origin: left top; user-select: none; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms; } input { width: 100%; height: 100%; box-sizing: border-box; background: transparent; caret-color: #6200ee; border: 1px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.42); color: rgba(0, 0, 0, 0.87); transition: border 500ms; padding: 20px 16px 6px; font-size: 1rem; } input:focus { outline: none; border-bottom-width: 2px; border-bottom-color: #6200ee; } input:focus + label { color: #6200ee; } input:focus + label, input.is-valid + label { transform: translateY(-100%) scale(0.75); }
¡Tus etiquetas flotantes de material design están completas!
Como ocurre con la mayoría de los patrones de diseño, las etiquetas flotantes han provocado una buena cantidad de debates. Siempre que haz que tus formularios sean accesibles y fáciles de usar, puedes utilizar cualquier patrón de diseño que desees. Con suerte, este tutorial te servirá como una guía útil si decides utilizar etiquetas flotantes.
Más tutoriales de diseño de formularios
Obtén más información sobre patrones de diseño de formularios, etiquetas flotantes, formularios de Material Design y accesibilidad de formularios aquí en Tuts +:
- CSSMejores estilos de enfoque con CSS Pseudo-Class: focus-visibleAdi Purdila
- ValidaciónValidación de formularios HTML5 con el atributo "patrón"Thoriq Firdaus
- Diseño de formulariosConsejo rápido: agrega un formulario Formspree a tus sitios estáticosDavid Darnes
- FormulariosCómo personalizar el formulario de contacto 7 para WordPress: etiquetas flotantesGeorge Martsoukos
- AccesibilidadCómo hacer casillas de verificación y botones de opción accesibles personalizadosSami Keijonen
- Diseño de materiales LiteAprendizaje Diseño de materiales Lite: campos de textoThoriq Firdaus