Como posso fazer um fomulário HTML? O HTML tem alguns elemento que ajudam na criação de formulários e na interação usuário-website. Esses elemento apresentam diversas formas de apresentar ao usuário informações que o site quer que o usuário preencha, selecione ou marque. Para quem programa em outras linguagens, os elementos HTML para fazer formulário são os padrões, de caixa de texto, seleção de um ou vários em uma lista, marcar opções e também escrever textos em várias linhas.

Vamos ver como fazer o elemento Form (tag <form>) do HTML, que é o elemento pai de todos os outros elementos de formulário HTML e no fim desse post teremos links para outros posts descrevendo os outros elementos HTML de formulário.

A Tag <form> – Elemento Form

A tag <form> é utilizada para fazer um formulário, nela define-se vários aspectos do formulário como para onde ele é enviado e que forma de envio é utilizado. Sempre que for fazer um formulário, todos os componentes do formulário devem ficar entre as tags <form> e </form>.

Vamos ver alguns atributos da tag de fomulário <form>.

Action

- O atributo action da tag <form> diz para onde o formulário deve ser enviado. O valor desse atributo é o endereço, estático ou relativo, de onde está a página que vai tratar esse formulário.

Method

- O method diz como enviar os dados do formulário, pode ser pelo método GET ou POST. Se você não especificar o método (atributo method), o padrão é o GET.

Para saber mais sobre os métodos GET e POST acesse Como Funciona os Métodos GET e POST – Diferenças.

Name

- Esse atributo nomeia o fomulário <form>, fazendo ele poder ser identificado por folhas de estilo e scripts (como Javascript). Esse atributo está em desuso, é utilizado somente para compatibilidade com códigos HTML antigos e os códigos HTML novos devem utilizar o atributo id.

Id

- Esse atributo pode ser utilizado em qualquer elemento HTML, ele define uma identificação única para o elemento HTML e deve ser único em um documento.

Target

- Indica onde o resultado da submissão do formulário HTML será exibida. Pode ser o nome de um frame (ou iframe, tag <iframe>), ou uma janela, ou uma dessas seguintes constantes:

– _blank – O resultado do formulário HTML é exibido em uma janela nova e sem nome. alguns navegadores deixam a opção para o usuário, de exibir esse resultado em uma nova aba.

– _self – Exibe a página referenciada na mesma página ou no mesmo frame que o link ou formulário está. Essa é a opção padrão.

- _parent – Exibe a página referenciada no frame pai do frame que o link ou formulário está. Se o frame não tiver frame pai, essa opção fica igual a opção “_self“.

- _top – Exibe a página referenciada na tela inteira do navegador, cancelando qualquer frame que a página anterior continha.

Enctype

- Esse atributo diz como o formulário HTML vai codificar os dados enviados. Se você não quiser enviar nenhum arquivo (upload) para o servidor, você pode não colocar esse atributo no seu formulário HTML (form), que ele vai ficar com o valor padrão, que vai funcionar normal.

Os valores para esse atributo podem ser:

- application/x-www-form-urlencoded – Esse é o valor padrão, se você quiser saber como os dados são codificados, entre em http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1.

- multipart/form-data – Se você quer fazer envio de arquivos (upload), via formulário HTML, você deve utilizar esse valor para o atributo Enctype. O valor padrão não é suficiente para enviar grandes quantidades de dados binários. Esse valor deve ser utilizado quando desejas enviar arquivos, dados binários ou caracteres não ASCII.

Para outros valores desse atributo, consulte: http://www.w3.org/TR/html401/types.html#type-content-type.

Accept

- Esse atributo define quais tipos de conteúdo (content types), que o servidor vai processar corretamente. Colocam-se os tipos separados por vírgula.

O atributo accept especifica que tipos de arquivos (<input type=”file”>), o navegador deve filtrar, para não enviar arquivos para o servidor que não seja correspondente a um dos tipos especificados nesse atributo.

