Comando <FORM>...</FORM>
Os formulários são utilizados para oferecer aos usuários uma interface para entrada de dados via Browser. Com o uso dos formulários, os usuários podem enviar dados a partir da página HTML, com crítica dos dados preenchidos, e com todas as facilidades para fazer um tratamento preliminar nas informações antes que sejam enviadas ao servidor. Após o preenchimento do formulário, pode-se enviar os dados diretamente para ao servidor para execução da aplicação definida no formulário ou em alguns casos, usar os dados para montar uma mensagem de e-mail para um destinatário definido no formulário. Se no servidor houver um programa capaz de tratar os dados recebidos (vide CGI), pode-se definir uma aplicação com consulta a um banco de dados, para receber as informações vindas da máquina do cliente, ativar um programa que realize as funções de atualização ou consulta a um banco de dados, que é a forma pela qual foram constituidas a maioria das aplicações na Internet que fazem comércio eletrônico. Sobre os formulários, podemos aplicar qualquer formatação, parágrafos, listas, tabelas, imagens, exceto outros formulários. Os campos que forem definidos no formulário precisam ter um atributo NAME, para que possam depois ser tratados por alguma forma de script ou programa , que queira fazer um tratamento específico com os dados desse campo. Para definir e apresentar um formulário nas páginas HTML é utilizada a tag <FORM>:

<FORM METHOD="Post/Get" ACTION="..."> ... </FORM>

Um formulário é definido com dois atributos, METHOD e ACTION. O primeiro, METHOD, indica de que modo os dados serão enviados ao servidor. Seus valores podem ser POST ou GET (vide CGI). Se o valor do atributo for POST, os dados são enviados separadamente ao endereço URL e é considerado o mais "seguro" do que GET. Os dados fazem parte da mensagem que é enviada para o servidor, de modo que pode transferir grande quantidade de dados. Se o valor do atributo for GET, os dados são embutidos no URL e ficam visíveis no campo URL do Browser e podem ser facilmente mapeados pelo usuário. Pode transferir somente até 128 caracteres.

<INPUT TYPE=...>
A tag <INPUT>, é a responsável pela definição dos campos de entrada de dados, como por exemplo, caixas de texto, campos de senhas, campos escondidos, botão para submissão de dados, botão para limpeza (reset) dos dados digitados, caixas de checagem e botões tipo rádio, todos definidos no atributo TYPE. Quando INPUT não apresenta atributos, é assumido TYPE=TEXT (default). Os atributos podem ser melhor entendidos a partir da tabela abaixo:

TYPE Define o tipo do campo que está sendo declarado Pode ter os valores : TEXT Indica que o campo será digitado a partir de uma caixa de texto
PASSWORD Indica que o campo será digitado em uma caixa onde os dados são exibidos com asteriscos, protegendo a digitação de uma senha.
CHECKBOX São caixas de checagem. Permite a escolha de mais de uma das opções.
RADIO São os botões tipo radio, apenas uma de suas opções pode ser escolhida pelo usuário.
SUBMIT É o botão que ao ser pressionado, fará o envio dos dados para o programa no servidor que irá tratar a informação.
RESET Limpa todos os campos do formulário.
IMAGE Idêntico à função de SUBMIT, com uma imagem, definido pelo atributo SRC informando qual imagem poderá ser clicada para envio dos dados.
HIDDEN Campo que não será visto pelo usuário, mas será enviado junto com os demais campos. Utilizado para receber um cálculo ou outro dado calculado internamente na página.
NAME Define o nome do campo para tratamento pelo programa no servidor para onde estão sendo enviados os dados
SIZE Define o tamanho da campo na página, o espaço disponível para digitação
MAXLENGTH Define o tamanho máximo de caracteres de um campo
CHECKED Faz com que se o tipo do campo for um botão de tipo radio, ou uma caixa de checagem, ele seja marcado como selecionado
VALUE Define um valor default para o campo, para que mesmo que ele não seja preenchido, ele receba um valor conforme definido nessa tag.

 

<INPUT TYPE=PASSWORD> Campo de dados tipo senha
Entrada de texto na qual os caracteres são escondidos por asteriscos, como se pode ver no exemplo.

<FORM>
Login: <INPUT TYPE=TEXT NAME=login><br>
Password: <INPUT TYPE=PASSWORD NAME="senha">
</FORM>

Login   :
Password:

