Criando um formulário de contato simples
 |
| O que iremos fazer hoje |
Formulários permitem ao usuário de um site ou aplicativo inserirem e enviarem informações para o site ou programa. Em html temos a tag <form></form> que nos permite criar um formulário em nossos documentos. hoje teremos uma visão bem superficial do assunto, já que a intenção é introduzir a funcionalidade de forma simplificada e não entrar nos detalhes de implementação e estilo neste primeiro momento.
Fazendo a nossa marcação básica
Abra o bloco de notas e insira a nossa tão conhecida estrutura básica html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Formulário de Contato</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Insira um cabeçalho de nível 1 (<h1>) dentro do body com o seguinte texto: Formulário de Contato
Salve o documento com o nome formulario1.html e abra no navegador. O resultado vai se parecer com este:
<form>
 |
| Visualização da Página no Navegador |
O elemento <form></form>
As tags <form></form> criam um formulário em seu documento, onde você poderá inserir e enviar informações de uma página para algum outro local.
Edite o seu documento html no bloco de notas e insira as tags <form></form> logo abaixo do cabeçalho <h1></h1>. Salvando e executando o arquivo, você não verá diferença. Não aparecerá nada na tela ainda, mas se você abrir o modo desenvolvedor do navegador clicando com o botão direito > inspecionar ou teclando F12 no seu teclado, verá que o formulário estará presente no código como destacado em cinza abaixo:
 |
| Captura de Tela do Código Fonte |
Como podemos inserir dados em nosso formulário?
Vamos começar com o elemento mais básico. Insira um elemento <input> aninhado no seu formulário:<form>
<input>
</form>
Elementos <input> não possuem tag de fechamento. Salve o código e abra no navegador. Você verá que aparecerá um campo de texto para que possa digitar qualquer texto nele.
Seria útil que pudéssemos informar ao usuário o que deve ser inserido na caixa de texto. Para isso os formulários contam com uma tag chamada <label></label> (label significa etiqueta). Envolva o seu elemento <input> dentro das tags <label></label> e digite um texto para que aparece antes da caixa de texto, por exemplo:
<label>Digite seu nome: <input></label>
<label>Digite seu nome: <input></label>
 |
| Label para orientar o usuário na inserção de dado no formulário |
Você pode pensar, por que não utilizamos uma tag de parágrafo? Primeiro porque parágrafos tomam toda a largura da linha onde são inseridos, segundo porque o label permite que ao clicar nele o elemento input seja selecionado. Experimente clicar no texto e veja o cursor aparecer na caixa de texto.
Criando um campo de email
Um outro tipo de elemento que podemos criar através da tag <input> é o campo de email, para criar um campo de email definal o argumento type="email". Embora o campo criado seja visualmente idêntico ao campo de texto, veremos que eles têm diferença na funcionalidade.
Seguindo o mesmo formato usado no primeiro input, envolva o seu campo de e-mail em tags <label></label> com um texto: Digite seu email:
Seguindo o mesmo formato usado no primeiro input, envolva o seu campo de e-mail em tags <label></label> com um texto: Digite seu email:
 |
| Visualização do campo de email criado ao lado do campo de texto |
O campo de nome ficou colado ao label e campo de email, vamos corrigir isso. Após a tag de fechamento do seu primeiro label referente ao campo de nome, insira duas tags <br> para inserir duas quebras de linha e assim, um espaço entre os campos. Mais para frente em postagens de estilização com CSS veremos como posicionar e estilizar elementos de uma forma mais simples e eficiente;
Criando uma forma de enviar as informações inseridas
Para finalizar este nosso exemplo simples de formulário de contato, precisamos inserir um botão para enviar as informações inseridas no formulário. Para isso recorreremos novamente ao nosso amigo, o elemento <input>. Insira um novo <input> após o label de fechamento do campo de email e defina o atributo type="submit". Submit em inglês significa "submeter" ou "enviar", definindo o atributo type dessa forma transforma o elemento input em um botão de envio. Experimente, salve o documento e abra-o no navegador.
Dica: será necessário novamente inserir duas tags <br> antes do elemento input, para que ele fique afastado do campo de email.
Provando que o campo de e-mail é diferente do campo de texto
Dica: será necessário novamente inserir duas tags <br> antes do elemento input, para que ele fique afastado do campo de email.
Provando que o campo de e-mail é diferente do campo de texto
Há diversos atributos que podemos configurar em nossos elementos input, um deles é o atributo required que não possui valor, ele funciona para que o navegador exija o preenchimento do campo antes do envio do formulário, caso contrário será mostrada uma mensagem solicitando o preenchimento. Ao inserir o atributo required, em seu campo de email tente enviar o formulário com a caixa de email em branco e receberá uma mensagem para preenchê-lo. Se você digitar qualquer coisa qie tenha o formato de email receberá uma mensagem com o formato permitido. Legal né?
Conclusão
O que aprendemos aqui hoje ainda é a ponta do iceberg, foi apenas uma introdução para mostrar as possibilidades que o html oferece. Em postagens mais avançadas veremos os diversos atributos e boas práticas para marcação de formulários. Veremos por exemplo que todo formulário precisa ter um atributo action para definirmos para onde enviar os dados inseridos, ainda que o formulário funcione sem ele, isso nos ajuda a ter maior controle. Até a próxima e bons estudos!
Comentários
Postar um comentário