Se você quiser uma lista dos tipos (MIME types) de conteúdo, entre em: http://www.w3.org/TR/html401/references.html#ref-MIMETYPES e em: http://www.iana.org/assignments/media-types/

Accept-charset

- Esse atributo define qual tipo de codificação de caracteres (charset) o servidor vai identificar os dados enviados pelo formulário HTML.

Para ver uma lista de codificação de caracteres (charset), acesse: http://www.w3.org/TR/html401/references.html#ref-CHARSETS.

Até a data de escrita desse post, e mesmo sem testar, o Internet Explorer não aceita esse atributo.

Exemplo de Formulário HTML (<form>)

Vamos ver um exemplo simples do uso de formulário HTML. O exemplo irá mostrar alguns campos, onde todos devem ser preenchidos para o envio do formulário. Se algum campo não for preenchido, aparece uma mensagem de erro no campo que não foi preenchido.

O nosso arquivo para executar esse código é o contato.php.

O Arquivo contato.php.

Nesse arquivo temos o nosso código PHP que processa o fomulário HTML quando ele é enviado.

<?php

$Enviar = $_POST["Enviar"];

if(strlen($Enviar) > 0) { // o formulário foi enviado
	$nome = $_POST["nome"];
	$email = $_POST["email"];
	$telefone = $_POST["telefone"];
	$departamento = $_POST["departamento"];
	$mensagem = $_POST["mensagem"];

	if((strlen($nome) > 0) && (strlen($email) > 0) && (strlen($telefone) > 0) &&
		(strlen($departamento) > 0) && (strlen($mensagem) > 0)) { // todos os dados preenchidos
		print("<strong>Dados do Formulário:<strong><BR>");
		print("<strong>Nome:</strong>".$nome."<BR>");
		print("<strong>Email:</strong>".$email."<BR>");
		print("<strong>Telefone:</strong>".$telefone."<BR>");
		print("<strong>Departamento:</strong>".$departamento."<BR>");
		print("<strong>Mensagem:</strong>".$mensagem."<BR>");
	}
	else { // nem todos os dados preenchidos, voltar para o formulário
		// dizer em msg de erro o que falta no formulário
		if(strlen($nome) == 0)
			$erro_nome = "<span class=\"msg_erro\">O campo Nome deve ser preenchido</span>";
		if(strlen($email) == 0)
			$erro_email = "<span class=\"msg_erro\">O campo Email deve ser preenchido</span>";
		if(strlen($telefone) == 0)
			$erro_telefone = "<span class=\"msg_erro\">O campo Telefone deve ser preenchido</span>";
		if(strlen($departamento) == 0)
			$erro_departamento = "<span class=\"msg_erro\">O campo Departamento deve ser preenchido</span>";
		if(strlen($mensagem) == 0)
			$erro_mensagem = "<span class=\"msg_erro\">O campo Mensagem deve ser preenchido</span>";

		// colocando o departamento selecionado como selecionado
		$$departamento = "selected=\"true\"";

		require("contatoform.php");
	}
}
else { // o formulário não foi enviado
	require("contatoform.php");
}

?>

Onde tem a chamada do array $_POST, pegamos os dados enviados do formulário, pelo método POST. Para pegar os dados enviados pelo método GET, utilizamos o array $_GET. No nosso exemplo, somente enviamos dados pelo método POST, então somente utilizaremos o array $_POST.

No array $_POST, temos todos os nomes  das variáveis que enviamos do formulário, como chaves do array (array associativo), e seus valores como os valores do formulário. Se temos um campo tipo text, com nome “email” (name=”email”), e enviamos esse formulário pelo método POST, teremos no PHP, o array $_POST["email"] com o valor do que foi escrito no campo email.

