Tutorial Sobre Formulários HTML



Neste tutorial, você vai aprender a criar Formulários HTML, que permitem ao usuário enviar informação ao servidor Web. 

Tags Associadas a Formulários

Básico de Formulários 


Texto 

•Campos de Texto •Campos de Password •Campos Escondidos •Áreas de Texto 


Menus 

•Menus de Opções •Listas Múltiplas 


Botões 

•Checkboxes •Radio Buttons •Botões de Reset e Submit •Imagens como Botões 

------------------------------------------------------------------------

Campos de Texto

O objeto mais simples de entrada em formulários é o objeto text. Este campo permite a entrada de uma única palavra ou uma linha de texto, com uma largura default de 20 caracteres. 

Opções: 

VALUE="" OPCIONAL 
Usando a tag VALUE, você pode especificar o texto que aparecerá no campo quando o formulário for carregado. 


SIZE="" OPCIONAL 
Com esta opção, você pode mudar o tamanho do campo exibido. 
Nota: o usuário pode escrever mais caracteres que essa quantidade, nesse caso o texto irá rolar para a esquerda dentro do campo. 


MAXLENGTH="" OPCIONAL 
Caso você queira limitar o número de caracteres que o usuário poderá entrar, use esta tag. Será emitido um beep se o usuário tentar exceder o tamanho máximo do campo MAXLENGTH. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Qual o seu primeiro nome?
<INPUT TYPE="text" NAME="primeiro_nome" VALUE="Antonio" SIZE="10" MAXLENGTH="15">

</FORM>


Qual o seu primeiro nome?  

------------------------------------------------------------------------
Nota: 

•O valor de NAME deve usar underscore ao invés de espaços. Espaços em nome de objetos de formulários pode causar problema quando o servidor tentar decodificar a entrada. 

•As tags em itálico são exemplos de como implementar tags de opções. Neste exemplo, elas são opcionais, mas nos exemplos que seguem algumas delas serão obrigatórias. 

•Se você tem somente um campo de texto em um formulário, a tecla ENTER no campo irá submeter o formulário, como se o usuário tivesse clicado o botão de SUBMIT. 

------------------------------------------------------------------------

Campos de Password

Elementos de entrada do tipo password são exatamente iguais aos campos text, exceto que todos os caracteres são representados por um *. 

Opções: 

VALUE="" OPCIONAL 
Usando a tag VALUE, você pode especificar o texto que você quer como default, tal como a password de um grupo. 


SIZE="" OPCIONAL 
Com esta opção, você pode mudar o tamanho do campo exibido. 


MAXLENGTH="" OPCIONAL 
Caso você queira limitar o número de caracteres que o usuário poderá entrar, use esta tag. Será emitido um beep se o usuário tentar exceder o tamanho máximo do campo MAXLENGTH. 

------------------------------------------------------------------------


<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Digite sua password (máx. 8 caracteres):
<INPUT TYPE="password" NAME="sua_senha" SIZE="8" MAXLENGTH="8">
</FORM>


Digite sua password (máx. 8 caracteres):  

------------------------------------------------------------------------
Nota: 

•Se você for usar MAXLENGTH para limitar o número de caracteres, certifique-se de especificar o mesmo para SIZE, para dar ao usuário uma dica de quanto espaço ele tem. 

•Muito embora o seu VALUE default possa ser coberto por asterísticos, o usuário pode descobri-lo examinando o código fonte do documento (uma opção em quase todos os browsers). 

------------------------------------------------------------------------

Campos Escondidos

É possível "esconder" informação de entrada dentro de um formulário com a tag HIDDEN. O campo será decodificado pelo servidor, mas não será exibido para o usuário no formulário. 


Opções: 

VALUE="" OBRIGATÓRIO 
Usando a tag VALUE, você precisa especificar o valor de texto escondido que será enviado para decodificação. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Você não pode ver nada aqui.
<INPUT TYPE="hidden" NAME="meu_nome" VALUE="Antonio">

</FORM>
Você não pode ver nada aqui.  

------------------------------------------------------------------------
Nota: 

•Muito embora o valor em HIDDEN não seja exibido no formulário, o usuário pode ver o texto escondido examinando o código fonte HTML. 

------------------------------------------------------------------------

Áreas de Texto

A tag TEXTAREA não usa a convenção INPUT TYPE="text" dos exemplos anteriores. Ao invés disso, utiliza a tag de abertura <TEXTAREA> e a tag de finalização </TEXTAREA>. 

Opções: 

ROWS="" OBRIGATÓRIO 
Especifica o número de linhas da caixa. 


COLS="" OBRIGATÓRIO 
Especifica o número de colunas da caixa. 


