Criando Form de contato com HTML5, CSS3 e JavaScript

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (27)  (1)

Neste artigo criaremos um formulário utilizando HTML5, CSS3 e JavaScript, sem utilizar nenhuma linguagem que seja processada no lado do servidor.

O projeto consiste em criar um formulário utilizando a linguagem de marcação HTML5 para a definição dos elementos, junto com o CSS3 para estilizar a página e com o Javascript que é uma linguagem de programação utilizada para validação no lado do cliente. Não será utilizada nenhuma linguagem que seja processada no lado do servidor, no entanto ao terminar este formulário seria interessante que pudessem realizar algumas melhorias, como conexão com o banco de dados, validações mais complexas e etc...

O formulário será bem simples, pois o foco do projeto não é em desenvolver um form com o nível de segurança e confiabilidade alto,ao invés disso será abordado como criar o layout utilizando os recursos do HTML5 e CSS3.

Não é preciso conhecimentos avançados nessas tecnologias e nem mesmo das suas versões anteriores(HTML4,CSS2), pois alem do projeto ser de baixa complexidade, o mesmo será descrito passo a passo.

O projeto será composto por um formulário com apenas quatro campos, a definição se encontra na tabela a seguir:

Campo Descrição TAG’S
Nome Campo que representa o nome da pessoa que está submetendo o formulário. <input type=”text”></input>
Fone Campo que descreve o número do telefone da pessoa que está submetendo o formulário <input type=”text”></input>
Email Campo que descreve o e-mail da pessoa que está submetendo o formulário <input type=”email”></input>
Observação Campo que descreve a observação apresentada pela pessoa que está submetendo o formulário <textarea></textarea>
Botão(Enviar) Envia os dados do formulário <input type=”Button”></input>

Tabela 1:Estrutura dos elementos do formulário

A tabela acima nos da uma visão macro do que o projeto vai contemplar, é claro que cada campo possuirá uma série de atributos como: name,placeholder,id e etc...

HTML5 (HyperText Markup Language 5)

O HTML5 neste projeto sera apresentado apenas como o validador dos campos, para verificar se nenhuma informação desnecessária está sendo enviada ao servidor, é claro que existem vários meios de se implementar validações, o artigo apenas ira mostrar como fazer algumas delas utilizando as novas características do HTML5.

A página HTML a ser apresentada contém a maioria dos elementos das versões anteriores, mas isto não impede que se utilize as novas tag’s, afinal de contas a grande diferença estará no momento em que for utilizar o CSS, que é o responsável por deixar a aparência do seu sistema,site,formulário atraente.

Alguns recursos do HTML5 e CSS3 não são totalmente compatíveis em todos os browsers, isso depende da funcionalidade a ser implementada, é uma boa prática comparar e analisar a necessidade de se implementar tal recurso, pois não é interessante que a página se apresente diferente em vários browsers.

OBSERVAÇÃOHTML5 é uma linguagem de marcação poderosa, capaz de utilizar vários recursos que anteriormente eram realizados apenas por linguagens de programação.São vários os exemplos que demonstram o destaque dessa linguagem, por exemplo: campos obrigatórios,drag and drop, explicar o significado de um campo para o usuário(placeholders), acesso a banco de dados, aplicações offline entre outras...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Minha página em HTML</title>
</head>
<body>

</body>
</html>
Listagem 1: Estrutura Básica HTML

Veja como a estrutura do HTML é simples e autoexplicativa. Todo o conteúdo deve estar entre as tags <html> </html>.

Saiba mais sobre HTML

CSS3(Cascading Style Sheets)

CSS3 terá um papel fundamental no desenvolvimento do projeto, será a partir deste que o layout da aplicação ira ser desenvolvido. É possível utilizar estilos em elementos de forma individual, para isso usaríamos um atributo Style,mas isso não é uma boa prática e se a página for extensa, pode ser que fique complexo dar manutenção no código.

Se a página HTML já está criada é possível através do CSS fazer relacionamentos, isso já era possível nas versões anteriores.No entanto esta nova versão nos disponibiliza uma flexibilidade maior ao combinar um elemento da página HTML a um seletor do arquivo css.