No nosso exemplo, se o formulário foi enviado, ele pega todos os valores que foram enviados e testa, para ver se algum está em branco (com número de caracteres igual a zero). Se todos estiverem preenchidos, o programa mostra eles na tela. Se algum não tiver sido preenchido, o programa testa para ver quais não foram preenchidos e seta uma mensagem de erro personalizada para cada campo não preenchido, e volta a mostrar o fomulário.

A linha que faz o campo selecionável (selecbox) ficar como estava quando foi enviado, merece um pouco mais de explicação. A linha é a seguinte: $$departamento = “selected=\”true\”";. Ela está simplesmente, colocando na variável com o nome do valor da variável $departamento, o valor “selected=\”true\”". Por exemplo, se a minha variável $departamento for igual a “comercial”, depois de executar essa linha, eu terei uma variável $comercial com o valor igual a “selected=\”true\”". Isso tudo para, no arquivo HTML, eu poder selecionar automaticamente o que foi estava selecionado no fomulário, no campo de seleção (selectbox). Vamos entender isso mais a frente.

O Arquivo contatoform.php.

Nesse arquivo tem o nosso formulário em HTML e um pouco de PHP para deixar o formulário mais dinâmico.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Exemplo de Formulário HTML/PHP</title>

	<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>
<body>

<form name="form_contato" action="contato.php" method="post">
	<div>Nome: <?php echo($erro_nome); ?></div>
	<div><input name="nome" id="nome" type="text" value="<?php echo($nome); ?>" /></div>

	<div>Email: <?php echo($erro_email); ?></div>
	<div><input name="email" id="email" type="text" value="<?php echo($email); ?>" /></div>

	<div>Telefone: <?php echo($erro_telefone); ?></div>
	<div><input name="telefone" id="telefone" type="text" value="<?php echo($telefone); ?>" /></div>

	<div>Departamento: <?php echo($erro_departamento); ?></div>
	<div>
		<select name="departamento" id="departamento">
			<option value="">...</option>
			<option value="comercial" <?php echo($comercial); ?>>comercial</option>
			<option value="financeiro" <?php echo($financeiro); ?>>financeiro</option>
			<option value="juridico" <?php echo($juridico); ?>>jurídico</option>
			<option value="suporte" <?php echo($suporte); ?>>suporte</option>
		</select>
	</div>

	<div>Mensagem: <?php echo($erro_mensagem); ?></div>
	<div><textarea name="mensagem" id="mensagem" rows="5" cols="25"><?php echo($mensagem); ?></textarea></div>

	<div><input name="Enviar" value="Enviar" type="submit" /></div>
</form>

</body>
</html>/

Esse arquivo simplesmente define 5 campos e um botão de submeter o formulário, sendo que um desses campos é um campo selecionável (selectbox).

Todos eles tem no atributo value, um trecho de código em PHP, por isso precisamos que a extensão desse arquivo seja reconhecida como extensão para processamento do PHP. Esse trecho serve para definir no formulário HTML, caso de erro, o que o usuário já tinha escrito antes, porque sem isso o fomulário viria todo em branco novamente, e isso é ruim, pois se eu errei somente uma coisinha no fomulário, e ele voltar em branco, terei que preenche-lo todo novamente.

No caso do selecbox, eu tenho que fazer com que a seleção do usuário volte a aparecer se o formulário der erro, então coloco um trecho PHP exibindo uma variável com o nome do value da opção (option) em questão, para no script de processamento, ele tratar isso, como foi explicado no arquivo contato.php.

Podes perceber que tenho várias classes de folha de estilo no documento, e o documento também chama um arquivo de folha de estilo, que eu colocarei somente para mostrar a mensagem de erro em destaque.

O Arquivo estilo.css

Esse arquivo é bem simples, abaixo o código:

.msg_erro {
	color: red;
	font-weight: bold;
}

Com essa classe eu destaco as minhas mensagens de erro.

O Exemplo Pronto

Você pode ver esse exemplo pronto em http://www.comocriarsites.com/exemplos/formulariohtmlsimples/.

