TPI 1 - HTML - Aula 11 - Formulários

TPI 1 - HTML - Aula 11 - Formulários

Os formulários permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informações que você acredite ser necessário para o seu site.
Os formulários são dividos em 2 partes. Uma parte onde descrevemos o código fonte em HTML (os campos, identificadores, botões, textos, etc) e um script ou aplicativo que possa processar as informações enviadas, como por exemplo um script em CGI.

Sem um script você apenas consegue enviar as informações digitada para seu e-mail e não guardá-las em um banco de dados, ou outra ação mais complexa. A tag principal para iniciar um Formulário é a TAG FORM.

Esta tag tem vários parâmetros, vamos ver uma sintaxe completa desta TAG.

<form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario">

</form> Vamos entender esta TAG :

FORM

Indica que estamos iniciando um Formulário

ACTION

Indica a ação que formulário terá, neste caso, o formulário terá os dados enviados para seu e-mail. Pode ser indicado também um servidor e o programa CGI que irá processar o formulário.

SUBJECT

É o assunto do e-mail.

METHOD

É o metodo da troca de dados; qual método o servidor usará para recerber o formulário. Os métodos podem ser POST ou GET, neste caso é POST, porque estamos enviando informação para o provedor. Já o método GET, faz com que o conteúdo do formulário seja anexado ao endereço da URL.

ENCTYPE

É como o formulário será enviado, aqui os dados serão formatados como texto puro.

CAMPOS DO FORMULÁRIO

TIPO TEXTO

<INPUT>

Define um campo de entrada em que o usuário entra com as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável, que possui nome e tipo específicos. Veja como seria :

&lt;FORM&gt; DIGITE SEU NOME &lt;input type="text" name="var_nome" size="35" maxlength="30" value="qq coisa"&gt; &lt;/FORM&gt;

TYPE="TEXT"

type = tipo - text = texto, ou seja o tipo de informação que aquele local receberá é do tipo texto.

NAME="VAR_NOME"

name = nome - var_nome é a variável que irá guardar o que for digitado naquele campo.

SIZE="35"

tamanho do objeto será de 35 pixels

MAXLENGTH="30"

comprimento máximo de caracteres será de 30.

VALUE = "QUALQUER COISA"

value = valor, ou seja, o campo já vem preenchido com o que vier neste parâmetro, neste caso virá escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. Só utilize o value caso queira que um campo já venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.

Veja como ficaria :

DIGITE SEU NOME 

TIPO SENHA

E se você quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando é idêntico ao comando INPUT TEXT. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco.
Vamos ver como seria :

&lt;FORM&gt; DIGITE A SENHA &lt;input type="password" name="var_senha" size="10" maxlength="6"&gt; &lt;/FORM&gt;

TYPE="PASSWORD"

type = tipo - password = senha, ou seja o tipo de informação que aquele local receberá é do tipo senha, exibirá asterisco ao invés do caracter digitado.

NAME="VAR_SENHA"

name = nome - var_senha é a variável que irá guardar o que for digitado naquele campo.

SIZE="35"

tamanho do objeto será de 10 pixels.

MAXLENGTH="6"

comprimento máximo de caracteres será de 6.

Veja como ficaria :

DIGITE A SENHA 

BOTÃO DE RADIO

E para fazer uma seleção exclusiva de uma lista de opções ? Precisamos inserir um "botão de rádio", que são associados a uma única variável. O conteúdo de um dos campos é atribuído à variável. Apenas um campo pode ser marcado, vamos ver um exemplo :

&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name = "var_nome"&gt; Estado civil: &lt;input type= "radio" name="civil" value = "solteiro" checked&gt; Solteiro &lt;input type= "radio" name="civil" value = "casado"&gt; Casado &lt;input type= "radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type= "radio" name="civil" value = "viúvo"&gt; Viúvo&lt;br&gt; &lt;/FORM&gt;
Observe que todas as variáveis receberam o mesmo nome: CIVIL. Veja também que o único comando que tem o parâmetro CHECKED é o que contém a opção de solteiro,ou seja, esta opção já vem marcada como padrão.

Estas linhas reproduzirão :

Digite seu nome: 
Estado civil:  Solteiro  Casado  Divorciado  Viúvo