Atributo VALUE
O atributo VALUE pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser entrar dados, ele somente precisará apagar o que já estiver escrito.

Nome:<INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">

Nome:

<Input type=CHECKBOX>
Insere um botão para escolha de opções. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. Pode ser escolhida mais de uma alternativa. Uma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

<input type=checkbox name=esporte value=futebol>tFutebol
<input type=checkbox name=esporte value=volei checked>Vôlei
<input type=checkbox name=esporte value=natacao checked>Natação
<input type=checkbox name=esporte value=basquete>Basquete

 Esportes que você pratica:
Futebol
Vôlei
Natação
Basquete

<Input type=RADIO>
RADIO insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. Uma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

<INPUT TYPE=RADIO NAME="time" VALUE="palmeiras">Palmeiras <br>
<INPUT TYPE=RADIO NAME="time" VALUE="america">América
<INPUT TYPE=RADIO NAME="time" VALUE="flamengo">Flamengo<br>

Seu time do coração: Palmeiras América Flamengo

<INPUT type=SUBMIT/RESET>
SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor.

<FORM> <INPUT TYPE=SUBMIT> </FORM>

É possível modificar a mensagem desse botão através do atributo VALUE

<FORM><INPUT TYPE=Submit VALUE="Enviar"></FORM>

RESET restaura os valores iniciais das entradas de dados.

<FORM><INPUT TYPE=RESET></FORM>

É possível modificar a mensagem desse botão através do atributo VALUE

<FORM><INPUT TYPE=RESET VALUE="Apaga!"></FORM>

Usando Tabelas para alinhar os formulários
O uso de tabelas pode ser empregado para alinhar os campos do formulário. No exemplo abaixo, foi aberto um formulário e logo após foi aberta uma tabela. Cada campo e sua descrição foram colocados como células da tabela, possibilitando o alinhamento para melhor visualização:

Favor preencher os dados abaixo:
Nome:
Endereço: 
<form>
<center>
<table>
<tr>
<td colspan=2>Favor preencher os dados abaixo:</td>
<tr>
<td>Nome:</td>
<td><input type="text" maxlength=10 size=15 name="nome"></td>
<tr>
<td>Endereço:
<td><input type="text" maxlength=20 size=35 name="ende"></td>
<tr>
<td align=center colspan=2>
<input type="reset" value="Limpar Dados"></td>
</table>
</center>
</form>
 
<SELECT>
A tag SELECT é utilizada para apresentar uma lista de valores, em forma de box, onde os valores
que podem ser atribuídos os valores para o campo, através do atributo OPTION. Veja no exemplo abaixo:
<SELECT NAME="cidade">
<OPTION>Salvador
<OPTION>Rio de Janeiro
<OPTION>São Paulo
<OPTION>Curitiba
<OPTION>Belo Horizonte
</SELECT>

Através do atributo SELECTED, pode-se definir que um valor seja préviamente selecionado, auxiliando o processo de preenchimento do formulário. Repare que ao carregar o formulário, o valor escolhido para ser selecionado já está marcado:

<SELECT NAME="cidade">
<OPTION>Salvador
<OPTION SELECTED>Rio de Janeiro
<OPTION>São Paulo
<OPTION>Curitiba
<OPTION>Belo Horizonte
</SELECT>

Com o atributo SIZE, podemos escolher quantos itens da lista de opções irão aparecer no formulário. Pode-se combinar, se necessário, os dois atributos, SELECTED e SIZE (no exemplo abaixo, veja o resultado de SIZE=3):

<SELECT NAME="cidade" SIZE=4>
<OPTION>Salvador
<OPTION SELECTED>Rio de Janeiro
<OPTION>São Paulo
<OPTION>Curitiba
<OPTION>Belo Horizonte
</SELECT>

Com o atributo MULTIPLE, podemos escolher mais de uma opção na caixa de seleção. Veja o resultado:

<SELECT NAME="cidade" SIZE=4 MULTIPLE>
<OPTION>Salvador
<OPTION SELECTED>Rio de Janeiro
<OPTION>São Paulo
<OPTION SELECTED>Curitiba
<OPTION>Belo Horizonte
</SELECT>

<TEXTAREA>...</TEXTAREA>
A tag TEXTAREA é utilizada para apresentar uma caixa para digitação de dados, como comentários ou sugestões:Veja no exemplo abaixo: <TEXTAREA> abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial.

<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário < /TEXTAREA>