Aprende como hacer un atractivo formulario estilo Material Design con HTML, CSS y Javascript

Share on Pinterest
Comparte con tus amigos










Enviar

Hola que tal, bienvenido al primer taller de FalconMasters! Hoy aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Demo del Formulario:

See the Pen Formulario estilo Material Design by Carlos Arturo Esparza (@falconmasters) on CodePen.5968

Como puedes ver en el demo es un formulario bastante atractivo, sobre todo por los efectos de los inputs al seleccionarlos. También si te habrás dado cuenta este formulario tiene validaciones por lo que si por ejemplo dejamos un espacio en blanco el formulario marcará en rojo aquellos campos que necesitan ser rellenados.

Aunque es un formulario que se ve muy sencillo en realidad hay mucho código detrás que tenemos que trabajar es por eso que este será un taller de 7 Capítulos en total.

El temario del taller es el siguiente:

  1. Escribiendo el Código HTML base de nuestro formulario.
  2. Escribiendo los estilos CSS básicos para el Formulario y los Input
  3. Escribiendo los estilos CSS para los labels, los radio button y los checkbox.
  4. Escribiendo los estilos CSS del botón de Enviar.
  5. Agregando los Eventos de nuestro formulario con Javascript
  6. Validando los Input con Javascript
  7. Validando los Radio Button y Checkbox con Javascript.

Puedes ir viendo video por video o también puedes verlos desde aquí mediante la lista de reproducción.

[Taller] Como hacer un Formulario estilo Material Design:

Recursos Utilizados:

Tutorial como hacer Radio Buttons y Checkboxes personalizados con HTML y CSS: http://www.falconmasters.com/web-design/radio-buttons-checkbox-personalizados/

Curso Básico de Javascript desde 0: https://www.youtube.com/watch?v=xnWtGNiG2lg&list=PLhSj3UTs2_yVC0iaCGf16glrrfXuiSd0G

Curso de SASS: http://www.falconmasters.com/cursos/curso-basico-de-sass/

Google Fonts: https://www.google.com/fonts

 

Código completo via GitHub: https://github.com/falconmasters/formulario-material-design

 

Si te gusto y sirvió el artículo te agradeceríamos si compartieras el artículo en las redes sociales, eso nos ayuda muchísimo a seguir haciendo mas contenido como este.

Super Tutoriales!

También puedes ver nuestros super tutoriales desde nuestro canal de YouTube:

http://www.youtube.com/falconmasters

Y si quieres estar al tanto de nuevos tutoriales, videos y cursos siguenos en:

http://www.twitter.com/FalconMasters