Se você digita um endereço na barra de endereço seu navegador e aperta a tecla enter (ou clica no botão ir), o navegador faz uma requisição HTTP para o servidor do endereço digitado e o método dessa requisição é o GET. Se você clica em um link em um site, o navegador também se encarrega de fazer um requisição HTTP com o método GET, para buscar o conteúdo da página que você clicou.

Como Funciona o Método GET

O método GET utiliza a própria URI (normalmente chamada de URL) para enviar dados ao servidor, quando enviamos um formulário pelo método GET, o navegador pega as informações do formulário e coloca junto com a URI de onde o formulário vai ser enviado e envia, separando o endereço da URI dos dados do formulário por um “?” (ponto de interrogação).

Quando você busca algo no Google, ele faz uma requisição utilizando o método GET, você pode ver na barra de endereço do seu navegador que o endereço ficou com um ponto de interrogação no meio, e depois do ponto de interrogação você pode ler, dentre outros caracteres, o que você pesquisou no Google.

Quando Utilizar o Método GET

Você deve utilizar o método GET sempre que a requisição que você faz não altere o estado do servidor, tipo uma consulta, uma busca ou qualquer outra coisa que, além de não alterar o estado do servidor, também possa sempre reproduzir os mesmos resultados quando fizer a mesma requisição e for passado os mesmos parâmetros para esta requisição.

Voltando ao exemplo do Google, na ferramenta de busca dele, quando a busca é feita, ele deixa a URI toda na barra de endereço do navegador, você pode, por exemplo, copiar essa URI e mandar para alguém, dizendo para ele acessar o terceiro item da busca, e se esse alguém acessar essa mesma URI, vai achar o mesmo terceiro item que você indicou, quantas vezes for necessário (lógico que de tempos em tempos, o Google atualiza as posições das páginas).

O nome dado ao comportamento de quando você deve utilizar o GET é idempotente, que nada mas é do que já o explicado acima: uma requisição idempotente deve retornar a mesma coisa não importa quantas vezes ela é feita, ou seja, deve ter sempre os mesmos efeitos colaterais, não importando quantas requisições idempotentes são feitas.

Requisição com o método GET pode ter seu retorno cacheados (armazenados em cache), pois não se alteraria o retorno se fizéssemos uma mesma requisição GET. Isso pode causar um erro comum, que se você precisar sempre que as requisições GET cheguem ao servidor, elas podem não chegar sempre que uma requisição é feita, pois se estiver no cache de algum proxy ou do seu navegador, o retorno pode vir antes de chegar no servidor. Se você precisa que uma requisição chegue sempre no servidor, não utilize GET.

O método GET ainda pode ter limitações quanto ao tamanho dos dados a serem enviados e também ao que pode ser enviado. Quanto ao tamanho, pode-se ter uma restrição ao tamanho da URI que pode ser enviada em um requisição, e se seus dados ultrapassarem esse tamanho, provavelmente ocorrerá um erro, ou seus dados vão ser passados incompletos.

Quanto ao que pode ser enviado, como os dados vão ser enviados pela URI, só poderão ser enviados caracteres aceitos na URI, se você quer enviar dados binários (como arquivo, imagens e outros), não poderá usar GET.

Como Funciona o Método POST

O método POST envia os dados colocando-os no corpo da mensagem. Ele deixa a URI separada dos dados que serão enviados e com isso podemos enviar qualquer tipo de dados por esse método. Quando você faz um registro em um formulário e depois de enviar a URI não tem o ponto de interrogação separando os dados que você digitou, provavelmente o formulário foi enviado pelo método POST.

Quando Utilizar o Método POST

Utilizamos o método POST sempre que vamos alterar alguma coisa no servidor, ou sempre que queremos enviar dados que não podem ser enviados pelo método GET, como arquivos. Esse método é utilizado em formulário de cadastro e registro de usuários, envio de dados para alteração do sistema, cadastro de dados em sistemas de sites e outros.

