You are on page 1of 27

HTML

Professora: Hanna Srgia Sousa de Magalhes


E-mail: hanna_magalhaes@yahoo.com.br

Aula 06 - HTML
Formulrios Eletrnicos

Formulrios Eletrnicos
Voc vai aprender a criar "Formulrios Eletrnicos",
que permitem um usurio do Web submeter
informaes para o provedor do servio.
Existem vrios tipos de campos de entrada, como:
campos de entrada de texto
menus de mltipla escolha ou escolha nica
botes sim-ou-no
botes para submisso ou limpeza de formulrio

Formulrios Eletrnicos
Cada uma destes campos tem funcionalidade
prpria e voc vai aprender em que situao
utilizlos em seus formulrios.
Se voc j conhece HTML, as marcaes utilizadas
em formulrios seguem a mesma conveno, e
portanto, ser fcil aprender.

Formulrios Eletrnicos
Um formulrio uma rea que pode conter
elementos de formulrio.
Os elementos de formulrio so elementos que
permitem o usurio entrar informao (como
campos de texto, campos derea de texto, menus
drop-down, botes radiais, caixas de seleo, etc.)
em um formulrio.
Um formulrio definido pela tag <form>.
EX:
<FORM>
<INPUT>
<INPUT>
</FORM>

Principais atributos do
marcador <FORM>
1 NAME, METHOD e ACTION
<FORM NAME=nome do formulrio METHOD=valor
ACTION=tratador do formulrio>elementos do formulrios</FORM>
NAME: Especifica o nome do formulario. Util em casos de validacao
dos campos, por exemplo, quando se utiliza uma linguagem de
scripts como JavaScript.
METHOD: Metodo que define como os dados serao transmitidos para
o programa que ira processa-los. Devem ter valores GET ou POST,
sendo que a diferenca entre estes dois valores esta no modo como
os dados sao empacotados. Normalmente o programa que sera
utilizado para processar o formulario ja especifica o valor para o
atributo METHOD.
ACTION: Indica o endereco do programa que recebera os dados do
formulario.
Exemplo:
<FORM NAME=maladireta METHOD=post
ACTION=maladireta.asp>

Marcadores relativos aos


campos de formulrio
Utilizado para indicar um novo campo de formulario e
diferenciado pelo seu tipo.
1 INPUT, TYPE, NAME, VALUE, MAXLEGNGHT e CHECKED
<INPUT TYPE=tipo NAME=nome VALUE=valor
SIZE=tamanho em pixels
MAXLENGHT=tamanho maximo em pixel>
INPUT: Especifica um campo de entrada de dados.
TYPE: Atributo mais importante do marcador por definir o tipo
de elemento a ser inserido no formulario.
NAME: Nome do elemento, Util em casos de validacao de
campos, por exemplo, quando se usa uma linguagem de
scripts como JavaScript.
VALUE: Valor que pode ser predefinido para o campo.
MAXLENGHT: Comprimento maximo do campo.
CHECKED: Em casos de caixas de checagem, predefine como
checada.

Codificao bsica
Como vimos, um formulrio comea com a
marcao <FORM> e termina com </FORM>.
Outros itens devem ser especificados:
Primeiro, o formulrio precisa saber como enviar a
informao para o servidor. Existem dois mtodos,
GET e POST.
METHOD="GET"
A maioria dos documentos HTML so recuperados
a partir da requiso de uma nica URL ao servidor.
Assim, um formulrio que utilize este mtodo,
envia toda sua informao ao final da URL
ativada.

Codificao bsica
METHOD=POST"
Este mtodo transmite toda a informao
fornecida via formulrio, imediatamente aps a
URL ativada. Ou seja, quando o servidor recebe
uma ativao de um formulrio utilizando POST
ele sabe que precisa continuar "ouvindo" para
obter a informao. Este o melhor mtodo.

Codificao bsica
Segundo, o formulrio precisa saber para onde
enviar a informao. Esta a URL sendo ativada a
partir do formulrio, e ela referenciada atravs
da marcao ACTION. Esta URL em geral aponta
para um script CGI que ir receber e decodificar
os resultados. Lembre-se que se voc est
referenciando um script que reside no mesmo
servidor do formulrio, voc no precisa incluir a
URL completa.
ACTION="/cgi-bin/post-query" para um script no seu
servidor
ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query"
para um script no servidor do CR/DF

Codificao bsica
Aps voc construir estas marcaes, seu formulrio
geralmente ter a seguinte estrutura:
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Marcaes de campos de entrada e HTML em geral
</FORM>
Observe que este formulrio utiliza o mtodo POST e envia
as informaes digitadas para um script local chamado
post-query no diretrio /cgi-bin do servidor.
Outra informao importante: cada marcao de entrada
em um formulrio tem uma opo NAME associada, de tal
forma que o script saiba qual o nome, isto , como chamar
cada valor digitado.
Certamente voc pode definir mais de um campo de
entrada textual ou menu dentro de um formulrio, mas
certifique-se de que cada um possui um nome diferente.