http://www.facebook.com/FalconMasters

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • jhoan

    Maters Falcon te Recomiendo Algo te doy el link de http://www.w3schools.com/ donde puedes encontrar mas recursos de html5 , Php , Sql y muchas gracias por tus grandiosos articulos

  • Ivan Mauricio Gomez

    Esto es MDL o es código propio y/o MDL bien modificado para un mejor entendimiento

  • gaston mongelos

    Buenas Favian soy nuevo por aca pero desde siempre viendo tus videos en youtube.- Te hago un pregunta, a pesar de que quedo bien bonito como el del tuto, no puedo hacer que el boton input me redireccione, osea es como si no funcionase el boton! te dejo una copia del codigo gracias por la ayuda y por los excelentes tutoriales que brindas

    <?php
    if (!function_exists("GetSQLValueString")) {
    function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
    {
    if (PHP_VERSION

    Nombre:

    Correo:

    Contrasena:

    Repetir Contrasena:

    Hombre

    Mujer

    Acepto los Terminos y Condiciones

    • Fernando Ferretiz

      en esta linea en la parte action=”” <– debes poner la direccion de tu archivo php por ejemplo:

  • Matias Almeida

    Me cuesta mucho implementar sass y ya vi los tutos alguien me podría decir si tiene el código en css desde ya muchas gracias! Y muy buen trabajo Falcon !

  • Miguel Angel Frias

    Tengo una duda, me he dado cuenta que en varias ocaciones pones en el css clases pegadas sin un espacio entre una y la otra, por ejemplo cuando colocas la clase error pegada del los input, que diferencia hay entre eso y dejar un espacio entre la clase.

  • Henry Reid

    haz un vídeo para hacer un background de un div con un video, para que se vea mas atractiva una web

  • Max Saavedra

    espero hagas un tutorial de getmdl.io es como bootstrap pero de google todo material design, esta genial pero no se entiende muy bien la documentación :v

  • Cesar Ojeda

    Muchas gracias por el tutorial muy bueno. Una pregunta: Tengo una funcion para editar que trae los datos de una tabla al formulario. El problema es que no encuentro la forma de validar que si el input tiene informacion que se haga en automatico el cambio al “label active”. Alguna forma que se te ocurra. Saludos y gracias de antemano.

    • Puedes hacer un condicional que pregunte si hay datos en ese input entonces cambias la clase, el codigo seria algo asi:

      var elemento = document.getElementById(‘id-de-tu-elemento’);
      var label = document.getElementById(‘id-de-tu-label’);

      if(elemento.value.lenght == 0){label.className = ‘label’} else {label.className = label.className + ‘ active’}

      • Cesar Ojeda

        Muchas gracias por respoder tan rapido, deja lo checo y comento como me fue.

  • Adriant

    Hola! excelente tuto, me ha funcionado 100% gracias! Ah, si pudiera ser un tuto para compartir cosas y que sea más social media estaría interesante!

  • nosber

    Estan geniales tustutos una pregunta ¿como puedo agregarle un campo de texto y que me lo valide para el envio?

  • Gabriel Navarro

    Excelente tutorial como siempre, mas ahora quisiera saber como hacer para que los datos del formulario me lleguen ya sea en un block de nota o correo y cualquier documento. Se que dijiste que quizas lo harias en un proximo tutorial pero bueno si alguien sabe gracias de ante mano.

  • Gabriel Navarro

    Bueno otra pregunta, el formulario yo lo llego y si le doy a refrescar (refresh/f5) las letras se sobreponen al titulo. Será q algo hice mal? verifique todo y esta bien…

  • David

    No me gustan los vídeos tutoriales, debería ser en escrito es mas viable que estar pausando para seguirte paso a paso y eso que aveces mas rápido ¬¬

  • Edgardo

    @falconmasters:disqus Buen tutorial, pero tengo una duda. He colocado un pero no logro que tenga el efecto sobre el label: Cuando haces clic, el label se hace mas pequeño. podrias darme alguna luces en el JS. Gracias!

  • Brandon Robles

    Si quiero agregar un “date” como le hago?

  • RaulPaez

    tengo un problema DX
    cuando trato de ingresar algo en los campos de texto el label no se muebe hacia arriba DX
    alguien tiene idea porque?

    • Petra Marquez

      Revisaste tu codigo de Js?

    • vmklucas

      Agregaste la class=”label” a todos los label???

  • Jose Bonilla

    Como se llama el editor de codigo que utilizas? Saludos y gracias por tu apoyo

    • Petra Marquez

      El usa Sublime Text

  • Petra Marquez

    Hola, como estas Carlos Arturo?, quiero saber como yo puedo arreglar mi menu. cuando yo le doy click a inicio y luego le doy click a sobre mi (esto es un ejemplo) entonces, doy click a inicio denuevo no se devuelve.. :/ no se porque lo hace, tengo el codigo bien en todas las paginas.

    Aca te muestro la foto del codigo

    • Pienso que el problema que podrías tener es que en la pagina de “sobre mi” en el menu no tienes bien los enlaces href. Puedes revisar que los enlaces en cada pagina esten correctos.

      Y si quieres evitarte el problema de tener que repetir codigo en todas las paginas te recomiendo que utilices una plantilla sencilla que puedes hacer en PHP. Aquí te dejo un tutorial.

      http://www.falconmasters.com/web-design/como-hacer-plantilla-php/

      • Petra Marquez

        Ahora es que me fijo, con razon!. Muchas Gracias!

      • Petra Marquez

        Algo que te queria preguntar, tambien y es que mi pagina carga muy lento, no se si es mi pc o mi pagina o una imagen que pesa mucho o los videos que le puse, pero, me carga muy lento y cuando la actualizo la tengo que actualizar muchas veces para poderla ver sino no se pone. No se que hacer.. :/

  • Daniel Said

    Hola mi nombre es daniel y tenia una duda carlos como hago para que cuando este en un index y le de al boton de registro me lanze el formulario pero encima del index, como emergente

  • vmklucas

    Tengo un problema…

    Mi menu desplegable, al salir, se mescla con todo el formulario…

    Alguien podria ayudarme??

    • william

      asegúrate de que tu menú desplegable no tenga la propiedad opacity , sino lo tiene puedes probar poniéndole un z-index a tu menú desplegable ponle un numero superior que al de tu formulario, Si no se arregla seria cosa de ver tu codigo

  • Oscarinak

    Hola buenas noches, tengo un problema con mi formulario Design no me funciona , yo obvie la parte de trabajar con sass y solo incluí el css y el archivo js, no encuentro el error! mi formulario se ve de esta manera, no me funciona ni los input, ni el label, ni el radio y los checkbox como muestra el vídeo.Espero y me ayudes a solucionar este problema.

    • Bryan Jeshua

      Mi amor debes enlazar el script .js en el Documento Html antes de cerrar el body. De esa manera se soluciona. Debes enlazarlo de esta manera…

      Saludos.-

      • Oscarinak

        ok muchas gracias :D

        • Rosario

          hola te funciono @oscarinak:disqus ? @bryanjeshua:disqus a mi todavia no me funciona podra ser algún otro detalle?

    • Joulis

      Buenas no sé si ya lo sabes, pero para que sea más limpio el código es
      hacer una llamada a javascript en otra página externa y llamarla con
      pero poniendolo en

      Un saludo.

  • KEVIN SAMUEL MEJIA SILVA

    Hola como hago para agregar un
    ¿Es qué quiero agregar un campo de texto de mensaje pero necesariamente necesito textarea, pero lo agrego a todo el codigo y me da forma y todo menos la animación en js, ¿Una solucion porfa?

  • Joel Fernández Román

    Blog de informatica, donde encontrareis de todo sobre pc’s, android, hacking, programación y curiosidades sobre los principales sistemas operativos. http://www.thepmchip.com/

  • Eduardo Abad Tinoco

    Buen Día.
    Mi formulario está Perfecto solo un problema.

    *En android
    tiene la opción de autocompletar, aunque en el codigo le indique autocomplete=”off” autocorrect=”off” autocapitalize=”off”

    el problema es que cuando se autocompleta no cambia a la clase “label active” almenos que de click sobre esta.

    ademas de focus y blur, tendre que agregar otra funcion para solucionarlo?

  • JHON Azocar

    hola buenas tardes, tengo un problema cuando conecto el formulario a php ya que yo sabia que solo con el dirigiéndolo en el action me tenia que guardar el registro lo hago pero el formulario no tiene ninguna acción solo lo hace si en el nombre le agrego al final formulario_registro .php me podrías decir porque y si lo hago de esta manera ya no reconoce los js ya no hace validaciones ni los efectos de las letras gracias espero tu ayuda me urge para mi proyecto

    • Belen Anaid Rodriguez Custodio

      Hola @jhonazocar:disqus de casualidad pudiste resolver tu problema?

  • JHON Azocar

    te mando le código gracias Carlos:

    Formularios

    Nombre:

    Correo:

    Contraseña:

    Repetir Contraseña:

    Hombre

    Mujer

    Acepto los Terminos y Condiciones

  • Drago Dan

    Alguien sabe por qué me sale este error Uncaught TypeError: Cannot read property ‘elements’ of undefined
    Ese es mi codigo
    var formulario = document.form_enviarcorreo,
    elementos = formulario.elements;

    • Manu E.

      Tu codigo deveria ser asi con el tabbing antes dele prox. variable
      var formulario = document.form_enviarcorreo,
      elementos = formulario.elements;
      o así
      var formulario = document.form_enviarcorreo,
      var elementos = formulario.elements;

  • CaramelaChan

    Hola Carlos, espero que me puedas responder :(
    Quiero hacer un campo de “Fecha de Nacimiento” que incluya un calendario con javascript, pero me choca con los estilos del formulario. ¿Qué puedo hacer?
    Gracias de antemano

  • Ramses Garcia

    Muy bueno el formulario y el tutorial.
    He logrado implementarlo con mis estilos para el uso que le quiero dar, el problema es que en mi formulario tengo menus de listas de selecion, lo que no he logrado hacer es que la label se ponga en la clase active cuando el usuario haya seleccionado una opción del menú. Si alguien puede ayudarme se lo agradecería.

  • Bhavin Patel

    Hello Sir, I do not know Portugese.
    But i want to ask you: How do you write code in sublime text.
    Like if i want to write . I will write whole code manually. But i see you write this like “html:5” and whole code printed. Please, reply.

    Please reply on “bhavinp311@gmail.com”

  • IS_Martha

    Mi estimado amigo Falcon, podría aplicar exactamente el mismo codigo JS para validaciones y despues enviar las variables mediante ajax? O crees que me genere algun tipo de error?

  • YukiAzum1

    Hola, lo intento conectar con la base de datos que yo tengo, todo está bien, pero cuando le doy al boton no hace la action.
    he probado la action en muchos formularios y en este no me funciona.

    • Belen Anaid Rodriguez Custodio

      Hola @yukiazum1:disqus de casualidad pudiste solucionar tu problema? porque me pasa lo mismo :(

  • Hugo Martínez

    Hola Carlos. estoy buscando el código CSS pero no lo encuentro en la descripción del vídeo.

  • Andrea Cornejo

    hay alguna manera para que los datos de este formulario vayan a una hoja de calculos de google?

  • Mario Roberto

    Hola Carlos.

    Por favor podrías hacer un tutorial de como hacer el social bar con el numero de likes o re twits, justo como lo tienes en este sitio. Mil gracias, saludos cordiales.

  • Cørax xk

    https://uploads.disquscdn.com/images/5b140bd86bdd9d83bd9c166e9035860bda2eadcb4d95edf82278816fc019f647.jpg
    Hola tengo este problema. He estado siguiendo paso a paso y no encuentro el error de este problema. Después de haber buscado me desesperé y copie el código que tienes colgado y me sigue saliendo el mismo error.
    No me funciona el hover de Nombre, Correo, Contraseña, Repetir Contraseña, Mujer y Hombre, Aceptar Condiciones
    Ni el color de error.
    Por lo demás Bien :(
    Ayuda!

  • Hola Falcon , gracias por tus aportes, estoy revendiendo hosting y dominio y no se como agregar este formulario que propones, te dejo mi pagina web:
    http://alojamientositioweb.com/

  • Christo Barrera

    Oye FalconMasters si nosotros no lo hacemos con codigo sass y solo lo enlazamos con el archivo estilos.css que dejaste para descargar, igual funciona? porque lo hice así y lo enlacé y lo de terminos y condiciones no me aparece, solo sale el cuadrado y ya

  • Aron Navarro De la Rosa

    Hola, oye donde esta el codigo en CSS normal?

    • Ohtli García

      dale a la pestaña de sass y abajo hay un boton que dice “view Compiled”, le das click y te aparece como css normal

      • Aron Navarro De la Rosa

        Gracias!

  • Ichigo Hollow

    Buenas amigos, mi problema es que en los capos si coloco solamente números ceros ” 0″ se me monta el label en el text, en la imagen esta como ocurre. Por favor espero que me puedan ayudar gracias. https://uploads.disquscdn.com/images/2195e011380f0b990dfbd51b8b69a5636a54336e4e3c656e475d5cd72c3586a7.jpg

  • pepe gomez verdugo

    @oscarinak:disqus, me pasa exactamente lo mismo y no encuentro una solución. Por favor FalconMasters contesta plssss :(


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso