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/.

A tag <a> é a tag utilizada para criar um link em uma página, o nome da tag é a inicial de anchor (âncora), que é o termo utilizado na maioria da literatura. Para criar um link para esse site, utilizamos a tag <a> como a seguir:

<a href="http://www.comocriarsites.com" title="o melhor blog de como criar sites">Como Criar Sites</a>

E o resultado dessa linha é:

Como Criar Sites

Atributos de Link – Tag <a> (href – Hypertext Reference, title e target)

O atributo que diz para onde o link aponta (para onde o usuário vai quando o link é clicado), é o href. O valor do atributo href é o endereço do site ao qual o link aponta.Você pode ver isso no exemplo acima, onde esse blog é para onde o link aponta, logo o endereço dele é o valor do atributo href do link. Mais abaixo veremos que podemos ter outros valores no atributo href.

Você pode colocar o atributo title da tag <a> para fazer o efeito de aparecer o valor desse atributo quando o mouse ficar em cima do link, dando uma descrição do destino do link para o usuário. No exemplo acima também colocamos o atributo title, e o valor dele é a descrição do site. Se você parar o mouse em cima do link de exemplo acima, ele mostrará o valor do atributo title. O atributo title também serve para outro propósito, que é para as máquinas de buscas saberem do que se trata o destino do link, podendo dar algum tipo de tratamento para essa descrição, como palavras chaves para a máquina de busca indexar melhor o site destino do link.

O atributo target define um alvo para o link ser aberto. Um alvo pode ser uma janela (nova ou já aberta) ou um frame (nas versões mais recentes de sites, frames não são mais utilizados). Para abrir o link em uma nova janela, utilize como valor do atributo target, o _blank.

<a href="http://www.comocriarsites.com" target="_blank">Como Criar Sites</a>

O atributo target não é mais padrão, segundo as normal da W3C no padrão strict. No padrão transitional ainda é permitido o seu uso. Para saber um pouco mais sobre os padrões e como coloca-los no seu site, acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).

Link Estático e Dinâmico

O que chamamos de link estático é o link que tem no seu atributo href o endereço completo do site destino. Os exemplos acima tem essa característica, o endereço completo. Para ligar (linkar) páginas que estejam no mesmo domínio, podemos fazer referência dinâmica, e chamamos de link dinâmico. O link dinâmico conta como início o diretório que a página que possui o link está, e para referenciar outra página no mesmo diretório, podemos colocar somente o nome da outra página no atributo href.

<a href="pagina2.html">página no mesmo diretório</a>

No exemplo acima, estamos linkando (ligando) a página2.html da nossa página, que tem que estar no mesmo diretório.

Nós podemos chamar páginas que estão em diretórios distintos, acima ou abaixo. Para fazer um link dinâmico de uma página que está no diretório exemplo, a uma página que está no diretório exemplo/teste, fazemos:

<a href="teste/pagina2.html">página em um diretório abaixo</a>

Para fazer um link dinâmico de uma página que está no diretório exemplo/teste, a uma página que está no diretório exemplo, fazemos:

<a href="../pagina2.html">página em um diretório acima</a>

Nós podemos também fazer combinações de páginas acima e abaixo, como acessar uma página que está em um outro diretório no mesmo nível que o diretório atual:

<a href="../teste2/pagina2.html">página em outro diretório do mesmo nível</a>

Link com Texto e com Imagens

Nos exemplos acima nós vimos vários links, mas todos eles sempre estão com um texto para ser clicado, mas um link pode ser uma imagem também. Para um link ser imagem, nós temos que simplesmente colocar uma imagem dentro da tag <a>.

<a href="http://www.comocriarsites.com"><img src="img/imagem_teste.png" border="0"></a>

O exemplo acima mostra como colocar um link com imagem. Podemos notar que dentro da tag <img> colocamos o atributo border=”0″, isso é porque por padrão, quando uma imagem é colocada como link, ela exibe uma borda, e com esse atributo fica somente a imagem normal.

Link para a mesma Página

Um link pode ter o seu destino na mesma página que está sendo exibida no navegador, ou indicar um certo ponto em uma outra página. Para fazer isso temos que identificar o ponto ao qual queremos que o link aponte e coloque o identificador desse ponto no atributo href do nosso link. Vamos ao exemplo:

<h2 id="indice">Índice</h2>

<a href="#topico1">Tópico 1</a><br>
<a href="#topico2">Tópico 2</a><br>
<a href="#topico3">Tópico 3</a><br>
<a href="#topico4">Tópico 4</a><br>
<a href="#topico5">Tópico 5</a><br>
<br>
<h2 id="topico1">Tópico 1</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico2">Tópico 2</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico3">Tópico 3</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico4">Tópico 4</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico5">Tópico 5</h2>
...
<a href="#indice">Voltar ao Índice</a>

Para ver esse exemplo funcionando acesse Exemplo de Links Internos como Índice.

Nesse exemplo criamos um índice para a nossa página, e quando o usuário clicar nos itens do índice, ele vai ser levado direto para os tópicos correspondentes. Não tem muitos segredos aqui, somente que cada tópico vai ter um identificador único, que pode ser qualquer nome, ou o nome do tópico para melhor representar, e o atributo href dos links tem os identificadores com um jogo da velha na frente, como valor.

Pode notar no exemplo também que após cada tópico tem outro link para retornar ao índice, para melhorar a navegação do usuário.

No nosso exemplo funcionando, também há links para outra página, com identificador de onde quer que seja mostrado essa outra página. Isso também é simples, basta colocar no atributo href o endereço da página a ser acessada, seguido de jogo da velha e o identificador da parte onde se quer mostrar.

<a href="outra_pagina.html#topico1">Tópico 1 na outra página</a>

Link para Arquivo

Um link também pode ser apontado para um arquivo, na verdade ele é sempre apontado para um arquivo, só que quando esse arquivo é uma página da web, nós dizemos que o link aponta para um página, mas podemos facilmente fazer um link para um arquivo, só precisamos colocar no atributo href da tag <a> o endereço do arquivo.

<a href="http://www.comocriarsites.com/arquivos/backup.zip">Download Arquivo</a>

No exemplo acima estamos fazendo um link para um arquivo .zip (zipado). Ao clicar no link o usuário vai ter a opção de abrir o arquivo ou salvar o arquivo.

Link para Email

Um outro tipo de link é o link para email, esse não é um modo elegante de fazer o usuário enviar email para o dono do site ou o administrador, mas na falta de algum script para envio de email por formulário esse resolve.

Para fazer um link para email, nós colocamos a palavra mailto, seguido de dois pontos (:), seguido do email ao qual vai ser enviado a mensagem, caso o usuário clique.

<a href="mailto:gerente@comocriarsites.com">Envie um email para mim</a>

No exemplo acima, ao clicar no link, vai abrir o gerenciador de email padrão do usuário (Thunder Bird, Outlook, …) já com o email para ser enviado, só precisando o usuário digitar a mensagem.