Além de novos seletores o CSS3 nos da um maior suporte quando o assunto é animações e desta vez sem precisar de um código JavaScript ou flash. Alguns dos recursos são: text-shadow,box-shadow,Media queries, Animations e etc...

OBSERVAÇÃO: Existe duas formas de realizar a integração do CSS com página HTML, neste projeto será criado um arquivo separado apenas para tratar de CSS, caso alguma mudança no layout do formulário é neste arquivo que a alteração deve ocorrer. Para adicionar o CSS na mesma página HTML, insira dentro das tag’s <head> </head>, a tag <script type=”text/css”> </script>

body {
    background-color: red;
}

section {
    font-family: sans-serif,Tahoma,Verdana;
}

article {
    float: left;
}
Listagem 2: Estrutura Básica CSS

A listagem acima demonstra como atribuir um elemento de uma página HTML através do arquivo CSS. Observe que isso é apenas uma forma de identificar o elemento, o CSS3 nos traz uma grande variedade de seletores que facilita a manutenção do layout na página.

 Saiba mais sobre CSS3

JavaScript(Client-side)

JavaScript é principal linguagem de programação de scripts para web que atua no lado do cliente, realizando procedimentos antes que o conteúdo seja enviado para o servidor.

Todos os browsers mais modernos suportam o JavaScript, ou seja a linguagem se integra perfeitamente com a página HTML, do contrário o site seria estático sem nenhum dinamismo.

No projeto será apresentado apenas como referenciar um elemento HTML com uma função Javascript, que da mesma forma do CSS será criado um arquivo separado, mas é possível também codificar na própria página.

MinhaPrimeiraFuncao("Javascript is so easy to learn");

function  MinhaPrimeiraFuncao(msg){
    alert("A mensagem enviada foi: "+msg);
}
Listagem 3: Estrutura Básica JavaScript

OBSERVAÇÃO: Perceba que o JavaScript, possui tipagem fraca, ou seja não se declara tipos de dados, as variáveis são dinâmicas. Logo acima foi criado uma função e uma chamada ao método que irá enviar uma mensagem a partir do objeto que foi passado.

Para adicionar o JavaScript na mesma página HTML, insira dentro das tag’s <head> </head>, a tag <script type=”text/javascript”> </script>

 Saiba mais sobre HTML

Transformando a teoria em prática

Após uma breve análise do que vem a ser cada tecnologia e qual o seu papel no projeto, será criado um exemplo prático afim de mostrar como é fácil a integração do HTML, CSS e JavaScript.

O primeiro passo é criar a página HTML, ou seja não nos preocuparemos com um layout bonito ou com eventos na aplicação por enquanto, apenas com os elementos necessários para a criação do formulário.

Ao concluir a criação do documento HTML, já é possível fazer com que o browser renderize o conteúdo da página,é claro que ela ainda não possuirá a aparência desejada, ainda faltam mais alguns ingredientes.

Crie uma página HTML de nome ContatoForm.html e insira o código da listagem abaixo. Observe que as referências para arquivos JavaScript e CSS comentadas, isso quer dizer que apenas o HTML puro será gerado no browser.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>--Formulário Contato--</title>
    <meta charset="utf-8" />
    <!--   <link href="ContatoEstilo.css" rel="stylesheet" media="all" />
    <script src="JavaScript1.js"></script>-->

</head>
<body>
    <form name="meu_form">

        <h1>Entre em contato</h1>

        <p class="nome">
            <input type="text" id="nomeid" placeholder="Tiago Vale" required="required" name="nome" />
            <label for="nome">Nome</label>
        </p>
        <p class="fone">
            <input type="text" id="foneid" placeholder="(xx)xx-xx-xx-xx" name="fone" />
            <label for="fone">Fone</label>

        </p>
        <p>
            <input type="email" id="emailid" placeholder="fulano@mail.com" name="email" />
            <label for="email">Email</label>
        </p>
        <p>
            <textarea placeholder="Deixe sua opnião"></textarea>
        </p>
        <p class="submit">
            <input type="submit" onclick="Enviar();" value="Enviar" />
        </p>

    </form>
</body>
</html>
Listagem 4: ContatoForm.html

