Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite
Webdesign

Aprendiendo Material Design Lite: Campos de Texto

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Buttons
Learning Material Design Lite: Cards

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Siguiéndo con nuestras series sobre los pormenores de Material Design Lite (MDL), vamos a introducirnos en el componente de los Campos de Texto, Text Fields. Un campo de texto se puede usar de múltiples formas, en un campo de búsqueda, en un campo de comentario o en un formulario de contacto, y normalmente lo vemos junto a un elemento botón.

De hecho, el componente de campo de texto en MDL es similar al componente del botón; es una mejora de un elemento html para hacerlo funcionar con la estética y especificaciones del conjunto que forma Material Design. Una vez más, antes de proseguir, necesitarás incluir las librerías MDL—las hojas de estilo y el JavaScript—en el head de tu documento.

Comencemos con algo sencillo.

Campo de Texto Básico

Para implementar el componente del campo de texto, empezamos con un div vacío al que asignamos las clases mdl-textfield y mdl-js-textfield, dentro de un elemento form. Si has seguido nuestros anteriores artículos en esta serie, te resultará ya familiar el patrón MDL para la nomenclatura de las clases. En este caso, la clase mdl-textfield aplica el aspecto visual del CSS, mientras que mdl-js-textfieldle adjudica un comportamiento dinámico a través de JavaScript.

Dentro de div, añadimos un elemento input (o quiza un textarea) y un label (lo cual es obligatorio) junto a las clases relevantes necesarias para aplicar los estilos.

Esto es todo lo necesario; acabamos de construir un campo de introducción de texto con un componente MLD.

Problemas frecuentes

Observa que la clase mdl-textfield__input asignada al elemento input solo funcionará correctamente cuando sea aplicada a un campo de texto del tipo text, password, email, tel, url y search. Aplicar la clase a un elemento input del tipo color, date, o file podría ocasionar un resultado inadecuado.

Adicionalmente, la etiqueta del campo (text label) igualmente se mostraría extraña si le añadimos un marcador de posición (placeholder text):

El campo de texto con marcador de posición (placeholder).

Etiqueta Flotante

Podemos mejorar el campo de introducción de texto con una etiqueta flotante (Floating Label). Cuando el usuario se sitúe sobre el campo, la etiqueta del mismo se elevará saliendo del camino del cursor. La etiqueta flotante es un patrón común en el diseño de formularios, particularmente en los móviles en los cuales la escasez de espacio limitado es un asunto problemático.

MDL ha conseguido que la aplicación de estos patrones de diseño sea algo sencillo. Volviendo al código HTML anterior, necesitamos agregar la clase mdl-textfield--floating-label al contenedor div.

¡Bingo! Nuestro campo de introducción de texto debería estar visualmente más acomodado a la etiqueta flotante.

Campo de Texto Expandible

El Campo de Texto Expandible es otro patrón de diseño común que podemos implementar con MDL. Primero vemos el campo a modo de icono. En el momento en que hacemos clic, se expande a modo de campo de texto. Normalmente encontramos este patrón en campos de búsqueda.

Para hacer nuestro anterior campo expandible, necesitamos añadir la clase mdl-textfield--expandable al contenedor div. También encerraremos el elemento input y su etiqueta (label) en un nuevo div con la clase mdl-textfield__expandable-holder asignada. Siguiendo este sistema, cambiamos también el tipo de input, la etiqueta del texto, así como los atributos relativos para especificar "buscar".

Después, creamos un botón fuera de mdl-textfield__expandable-holder, empleando un elemento label que apunte al campo.

Validación de Campos

La seguridad y el saneamiento de los datos es crucial en el caso particular de los formularios. No deseamos que los usuarios nos envíen solicitudes con datos incorrectos e incluso maliciosos. Por lo tanto debemos evaluar que los datos introducidos por el usuario en cada campo se ajustan a su tipo de input. Si el input es del tipo email, la entrada se debe ajustar al formato del email—debería contener una @ y terminar con un TLD (top level domain).

Afortunadamente, MDL nos ayuda. No son necesarios código o clases extra. Asigna un tipo adecuado al input, y cambiará el subrayado a rojo si el texto introducido no se ajusta al tipo.

Un error

Pero también podemos establecer nuestro propio estándar de formato, e incluso proporcionar un elemento visual que indique el error. Por ejemplo:

Mensaje de error MDL

Para mostrar una notificación de error, primero necesitamos establecer límites a través del atributo HTML pattern a lo que los usuarios pueden introducir en el elemento input. El patrón del atributo emplea una Expresión Regular (Regex) que evaluará y validará lo que introduzca el usuario.

En este caso, quiero que el campo username sea alfabético, sin espacios. Por tanto, especificaremos el atributo pattern con el Regex siguiente: [A-Z,a-z]*.

Nota: puedes encontrar patrones Regex comunes en HTML5Patern, por ejemplo para validar el email, la contraseña, números de teléfono, códigos postales y fechas.

Continuamos añadiendo el mensaje de error bajo la etiqueta por medio de un elemento span con mdl-textfield__error. Podrías necesitar además aplicar reglas de estilo para ajustar la posición y alineación del contenido.

¡Ya lo tenemos! Ahora, el campo debería devolver un mensaje de error debajo, y resaltarlo en rojo, si el usuario introduce números, caracteres especiales, o espacios. Pruébalo:

Conclusión

Como acabamos de descubrir, los componentes para campos de texto MDL nos facilitan la implementación de los mismos con patrones de diseño sencillos como las etiquetas flotantes y los campos expandibles. También hemos descubierto que es sencillo añadir un mensaje de error en el caso de que el formato para el campo sea incorrecto.

El próximo tutorial será una excitante capítulo de esta serie. Veremos un elemento con éxito creciente en los elementos UI, la Card. ¡Síguenos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
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.