Texto default OPCIONAL 
Se você desejar que apareça um texto default dentro da área de texto, simplesmente escreva o texto entre as tags de abertura e finalização TEXTAREA. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Envie seus comentários e sugestões para mim:<BR>
<TEXTAREA NAME="comentários" ROWS="3" COLS="50">
Oi Antonio! Este tutorial é realmente muito bom!
</TEXTAREA>
</FORM>


Envie seus comentários e sugestões para mim:

------------------------------------------------------------------------
Nota: 

•Scrollbars aparecem para o usuário, para o caso em que se queira ultrapassar o número de linhas e colunas (ROWS e COLS) especificadas. 

•Browsers mais antigos assumem a convenção SIZE="xx,yy", ao invés de ROWS e COLS. Na medida em que novos browsers são liberados, isso deixará de ser um problema. 

•Não existe nenhuma maneira de forçar quebra de linha automática na caixa de texto. 

------------------------------------------------------------------------

Menus de Opções

A tag SELECT segue a mesma convenção que o elemento TEXTAREA, isto é, tendo suas opções entre as tags <SELECT> e </SELECT>. 


Opções: 

OPTION OBRIGATÓRIO 
Especifica uma opção do menu. 


VALUE="" OPCIONAL 
Especifica o valor da opção a ser enviado para o servidor. 
Se não estiver definido, o nome da opção é enviado como valor. 


SELECTED OPCIONAL 
Por default, a primeira opção é exibida no menu. 
Esta tag estabelece a opção default a ser exibida no menu, caso não seja a primeira opção. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Que tipo de comida você prefere?
<SELECT NAME="tipo_de_comida">
<OPTION>Baiana
<OPTION VALUE="min">Mineira
<OPTION>Árabe
<OPTION SELECTED>Italiana
<OPTION VALUE="chin">Chinesa
</SELECT>

</FORM>

Que tipo de comida você prefere?  

------------------------------------------------------------------------
Nota: 

•Se você tiver mais que 3 ou 4 opções para escolher, e o usuário puder somente selecionar UMA, então este é o melhor elemento de formulário. 

•Caso você queira usar mais de uma palavra na opção VALUE, use o underscore para separar as palavras, ao invés de separá-las por espaço. 

------------------------------------------------------------------------

Listas Múltiplas

A única diferença entre este elemento e o SELECT anterior é a introdução da opção SIZE. Ela especifica quantas linhas da lista são exibidas numa caixa. 


Opções: 

MULTIPLE OPCIONAL 
Especifica que múltiplas opções podem ser selecionadas, ao contrário do SELECT no exemplo anterior, onde somente uma opção pode ser selecionada no menu. 

SIZE="" OBRIGATÓRIO 
O número de linhas a serem exibidas numa caixa. 


OPTION OBRIGATÓRIO 
Especifica uma opção da lista. 


VALUE="" OPCIONAL 
Especifica o valor da opção a ser enviado para o servidor. 
Se não estiver definido, o nome da opção é enviado como valor. 


SELECTED OPCIONAL 
Esta tag estabelece uma opção como selecionada. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

O que você precisa comprar hoje?<BR>
<SELECT NAME="compra" MULTIPLE SIZE="5">
<OPTION>Feijão
<OPTION VALUE="PH" SELECTED>Papel higiênico
<OPTION>Legumes
<OPTION>Pão
<OPTION SELECTED>Leite
<OPTION>Manteiga
<OPTION>Frutas
<OPTION>Guardanapos
</SELECT>

</FORM>

O que você precisa comprar hoje?

------------------------------------------------------------------------
Nota: 

•Em alguns browsers, pode ser necessário pressionar a tecla CONTROL ou SHIFT para selecionar múltiplos itens. 

•Este elemento de entrada é excelente para listas com muitas opções, porque você pode controlar quantas linhas exibir simultanemente. 

•Se múltiplos itens forem selecionados, eles serão passados para o servidor com o mesmo nome. Desse modo, o programa que irá decodificar o formulário terá que reconhecer múltiplos valores associados com o mesmo nome. 

------------------------------------------------------------------------

Checkboxes

Retornando à convenção INPUT TYPE="", os CHECKBOXES são os melhores elementos para serem usados na escolha de uma entre duas opções. 


Opções: 

VALUE="" OPCIONAL 
Especifica o valor da opção a ser enviado para o servidor. 
Se não estiver definido, o valor "on" é enviado para o servidor. 


CHECKED OPCIONAL 
Esta tag estabelece uma opção como selecionada. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT TYPE="checkbox" NAME="doação" CHECKED>
 Sim, eu gostaria de fazer uma doação
<P>
<INPUT TYPE="checkbox" NAME="mailing_list">
 Sim, eu gostaria de ser incluído na sua mailing list
 
</FORM>

Sim, eu gostaria de fazer uma doação 

Sim, eu gostaria de ser incluído na sua mailing list 

------------------------------------------------------------------------
Nota: 

•Este elemento funciona melhor para resposta a perguntas do tipo "sim/não". 