A listagem acima mostra o HTML final do projeto, no documento perceba que os elementos utilizados em sua grande maioria não é do HTML5 como: parágrafos,labels,form. No entanto alguns dos elementos utilizam os recursos do HTML5, como placeholders,required(Campos obrigatórios) e o atributo “type” com o valor igual “email”.

Não foi criado em nenhum momento um método para validar se o email está correto, no entanto o HTML5 já faz isso, como também não existe rotina para verificar campos obrigatórios não informados, tudo isso está definido no documento HTML, até agora nada de JavaScript foi utilizado.

OBSERVAÇÕES:

  • Sinta-se livre para utilizar qualquer editor de texto, neste exemplo foi usado a IDE Visual Studio 2012.
  • A tag <textarea> da uma flexibilidade maior para o usuário escrever uma mensagem, o mesmo pode redimensionar o seu tamanho.
HTML sem CSSFigura 1: HTML sem CSS.

O HTML está pronto, agora precisamos deixar este formulário com uma aparência única, para isso utilizaremos CSS.

Retire o comentário das linhas entre as tag’s e crie um arquivo com o nome ContatoEstilo.css. Insira o código da listagem abaixo no arquivo .css.

body {
    padding: 0;
    margin: 0;
}

form {
    font-family: Verdana,Tahoma,sans-serif;
    font-size: 15px;
    background-color: #CC3300;
    max-width: 500px;
}

h1 {
    margin-bottom: 20px;
    margin-left: 20px;
    color: #66FFFF;
    text-shadow: 5px 5px 5px black;
}

input, textarea {
    width: 200px;
    padding: 10px;
    color: black;
    margin-left: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid;
}

input:hover, textarea:hover, input:focus, textarea:focus {
    border-color: #000066;
    box-shadow: 5px 0px 9px #FFFF00;
    background-color: #66FFFF;
    color: black;
    font-weight: bold;
}

.submit input {
    background-color: #66FFFF;
    height: 40px;
    width: 100px;
    font-weight: bold;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid;
    color: black;
}

textarea {
    width: 400px;
    height: 120px;
    line-height: 20px;
    max-width: 400px;
}

form label {
    margin-left: 20px;
    color: #FFFFFF;
    font-weight: bold;
}
Listagem 5: ContatoEstilo.css

Finalmente o layout da página está pronto, como foi mencionado anteriormente o CSS é o responsável por dar uma boa aparência ao nosso formulário, com isso o layout da aplicação está finalizado.

Alguns recursos do CSS3 estão sendo utilizados no projeto, como o border-radius,box-shadow,text-shadow.

Quando o cursor do mouse passar pelos controles inputs/textarea ou focus nestes, será aplicado estilos nessas tag’s.

Observe a relação de parentesco entre os elementos mais externos pros mais internos. Por exemplo essa especificação:”form label {margin-left:20px;}”, quer dizer que todas as labels que estão dentro da tag <form></form>, irão ser referenciadas.

 HTML com CSSFigura 2: HTML com CSS.

Adicionando JavaScript

Por fim vamos criar um arquivo .js de nome JavaScript1.js e referencia-lo ao nosso projeto. Esse arquivo conterá apenas umas função, que será responsável por lançar um aviso ao usuário final. Lembrando que a função é chamada no evento onclick(Quando o usuário clicar no botão “Enviar”) e que está descrita no HTML do formulário.

function Enviar() {

    var nome = document.getElementById("nomeid");

    if (nome.value != "") {
        alert('Obrigado sr(a) ' + nome.value + ' os seus dados foram encaminhados com sucesso');
    }

}
Listagem 6: JavaScript1.js

A criação do formulário foi concluída com sucesso, execute o projeto no browser e teste as funcionalidades.

 HTML + CSS + JAVASCRIPT.Figura 3: HTML + CSS + JAVASCRIPT.

Neste artigo abordamos os principais elementos da web, que é o HTML/CSS/JavaScript, com o objetivo de explicar o papel de cada tecnologia, os recursos mais novos e algumas boas práticas a serem utilizadas.

Foi visto também a integração das tecnologias em um projeto prático da criação de um formulário de contatos.

Espero que tenham gostado, qualquer dúvida pode deixar comentário e até o próximo artigo.

Curso relacionado: Pseudo classes do CSS
Curso relacionado: HTML Básico
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?