Advertisement
  1. Web Design
  2. Material Design

Cómo recrear la etiqueta flotante de Material Design

by
Read Time:5 minsLanguages:

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):

Bootstrap floating labelsBootstrap floating labelsBootstrap floating labels
Bootstrap etiquetas flotantes
Material Design floating label optionsMaterial Design floating label optionsMaterial Design floating label options
Opciones de etiquetas flotantes de Material Design

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.

En realidad, no usaremos la biblioteca de Material Design para el marcado o el estilo, sino que recrearemos la apariencia y el comportamiento nosotros mismos.

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:

Accessibility panel in Dev tools showing the textbox "First Name"Accessibility panel in Dev tools showing the textbox "First Name"Accessibility panel in Dev tools showing the textbox "First Name"

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.

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.

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.

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.

invalid email inputinvalid email inputinvalid email input
Ay

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.

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.

¡Con esto hemos implementado el diseño de etiqueta flotante!

Aquí está el CSS completo para recrear el aspecto del formulario de Material Design.

¡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 +:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.