Cargando

Ir a contenido


 


Creación de formularios con Material Design

Te enseñamos cómo puedes construir un formulario básico utilizando el lenguaje de diseño Material Design.


Escrito por el ago 25 2015 17:42


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.

 

Requisitos
Antes de empezar con este tutorial, recomendamos dar un paseo por la introducción de Material Design aquí. Nos apoyaremos del framework llamado Materialize y es importante que entendamos cómo funciona el contenedor de nuestra aplicación.

 

 

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.

 

Fichero Adjunto  formulario-material-design.html   2,75K   290 Descargas

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 25 2015 17:42
  •   Actualizado ago 22 2016 16:54
  •   Visitas 5.2K
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse