HTML AvançadoFundaçãoBradesco Formulários

Prévia do material em texto

Módulo 02 - Criando e formatando formulários
Introdução
No módulo anterior você aprendeu a trabalhar com a tag <TABLE> e seus principais atributos. 
Neste, aprenderá a criar formulários. O formulário permite ao usuário interagir com o
responsável pelo site.
• criar um formulário;
• Inserir campos de entrada de dados;
• Inserir lista e menus de opções;
• Inserir botoes e caixas de opção;
O que é um formulário?
O formulário nada mais é que um questionário que permite ao usuário participar de uma
pesquisa, se cadastrar em sites diversos, entrar em contato para esclarecer dúvidas, realizar
compras, entre tantas outras opções. 
Por exemplo, aqui na Escola Virtual nós usamos um formulário para receber seus dados
quando você se cadastrou. 
No entanto, os formulários apenas coletam os dados, sem processá-los. Quem faz isso são
scripts de processamento (programas armazenados no servidor) e o navegador exibe o resultado em
sua janela. 
Neste módulo, trataremos apenas da criação do formulário. 
Criando um formulário
Para que você possa criar um formulário em HTML, utilize a tag FORM. 
A sintaxe fica assim:
<FORM atributos> 
(conteúdo do formulário) 
</FORM>
Entre as tags que iniciam e encerram o formulário, você deve inserir as tags que criam
campos de entrada, formatam o texto e fornecem instruções sobre o que fazer com os dados que são
inseridos. 
Nas próximas telas, você conhecerá os atributos da tag <FORM>. 
Atributo ACTION
O primeiro atributo utilizado com a tag <FORM> é o ACTION. Ele especifica a URL do script que
processará os dados do formulário. 
 