•Você pode simular uma lista SELECT MULTIPLE tendo CHECKBOXES com o mesmo NAME mas VALUES diferentes. 

------------------------------------------------------------------------

Radio Buttons

Os RADIOBUTTONS usam uma notação similar aos CHECKBOXES, porém apenas uma opção pode ser escolhida entre várias. 


Opções: 

VALUE="" OBRIGATÓRIO 
Especifica o valor da opção a ser enviado para o servidor. 
Se não estiver definido, o valor "on" é enviado para o servidor. 


CHECKED RECOMENDADO 
Esta tag especifica qual radiobutton estará selecionado por default. 


------------------------------------------------------------------------
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Compilar programa com:
<DL>
<DD>Versão
<INPUT TYPE="radio" NAME="versão" VALUE="4.035">4.035
<INPUT TYPE="radio" NAME="versão" VALUE="4.036">4.036
<INPUT TYPE="radio" NAME="versão" VALUE="5.0" CHECKED>5.0
<DD>Saída para: 
<INPUT TYPE="radio" NAME="saída" VALUE="tela">tela
<INPUT TYPE="radio" NAME="saída" VALUE="impressora">impressora
</DL>

</FORM>

Compilar programa com: 

Versão: 4.035 4.036 5.0 
Saída para: tela impressora 

------------------------------------------------------------------------
Nota: 

•Como mencionado anteriormente, RADIOBUTTONS não são bons para listas com muitos itens, porque o browser tem problemas para exibir muitos elementos. Neste caso é melhor usar um objeto de menu SELECT. 

•Uma vez selecionado um radiobutton, não pode ser desativado sem escolher um outro radiobutton que tenha o mesmo NAME. A seleção default pode ser obtida com o uso do botão RESET, que será introduzido no próximo exemplo. 

•Se você tem um grupo de RADIOBUTTONS com o mesmo NAME e nenhum VALUE especificado, o servidor não será capaz de dizer qual está selecionado, uma vez que o valor default "on" será enviado. 

------------------------------------------------------------------------


Botões de Reset e Submit

Ao invés do usuário ter que corrigir cada entrada individualmente, um botão RESET pode ser usado para restaurar todos os valores de entrada aos seus defaults, como se nenhuma informação tivesse sido fornecida anteriormente. 

E finalmente, uma vez que o usuário tenha terminado de preencher todos os campos de entrada de um FORM, tem que haver alguma maneira de enviar toda informação desses campos para o servidor. O botão SUBMIT transfere toda a informação para a URL especificada no elemento ACTION. 


Opções: 

VALUE="" OPCIONAL 
Especifica o texto a ser exibido no botão. 
Se não estiver definido, os valores "Reset" e "Submit Query" serão exibidos para os botões RESET e SUBMIT, respectivamente. 


NAME="" OPCIONAL 
Se NAME estiver definido em um botão SUBMIT, o formulário irá transferir o conteúdo de VALUE, assim permitindo a você ter vários botões SUBMIT cada um para um propósito diferente. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/nenhuma">

Qual o seu primeiro nome? <INPUT TYPE="text"><BR>
Pressione este botão: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">

</FORM>

Qual o seu primeiro nome? 
Pressione este botão: 

Nota: 

•O programa para o qual esta informação é enviada via botão SUBMIT não existe, por isso o seu browser deve estar reportando um erro. Normalmente, o programa de decodificação envia de volta um documento HTML após ter processado sua informação. 

•Nem todos os browsers suportam mútilplos botões SUBMIT. Por isso, use o botão SUBMIT somente para transmitir a informação de entrada. 

------------------------------------------------------------------------

Imagens como Botões

Um elemento de formulário pouco documentado e usado é o IMAGE, que permite a você usar uma imagem interna como um botão SUBMIT, além de transferir as coordenadas onde foi clicada. 


Opções: 

SRC="" OBRIGATÓRIO 
Esta tag diz ao formulário onde a imagem vai ser exibida e usada. 
Similar à tag IMG SRC="" do HTML. 


NAME="" OPCIONAL 
Esta tag irá concatenar o texto definido por NAME às coordenadas, resultando em "texto.X" e "texto.Y" como nomes. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/faznada">

Clique em uma parte da imagem<BR>
<INPUT TYPE="image" SRC="/images/icons.gif">

</FORM>

Clique em uma parte da imagem

------------------------------------------------------------------------
Nota: 

•Diferente de um IMAGEMAP que somente aceita um conjunto de coordenadas, informações adicionais do FORM, tais como campos de texto e menus de opções, podem ser transmitidas para o servidor usando esta tag. 

•Novamente, o programa para o qual esta informação é enviada não existe, por isso o seu browser deve estar reportando um erro. 

•Nem todos os browsers suportam esta tag. Use-a com cautela. 

------------------------------------------------------------------------
Antonio Maia <maia@vmesa.uerj.br>