O retorno de uma requisição com método POST normalmente não deve ser cacheada (armazenada em cache) então se você quiser que uma requisição sempre chegue ao servidor quando ela for feita, utilize POST.

A diferença é simples, sempre que for buscar ou apenas consultar alguma coisa, utilize GET e se for fazer alguma alteração com a requisição, envio de arquivo ou os dados forem muitos, utilize POST.

Diferenças no Lado do Servidor entre GET e POST (PHP, CGI)

Enviar dados pelo método GET e POST é diferente, então, o servidor pega esses dados de diferentes maneiras.

No PHP, quando enviamos dados pelo método GET, ele cria um array identificado por $_GET, que contém todos os dados enviados por esse método. Quando enviamos os dados pelo método POST, o PHP cria um array identificado por $_POST, também com todos os dados enviados por esse método.

Já em um script CGI, quando utilizamos o método GET, os dados são recebido em uma variável de ambiente, e com o método POST, os dados são recebidos pela entrada padrão (stdin).

Links interessantes sobre GET e POST:

- Methods GET and POST in HTML forms – what’s the difference?
- Hypertext Transfer Protocol — HTTP/1.1 – 9 Method Definitions

A função getElementById() do Javascript é bem fácil de usar, e é útil em muitas ocasiões. Vamos exemplificar algumas para melhor entendimento.

getElementById() para Tratamento e Envio de Formulário

Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:

<html>
<head>
	<title>Exemplo de getElementById() no Formulário</title>

<style type="text/css">

#msg_erro {
	color: red;
	font-weight: bold;
}

</style>

</head>
<body>

<script language="JavaScript">

function teste_submit()
{
	var obj_form = document.getElementById('form_teste');
	var obj_nome = document.getElementById('nome_teste');
	var obj_cargo = document.getElementById('cargo_teste');
	var obj_msg_erro = document.getElementById('msg_erro');
	var msg_erro = '';

	if(obj_nome.value == '')
		msg_erro = 'campo NOME vazio';
	else if(obj_cargo.value == '')
		msg_erro = 'campo CARGO vazio';

	if(msg_erro == '')
		obj_form.submit();
	else
		obj_msg_erro.innerHTML = msg_erro;
}

</script>

<form id="form_teste" action="http://www.comocriarsites.com" method="post">
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR>
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR>
<input type="Button" value="Enviar" onclick="teste_submit();">
</form>
<div id="msg_erro"></div>

</body>
</html>

Algumas pessoas que conhecem um pouco de Javascript podem dizer “eu posso fazer a mesma coisa com o onSubmit“, mas nós não estamos vendo o onSubmit e sim o getElementById().

Você pode ver esse exemplo da função getElementById() funcionando em Exemplo de getElementById() no Formulário.

No código acima temos um formulário HTML com dois campos e um botão de enviar, uma tag <div> para mensagem de erro e uma função Javascript identificada por teste_submit(). Quando o botão de enviar for pressionado, vai ser chamada a função Javascript teste_submit(). Essa função pega os objetos do formulário, dos campos do fomulário e do <div>, verifica se algum dos campos está vazio, e se algum deles estiver vazio, ele grava uma string em uma variável local (msg_erro) e depois faz essa string aparecer na tela. Se os dois campos não estiverem vazios, a função submete (envia) o formulário.

Os passos de pegar os objetos dos elementos do documento são feitos com a função getElementById(), que é uma função do documento, por isso tenho que colocar o document antes da função getElementById(). Como parametro da  função getElementById() tenho que colocar o idetificador único do elemento, que se define pelo atributo id.

Se você está usando uma linguagem no lado do servidor (PHP, ASP ou outras), isso faz com que reduza a carga no servidor, pois tratamos certos erros antes de realmente enviar o formulário. E isso agiliza o processo para o cliente também, que não precisa esperar carregar uma nova página para saber que o formulário que ele tentou enviar está faltando alguma coisa ou está errado.