A sintaxe é a seguinte: <FORM ACTION = "URL"> 
Observe os exemplos abaixo:
• <form action="mailto:endereco@eletronico.com.br"> Neste exemplo, os dados serão
enviados ao endereço de e-mail especificado.
• <form action="processa.php> Neste caso os dados do formulário serão processados por
meio de um código PHP. 
Atributo METHOD
O atributo METHOD especifica a maneira de envio dos dados do formulário para o servidor
web, para que sejam processados. 
Existem dois métodos que podem ser utilizados: POST e GET.
METHOD="POST"
Se o valor do atributo METHOD for definido como POST, o navegador enviará diretamente o fluxo
de dados para o script CGI no servidor web. É mais utilizado, porque permite a transmissão de uma
maior quantidade de dados ao servidor web. 
METHOD="GET" 
Por outro lado, se o atributo METHOD for definido como GET, o fluxo de dados será anexado à
URL especificada no atributo ACTION e enviado ao servidor como uma única URL. O valor GET é
utilizado para respostas únicas, como uma string de texto. 
A sintaxe completa da tag <FORM> fica assim: <FORM ACTION="url" METHOD="get" ou
"post">
Objetos do formulário
Um formulário é composto por vários elementos responsáveis por receber as informações
inseridas pelo usuário. 
Essas informações são de diferentes tipos de entrada, como: 
Texto: Campo tipo texto; 
Senha: Campo tipo senha:***** 
Única escolha: conjunto de opções de única escolha (x)opção 1;() opção 02 
Múltipla escolha: Conjunto de opções de múltipla escolha:(x)opção 1;(x) opção 02. 
Tag INPUT e seus atributos
Você utilizará a tag <INPUT> para criar os diferentes tipos de campos de entrada de dados no
formulário. Veja alguns de seus atributos:
type: Especifica o tipo de controle a ser criado. Se nada for especificado o padrão é "text". 
Value: Especifica o valor inicial do controle. É opcional, com exceção de quando o type é
"radio"ou"checkbox". 
name: Nomeia cada campo do formulário para que o script possa manipular os dados. 
Maxlength: Quando o valor de type for "text" ou "password", eles estabelecem o número máximo
de caracteres do campo. O valor padrão é limitado. 
Src:Quando o valor de type for "image", este atributo especifica a localização da imagem usada
para decorar o botão de enviar. 
checked: Quando type tem o valor "radio" ou "checkbox", este atributo significa que o botão está
selecionado. 
size: Especifica o tamanho inicial do controle. A largura é dada em pixels, com exeção de quando o
valor for "text" ou "password". Nestes casos, o valor refere-se ao número de caracteres.
Os possíveis valores de TYPE
O atributo TYPE, como comentamos, especifica o tipo de controle ou de campo que será criado.
Portanto, você já deve ter entendido que ele é o mais importante. 
Imagine criar um controle tipo texto para armazenar datas de nascimento. Seria bem difícil
consultar, por exemplo, os usuários com determinada idade, não é mesmo? 
Observe, ao lado, os tipos de controle de entrada que podem ser criados.
Image: Cra um botão de enviar baseado em uma imagem específica, cuja URL deve ser fornecida 
File: Cria um controle para seleção de arquivo. O valor do atributo deve ser configurado como o
nome do arquivo. 
Reset: Cria um botão de reset, que limpa todos os campos. 
button: Cria um botão para ser pressionado.O atributo deve ter o nome do botão. 
Submit: Cria um botão de enviar. 
Password: Cria um campo texto sem exibir o que está sendo digitado. 
radio: Cria um botão de escolha única. 
text: cria campo de texto de uma linha. 
checkbox: Cria caixa de seleção. 
Hidden: Cria controle oculto.
O valor do atributo TYPE não deve ser inserido entre aspas. Caso nenhum valor seja definido, o
campo será criado como texto.
Inserindo um campo texto
Neste módulo, você aprenderá a adicionar um campo de texto, um campo de senha e um campo
oculto no formulário. 
Por exemplo, em um formulário de compras on-line, podemos usar um campo de texto para receber
o nome do cliente. Para isso, você usa o valor TEXT no atributo TYPE da tag <INPUT>. 
A sintaxe para adicionar o campo do nome do cliente é exibida abaixo: 
<imput type=text name="nome" size="20" maxlenght="50"> 
<imput type=text: type = valor que especifica o tipo de entrada como texto. 
name="nome": Name = Nome da variável que armazena os dados. 
size="20": size = tamanho do campo, em número de caracteres. 
maxlenght="50">; Maxlnght = número máximo de caracteres qe podem ser inseridos pelo usuário.
Atributo VALUE
Por padrão, os navegadores exibem uma caixa de texto vazia no formulário. Caso exista a
necessidade de exibir um texto padrão, deve-se usar o atributo VALUE, como exemplificado
abaixo:
<INPUT TYPE = text NAME="uf" SIZE="2" VALUE ="SP"> 
<HTML><HEAD> <TITLE>Valor padrão</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=TEXT NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Estado: <INPUT TYPE =text NAME="uf" SIZE="2"
VALUE="SP"></FONT></P></FORM> </BODY> 
</HTML>
Inserindo um campo de senha
Agora, vamos demonstrar como adicionar um campo de senha em um formulário. Este tipo de
campo é utilizado para que as informações inseridas não sejam exibidas na tela. 
Por exemplo, em um formulário de compra on-line, usa-se o campo de senha para que o usuário
entre com os dados sem que ninguém veja. Para isso, é utilizado o valor PASSWORD no atributo
TYPE. 
 
