{"id":7429,"date":"2019-04-02T08:40:54","date_gmt":"2019-04-02T11:40:54","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7429"},"modified":"2019-04-02T22:14:09","modified_gmt":"2019-04-03T01:14:09","slug":"criando-efeito-no-formulario-com-javascript","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/criando-efeito-no-formulario-com-javascript\/","title":{"rendered":"Criando efeito no formul\u00e1rio com Javascript"},"content":{"rendered":"

Nesse tutorial voc\u00ea vai aprender a criar um efeito no formul\u00e1rio com Javascript, incrementando mais a experi\u00eancia do usu\u00e1rio com seu site e usando separadamente as responsabilidades com HTML, CSS e claro, Javascript.<\/p>\n

Para esse tutorial, na parte de Javascript, iremos utilizar s\u00f3 a linguagem JS, sem adotar algum framework ou biblioteca. Primeiro porque o script ser\u00e1 pequeno e segundo porque sempre \u00e9 interessante desacoplar sua aplica\u00e7\u00e3o de um framework. E de quebra, aprenderemos coisas novas, nesse caso, alguns recursos do ES6 ou ECMAScript 2015<\/a>.<\/p>\n

Vamos seguir a premissa de separar as responsabilidade: HTML para marca\u00e7\u00e3o, CSS para estiliza\u00e7\u00e3o e Javascript para comportamento.<\/p>\n

Veja aqui o exemplo online do efeito no formul\u00e1rio<\/a><\/p>\n

Escrevendo HTML<\/h2>\n

Vamos definir nossa marca\u00e7\u00e3o com HTML.<\/p>\n

<form action=\"\" class=\"form-container\">\r\n     \r\n\r\n<\/form><\/pre>\n
Definimos primeiro o formul\u00e1rio, que apenas ter\u00e1 uma classe. Nesse exemplo, .form-container<\/strong>.<\/p>\n
\u00c9 interessante adicionar classes a elementos aos quais voc\u00ea precise estilizar ou precise fazer altera\u00e7\u00f5es pontuais, mas n\u00e3o quer interferir em outros elementos iguais.<\/p>\n
Prefira classes<\/strong> ao inv\u00e9s de id’s<\/strong>. Isso porque o id<\/strong> precisa ser \u00fanico na p\u00e1gina e existe uma tend\u00eancia de querermos reaproveitar os estilos. Desta forma, n\u00e3o poder\u00edamos adicionar o mesmo id em outro elemento para aproveitar o estilo.<\/p>\n
<form action=\"\" class=\"form-container\">\r\n        <div class=\"fields\">\r\n          \r\n        <\/div>\r\n<\/form><\/pre>\n
Vamos agora adicionar uma div <\/strong>com a classe .fields\u00a0<\/strong>, que servir\u00e1 para agrupar o elemento do formul\u00e1rio.<\/p>\n
\u00c9 comum utilizarmos a tag de par\u00e1grafo para este fim, mas semanticamente n\u00e3o seria o ideal, j\u00e1 que n\u00e3o se trata de um paragrafo. Al\u00e9m disso, a div<\/strong> \u00e9 um elemento “n\u00e3o sem\u00e2ntico” e nesse caso se encaixa perfeitamente.<\/p>\n
    <form action=\"\" class=\"form-container\">\r\n        <div class=\"fields\">\r\n            <input type=\"text\" name=\"name\"  class=\"input\" placeholder=\"Digite seu nome\"\/>\r\n            \r\n        <\/div>\r\n    <\/form><\/pre>\n
Agora adicionamos um campo do formul\u00e1rio input<\/strong> do tipo text<\/strong>. Iremos adicionar uma classe chamada .input .<\/strong><\/p>\n
    <form action=\"\" class=\"form-container\">\r\n        <div class=\"fields\">\r\n            <input type=\"text\" name=\"name\"  class=\"input\" placeholder=\"Digite seu nome\"\/>\r\n            <div class=\"highlight\"><\/div>\r\n        <\/div>\r\n    <\/form><\/pre>\n
Agora adicionaremos uma\u00a0div<\/strong> com uma classe chamada .highlight<\/strong>. Ela ir\u00e1 ser respons\u00e1vel pelo efeito como fosse simular uma barra que vai acompanhando enquanto digitamos.<\/p>\n
Pronto, basicamente esse \u00e9 no nosso HTML.<\/p>\n
Escrevendo CSS<\/h2>\n
Vamos criar um arquivo chamado style.css<\/strong> e adicion\u00e1-lo numa pasta chamada css.<\/strong><\/p>\n
\"Estrutura<\/p>\n
Antes de escrever o CSS, vamos linkar ao nosso arquivo index.html<\/p>\n
<link rel=\"stylesheet\" href=\"css\/style.css\" \/><\/pre>\n
Para utilizar esse arquivo css, adicionaremos a tag link<\/strong>\u00a0e no atributo href<\/strong>, indicando onde est\u00e1 o arquivo. Esse c\u00f3digo ficar\u00e1 dentro do bloco da tag head.<\/strong><\/p>\n
Para um melhor entendimento do nosso c\u00f3digo CSS, deixarei os blocos separados para explicar melhor e depois, no final, mostro todo c\u00f3digo CSS, ok?<\/p>\n
.form-container{\r\n    width:500px;\r\n    margin:0 auto;\r\n}<\/pre>\n