Uno de los aspectos más fundamentales en cualquier aplicación son los formularios, ya que estos nos permiten capturar la información del usuario con respecto al modelo de negocio que maneje nuestra aplicación.
Material Design al combinar las mejores prácticas de diseño clásico y de implementación de efectos originales e innovadores, nos permiten crear formularios que no solo se ven bien sino que le dan a nuestra aplicación un agregado en funcionalidad.
Veamos entonces como crear un formulario básico utilizando los principios de Material Design.
El contenedor de Materialize
El contenedor de Materialize funciona de la misma forma que lo hace Bootstrap, por si ya hemos tocado este framework no tendremos problema alguno en entender su funcionamiento, pero para quienes no lo conocen se trata principalmente de un contenedor de 12 columnas, en el cuál podremos indicarle a nuestros elementos cuantas columnas puede el mismo abarcar.
El mismo tiene una jerarquía bastante similar, posee una clase contenedor, seguido de una clase fila y por último las clases aplicables a las columnas, veamos cómo sería una estructura de una fila completa, seguido de una fila que contendría dos elementos.
<div class="container">
<div class="row">
<div class="col s12">Esto es un div de 12-columnas</div>
<div class="col s6">Esto es un div de 6-columnas</div>
<div class="col s6">Esto es un div de 6-columnas</div>
</div>
</div>Cómo vemos es bastante sencillo, sólo debemos tener claros que tenemos doce columnas para trabajar y de esta forma mantener nuestro contenido organizado y visualmente mejor presentado. Ya viendo cómo funciona el contenedor pasemos a la construcción de nuestro formulario básico.
Creación del formulario
Vamos a crear un HTML con nuestra estructura por defecto y lo primero que haremos será incluir las librerías tanto de CSS como de JavaScript de Materialize y de esta forma aplicarle a nuestro formulario la funcionalidad que deseamos.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>Es importante que incluyamos jQuery en su última versión para el correcto funcionamiento del framework, además que debemos incluir una línea especial que nos permitirá utilizar los iconos del mismo.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Una vez que tengamos las librerías incluidas queda la construcción de nuestro formulario, la mayoría de los elementos tendrán una estructura parecida a la siguiente, donde tendremos la clase row, seguido de la clase col y la cantidad de columnas que ocupará el elemento.
<div class="row">
<div class="input-field col s6">
<input placeholder="Aqui va el nombre" id="nombre" type="text" class="validate">
<label for="nombre">Nombre</label>
</div>
<div class="input-field col s6">
<input id="apellido" type="text" class="validate">
<label for="apellido">Apellido</label>
</div>
</div>
Materialize nos permite adicionalmente validar campos, en el caso del email al indicarle el tipo podemos asignarle mensajes en el caso que la información sea válida o no, veamos:<input id="email" type="email" class="validate"> <label for="email" data-error="email incorrecto" data-success="email valido">Email</label>Podemos además incluir los famosos íconos, característica tomada del diseño plano y que le da a nuestra aplicación un nivel de usabilidad mayor. Para ello utilizaremos la etiqueta <i> con la clase específica:
<i class="material-icons prefix">email</i>Por ultimo ningún formulario básico está completo sin los famosos textarea, cajas de texto que nos permiten recoger mucha más información, como la dirección de un usuario o descripciones de algún contenido.
<textarea id="textarea" class="materialize-textarea"></textarea> <label for="textarea">Text Area</label>Una vez con nuestro formulario terminado solo nos queda probar su funcionamiento, cómo Materialize incorpora bastantes efectos a nuestro formulario y lo hace sumamente visual veamos como luce el mismo en el siguiente GIF animado.
Como vemos la construcción de un formulario básico usando el lenguaje de diseño Material Design y apoyándonos de un framework como Materialize puede ser una tarea que podemos realizar en minutos y obteniendo un resultado de calidad que no solo aporta una mejor visual sino características que solo las mejores aplicaciones poseen.
Lo mejor es que lo descargues y lo pruebes, seguro que te gusta.
formulario-material-design.html 2,75K
715 Descargas