A sintaxe para adicionar um campo de senha em um formulário está exibida abaixo. 
<INPUT TYPE=password NAME="cartao" SIZE="16">
Código HTML:
<HTML><HEAD> <TITLE>Campo senha</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=text NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Nº do cartão de crédito <INPUT TYPE=text NAME="nun_cartao"
SIZE="16"></P> <P>Senha: <INPUT TYPE=password NAME="senha"
SIZE="6"></P></FORM> </BODY> 
</HTML>
Inserindo botões de escolha única
Radio buttons são utilizados para permitir ao usuário selecionar uma opção única entre um conjunto
de opções exibidas em um formulário. 
Por exemplo, no formuláriode pedido on-line, você pode usar um conjunto de radio buttons para
verificar a bandeira do cartão de crédito utilizado pelo cliente. 
Para adicionar um radio button em um formulário, é usado o valor RADIO no atributo TYPE da tag
INPUT. A sintaxe é a seguinte: 
<INPUT TYPE=radio NAME="variável"> 
Para exibir uma das opções selecionadas como padrão, usamos o atributo CHECKED na tag
<INPUT>. 
Código HTML 
<HTML><HEAD> <TITLE>Campo senha</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=text NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Nº do cartão de crédito <INPUT TYPE=text NAME="nun_cartao"
SIZE="16"></P> <P>Senha: <INPUT TYPE=password NAME="senha" SIZE="6"></P>
<P>Selecione a bandeira do cartão de crédito:<BR> <INPUT TYPE=radio NAME="vi"
CHECKED>VISA<BR> <INPUT TYPE=radio NAME="mst">MASTERCARD</P> </FORM>
</BODY> 
</HTML> 
Inserindo botões de múltipla escolha
Agora, você verá como adicionar um conjunto de checkboxes (botões de múltipla escolha) para
permitir ao usuário selecionar várias opções. 
Em um formulário de pedido on-line, podemos usar um conjunto de checkboxes para obter a
informação sobre os horários de entrega do pedido. 
Para adicionar um checkbox, basta especificar o valor CHECKBOX no atributo TYPE. 
A sintaxe deste comando é assim:
<INPUT TYPE=checkbox" NAME="VARIÁVEL">valor
NAME="senha" SIZE="6"></P> <P>Selecione a bandeira do cartão de crédito:<BR> <INPUT
TYPE=radio NAME="vi" CHECKED>VISA<BR> <INPUT TYPE=radio
NAME="mst">MASTERCARD</P> <P>Selecione horário de entrega:<BR> <INPUT
TYPE=checkbox NAME="horario1" SIZE="1">8h às 12h<BR> <INPUT TYPE=checkbox
NAME="horario2" SIZE="1">13h às 15h<BR> <INPUT TYPE=checkbox NAME="horario2"
SIZE="1">16h às 18h</P> </FORM> </BODY> 
</HTML>
Inserindo uma área de texto
Vamos verificar como adicionar uma área de texto maior em um formulário, para receber várias
linhas de texto. Podemos utilizar este campo para registrar a referência do endereço de um cliente. 
A tag <TEXTAREA></TEXTAREA> é a responsável pela criação desse campo especial. 
Os atributos ROWS, que especifica o número de linhas (altura) e COLS, que especifica o número
de colunas (largura) da área de texto, são utilizados com essa tag. A sintaxe está exibida abaixo: 
<TEXTAREA NAME = "nome" ROWS = "número" COLS = "número" NAME="variável">
Descrição </TEXTAREA>
Código HTML:
<HTML><HEAD> <TITLE>Campo senha</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=text NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Nº do cartão de crédito <INPUT TYPE=text NAME="nun_cartao"
SIZE="16"></P> <P>Senha: <INPUT TYPE=password NAME="senha" SIZE="6"></P>
<P>Selecione a bandeira do cartão de crédito:<BR> <INPUT TYPE=radio NAME="vi"
CHECKED>VISA<BR> <INPUT TYPE=radio NAME="mst">MASTERCARD</P>
<P>Selecione horário de entrega:<BR> <INPUT TYPE=checkbox NAME="horario1"
SIZE="1">8h às 12h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">13h às
15h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">16h às 18h</P><P>Endereço:
<INPUT TYPE=TEXT NAME="end" SIZE="30"</P><P>Referência: <TEXTAREA
NAME="ref" ROWS="2" COLS= "40"></TEXTAREA></P></FORM> </BODY> 
</HTML>
Botões SUBMIT e RESET
<HTML><HEAD> <TITLE>Campo senha</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=text NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Nº do cartão de crédito <INPUT TYPE=text NAME="nun_cartao"
SIZE="16"></P> <P>Senha: <INPUT TYPE=password NAME="senha" SIZE="6"></P>
<P>Selecione a bandeira do cartão de crédito:<BR> <INPUT TYPE=radio NAME="vi"
CHECKED>VISA<BR> <INPUT TYPE=radio NAME="mst">MASTERCARD</P>
<P>Selecione horário de entrega:<BR> <INPUT TYPE=checkbox NAME="horario1"
SIZE="1">8h às 12h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">13h às
15h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">16h às 18h</P><P>Endereço:
<INPUT TYPE=TEXT NAME="end" SIZE="30"</P><P>Referência: <TEXTAREA
NAME="ref" ROWS="2" COLS= "30"></TEXTAREA></P><INPUT TYPE=submit
VALUE="Enviar"><INPUT TYPE=reset VALUE="Limpar"></FORM> </BODY> 
</HTML>
Enviar: 
Em um formulário, o botão SUBMIT envia ao servidor web a informação digitada pelo usuário para
ser processada pelo script CGI correspondente. 
Para criar um botão de enviar, usamos o valor SUBMIT no atributo TYPE da tag INPUT. 
Para trocar o texto padrão do botão, insira o atributo VALUE e defina o novo texto, como
demonstrado abaixo: 
<INPUT TYPE=submit VALUE="Enviar">
O botão RESET limpa as entradas que foram feitas em um formulário, ou seja, apaga as
informações inseridas em todos os campos. 
Para adicionar um botão RESET em um formulário, utilize o valor RESET no atributo TYPE da tag
INPUT. 
Também é possível mudar o texto padrão, utilizando-se o atributo VALUE e o texto desejado,
conforme ilustrado abaixo: 
<INPUT TYPE=reset VALUE="Limpar">
Inserindo um campo oculto
Agora, você verá como adicionar um campo oculto em um formulário para enviar uma palavra-
chave, um número de validação ou qualquer string, para o script CGI. 
Por exemplo, no formulário de pedidos on-line, podemos utilizar um campo oculto para enviar uma
palavra-chave, que valide o número do CPF do cliente. 
Para adicionar este campo, incluimos o valor HIDDEN no atributo TYPE. 
A sintaxe fica assim: 
<INPUT TYPE=HIDDEN NAME="VARIÁVEL" VALUE="VALOR"> 
Código HTML:
<HTML><HEAD> <TITLE>Campo senha</TITLE> </HEAD> 
<BODY> <FORM ACTION="email@email.com" METHOD="get"> <P><FONT
FACE="CALIBRI">Nome: <INPUT TYPE=text NAME="nome" SIZE="25"
MAXLENGHT="50"></P> <P>Nº do cartão de crédito <INPUT TYPE=text NAME="nun_cartao"
SIZE="16"></P> <P>Senha: <INPUT TYPE=password NAME="senha" SIZE="6"></P>
<P>Selecione a bandeira do cartão de crédito:<BR> <INPUT TYPE=radio NAME="vi"
CHECKED>VISA<BR> <INPUT TYPE=radio NAME="mst">MASTERCARD</P>
<P>Selecione horário de entrega:<BR> <INPUT TYPE=checkbox NAME="horario1"
SIZE="1">8h às 12h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">13h às
15h<BR> <INPUT TYPE=checkbox NAME="horario2" SIZE="1">16h às 18h</P><P>Endereço:
<INPUT TYPE=TEXT NAME="end" SIZE="30"</P><P>Referência: <TEXTAREA
NAME="ref" ROWS="2" COLS= "30"></TEXTAREA></P><INPUT TYPE=submit
VALUE="Enviar"><INPUT TYPE=reset VALUE="Limpar"><INPUT TYPE=hidden
NAME="cpf" VALUE="verdadeiro"></FORM> </BODY> 
</HTML>
Lista de opções ou menu?
Se você precisar apresentar várias opções para o usuário e não tiver muito espaço para isso, você
pode utilizar uma lista de opções ou um menu. 
Ambas as opções são criadas pela mesma tag <SELECT></SELECT>. Observe os exemplos ao
lado e analise a diferença entre eles.
MULTIPLE 
<SELECT MLTIPLE NAME="Nome da lista"> 
MLTIPLE: Exibe a lista sempre aberta. 
NAME: Atributo que identifica a lista. 
<OPTION SELECTES VALUE="valor1"> valor visualizado 
</select> 
 