OS NOMES DAS OPÇÕES OBRIGATÓRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITARÁ MARCAR VÁRIAS OPÇÕES !!!

CHECKBOX

Para poder selecionar várias opções, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferença significativa. Nele mais de um campo associado a uma variável pode ser selecionado. Veja o exemplo:

&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name="var_nome"&gt; Estado civil: &lt;input type="radio" name="civil" value = "solteiro" cheked&gt; Solteiro &lt;input type="radio" name="civil" value = "casado"&gt; Casado&lt; &lt;input type="radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type="radio" name="civil" value = "viúvo"&gt; Viúvo Documentos : &lt;INPUT TYPE="checkbox" name="teste" value="1"&gt; Carteira de Trabalho &lt;INPUT TYPE="checkbox" name="teste" value="2"&gt; CIC &lt;INPUT TYPE="checkbox" name="teste" value= 3"&gt; Carteira de Identidade &lt;/FORM&gt;

Veja o que isso reproduz :

Digite seu nome: Estado civil:
 Solteiro  Casado  Divorciado  Viúvo
Documentos :
 Carteira de Trabalho
 CIC
 Carteira de Identidade

LISTA DE OPÇÕES

o comando <SELECT> ... </SELECT> define e exibe uma lista de itens que podem ser selecionados pelo usuário.

Cargo pretendido: 

&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;

Veja como ficaria :

 ANALISTA SÊNIOR PROGRAMADOR  CLIPPER PROGRAMADOR HTML OPERADOR USUARIO 

Fazer uma opção já vir selecionada :

Cargo pretendido:

&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;

Reproduz:

 ANALISTA SÊNIOR  PROGRAMADOR  CLIPPER PROGRAMADOR HTML OPERADOR USUARIO 

Mostrar mais de uma linha.

Quando o parâmetro SIZE é omitido, a lista somente é aberta se a seta for pressionada. Se este parâmetro for especificado, ela é exibida aberta, mostrando a quantidade de linhas especificadas pelo parâmetro, independente da quantidade de itens da lista. 

&lt;SELECT NAME= "CARGO" size="3"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;

Veja o resultado :

 ANALISTA SÊNIOR  PROGRAMADOR  CLIPPER PROGRAMADOR HTML OPERADOR USUARIO 

Selecionar mais de uma opção
&lt;SELECT NAME = "TESTE" SIZE="7" MULTIPLE&gt;&lt;br&gt; &lt;OPTION&gt;item 1&lt;br&gt; &lt;OPTION&gt;item 2&lt;br&gt; &lt;OPTION&gt;item 3&lt;br&gt; &lt;OPTION&gt;item 4&lt;br&gt; &lt;OPTION&gt;item 5&lt;br&gt; &lt;OPTION&gt;item 6&lt;br&gt; &lt;OPTION&gt;item 7&lt;br&gt; &lt;OPTION&gt;item 8&lt;br&gt; &lt;OPTION&gt;item 9&lt;br&gt; &lt;OPTION&gt;item 10&lt;br&gt; &lt;OPTION&gt;item 11&lt;br&gt; &lt;OPTION&gt;item 12&lt;br&gt; &lt;OPTION&gt;item 13&lt;br&gt; &lt;OPTION&gt;item 14&lt;br&gt; &lt;OPTION&gt;item 15&lt;br&gt; &lt;/SELECT&gt;

O Resultado será :

 item 1 item 2 item 3 item 4 item 5 item 6 item 7 item 8 item 9 item 10 item 11 item 12 item 13 item 14 item 15 

ÁREA DE TEXTO

Define uma caixa de digitaçao, onde o usuário pode digitar livremente um texto.

&lt;form&gt; digite seus comentários:&lt;br&gt; &lt;TEXTAREA NAME="comentarios" ROWS="7" COLS="50"&gt; &lt;/TEXTAREA&gt;

Abaixo, o resultado :

digite seus comentários:

ROWS

Número de linhas que terá a área d e texto.

COLS

Número de colunas que terá a área de texto.

ENVIANDO DADOS

O Botão SUBMIT é responsável por enviar os dados do formulário para o e-mail que está no parâmetro ACTION da TAG FORM.


 ou

LIMPANDO FORMULÁRIO

O Botão RESET limpa todo o formulário, voltando os valores aos padrões definidos inicialmente.