Entrada (Input)
A tag de formulrio mais usada a tag <input>.
O tipo de input especificado com o atributo type
(tipo). Os tipos de input mais usados so
explicados a seguir.
O valor TEXT no atributo TYPE de um INPUT indica
que o campo sera de texto, ou seja, um campo
onde o usuario podera entrar com dados.

Campos de Texto
Os campos de texto so usados quando voc quer que
o usurio digite letras, nmeros, etc. em um formulrio.
Ex:
<form>
Primeiro nome:
<input type="text" name="firstname"> <br>
ltimo nome:
<input type="text" name="lastname">
</form>
Obs: observe que em muitos navegadores, o
comprimento do campo de texto de 20 caracteres por
padro (default).

Botes Radiais
Botes Radiais so usados quando voc quer que
o usurio selecione uma entre uma quantidade
limitada de escolhas.
Ex:
<form>
<input type="radio" name="sex" value="male">
Masculino <br>
<input type="radio" name="sex" value="female">
Feminino
</form>
Observe que somente uma opo pode ser
escolhida.

Caixas de Seleo
As Caixas de Seleo so usadas quando voc
quer que o usurio selecione uma ou mais opes
de uma quantidade limitada de escolhas.
Ex:
<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta <br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>

O Atributo Ao do Formulrio
(Form's Action) e o Boto Enviar
(Submit)

Quando o usurio clica no boto "Enviar", o contedo do


formulrio enviado para outro arquivo. O atributo de ao do
formulrio define onome do arquivopara o qual enviar o
contedo. O arquivo definido no atributo action geralmente faz
algo com a entrada recebida.
Ex:
<form name="input" action="html_form_action.asp"
method="get">
Nome do Usurio:
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>
Se voc digitar alguns caracteres no campo de texto acima, e
clicar noboto Enviar", voc ir enviar a sua entrada para a pgina
chamada "html_form_action.asp". Esta pgina ir mostrar-lhe a
entrada recebida.

Caixa drop down simples


Este exemplo demonstra como criar uma caixa
drop down simples numa pgina HTML. A caixa
drop-down uma lista selecionvel.
Ex:
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>

rea de texto
Este exemplo demonstra como criar uma rea de texto (um
controle de entrada de texto multi-linhas). Um usurio pode
escrever texto na rea de texto. Numa rea de texto voc
pode escrever uma quantidade ilimitada de caracteres.
Ex:
<p>
Este exemplo no pode ser editado
porque nosso editor usa uma textarea
para a entrada de dados, e o seu
navegador no permite uma rea de
texto dentro de uma rea de texto.
</p>
<textarea rows="10" cols="30">
O gato estava brincando no jardim.

Criar um boto
Este exemplo demonstra com criar um boto. No
boto voc pode definir o seu prprio texto.
Ex:
<form>
<input type="button" value="Oi mundo!">
</form>

Conjunto de campo em
torno dos dados
Este exemplo demonstra como desenhar uma borda com um
ttulo em torno dos seus dados.
Ex:
<fieldset>
<legend>
Informaes de sade:
</legend>
<form>
Altura <input type="text" size="3">
Pso <input type="text" size="3">
</form>
</fieldset>
OBS:
Se no houver borda em torno do formulrio de entrada, o seu
navegador muito antigo.

Formulrio com Senha


<INPUT TYPE=PASSWORD>
Para o valor PASSWORD (senha) no atributo TYPE aplicamse todos os atributos do tipo TEXT exceto que todas as
letras digitadas aparem com um asterisco.
Exemplo:
<FORM>
<p>Digite sua senha:<INPUT TYPE=PASSWORD
NAME=Senha SIZE=8 MAXLENGHT=8></p>
</FORM>O atributo SIZE configura o tamanho do campo e
e baseado no numero de caracteres.
Este valor nao limita o tamanho do campo, somente define
o tamanho em que sera mostrado na pagina. Quem define
o numero maximo de caracteres que podem ser digitados e
o atributo MAXLENGHT, que e opcional.

Caixa de texto com vrias


linhas
<TEXTAREA NAME=nome ROWS=numero de linhas
COLS=nmeros de colunas></TEXTAREA>
O marcador TEXTAREA permite definir um campo de texto
com varias linhas.
ROWS: define o numero de linhas da caixa de texto.
COLS: define quantos caracteres (colunas) cada linha
possui.
NAME: define o nome da caixa de texto.
Exemplo:
<FORM>
<p>Entre com seu comentrio:</p>
<p><TEXTAREA NAME=comentario ROWS=3
COLS=20></TEXTAREA>
</p>
</FORM>

Tags de Formulrio
Tag
Descrio
<form> Define um formulrio para entradas do usurio
<input> Define um campo de entrada
<textarea> Define uma rea de texto (um controle de
entrada de texto multi-linhas)
<label> Define um rtulo para um controle
<fieldset> Define um conjunto de campos
<legend> Define um ttulo para um conjunto de campos
<select> Define uma lista selecionvel (uma caixa dropdown)
<optgroup> Define um grupo de opo
<option> Define uma opo em uma caixa drop-down
<button> Define um boto para pressionar

Vamos exercitar....