option: Cria cada item da lista 
selected: Indica o valor padrão da lista. 
Value="valor1"> = value: Valor que será retornado.
A lista de opções serve para controlar o número de opções exibidas, pois é possível definir sua
altura com o atributo SIZE.
Código HTML:
<HTML><HEAD> <TITLE>Lista de opções</TITLE> </HEAD> 
<BODY> <H3>EXEMPLO DE LISTA DE OPÇÕES</H3><H4>Escolha a cidade que deseja
conhecer</H4><FORM> <SELECT NAME="cidades" SIZE="4"><OPTION>Londres
<OPTION>Paris<OPTION>Roma <OPTION>Madri</SELECT> </FORM> </BODY> 
</HTML>
A diferença do menu para a lista de opções é que apenas uma linha com uma seta para baixo é
exibida quando o navegador carregao formulário.
Código HTML:
<HTML><HEAD> <TITLE>Menu de opções</TITLE> </HEAD> 
<BODY> <H3>EXEMPLO DE MENU</H3><H4>Escolha a cidade que deseja
conhecer</H4><FORM> <SELECT NAME="cidades"><OPTION>Londres
<OPTION>Paris<OPTION>Roma <OPTION>Madri</SELECT> </FORM> </BODY> 
</HTML>
Exercício
Com base nos conhecimentos adquiridos nos módulos 1 e 2, desenvolva um código HTML que crie
um formulário de cadastramento, de acordo com a imagem ao lado. 
Após concluir, salve o arquivo como Exerc1.html e visualize-o no navegador. 
Como você já sabe, publicaremos o código que gerou o formulário ao final do curso.