______________________________________________________________________

ETEC DR JOS LUIZ VIANA COUTINHO - JALES

05 Formulrios

Prof. Evelyn K. R. Matos

email: evelynkrm@gmail.com

Formulrios

A funo bsica de um formulrio em um

documento (X)HTML o de colher dados
vindos do usurio.
Uma das atividades mais comuns dos
usurio da web realizar cadastros e
responder entrevistas.

Evelyn K.R.M. | Etec Jales 2014

Muitas empresas usam o sistema de pesquisa online onde o usurio responde,

atravs de formulrios, uma srie de perguntas que mais tarde, podero se
transformar em uma massa de dados teis para identificar perfis de novos
consumidores, tendncias e novos mercados.

Evelyn K.R.M. | Etec Jales 2014

Formulrios

Para criar um formulrio, necessrio o uso

do elemento form.
Esse
elemento
dever
possuir
obrigatoriamente a tag de fechamento, ou
seja, o contedo do formulrio dever ficar
entre <form> e </form>.

Evelyn K.R.M. | Etec Jales 2014

Formulrios

Um formulrio precisa ter a indicao de como

enviar as informaes para o servidor, para isso
existem dois mtodos, GET e POST.
METHOD = GET: A maioria dos documentos HTML
so recuperados a partir da requisio de uma
nica URL ao servidor. Assim, um formulrio que
utilize este mtodo, envia toda a sua informao ao
final da URL, suporta at 128 caracteres.
METHOD = POST: Toda a informao transmitida
via formulrio, quando o servidor recebe uma
ativao de um formulrio utilizando POST ele sabe
que precisa continuar ouvindo para receber as
informaes, este mtodo transfere grande
quantidade de dados.
Evelyn K.R.M. | Etec Jales 2014

Formulrios

Exemplo de envio de formulrio pelo

mtodo post e a ao que v para a
pgina de cadastro.

Os formulrios podem conter qualquer tipo de formatao,

pargrafo, listas, tabelas, imagens, s no podem conter outros
formulrios sobrepostos.

Evelyn K.R.M. | Etec Jales 2014

Rtulos ou Label

So textos que indicam qual o dado que deve ser

inserido nos campos de formulrio.
Geralmente, os elementos de formulrio sempre vem
acompanhado de rtulos.
O rtulo deve sempre ter o atributo for
especificado, pois neste atributo que indica-se a
qual campo o rtulo pertence.

Evelyn K.R.M. | Etec Jales 2014

Entrada de dados
As formataes para campos de entrada
de dados so trs: <INPUT>, <SELECT> e
<TEXTAREA>.
Entrada de texto comum - TEXT
a forma mais simples de campo de
entrada, permite a digitao do texto em
uma nica linha, e possui uma largura
default de 20 caracteres.

Evelyn K.R.M. | Etec Jales 2014

Entrada de dados
Algumas opes:
VALUE= Opcional
Voc especifica que texto aparecer no
campo quando o formulrio for exibido.
SIZE= Opcional
Esta marcao altera o tamanho deste campo
exibido na tela.

MAXLENGHT= Opcional
Limita o nmero de caracteres que o usurio
pode digitar.
Evelyn K.R.M. | Etec Jales 2014

10

Entrada de dados

Obs: A opo NAME deve ser colocada em todos os itens do

formulrio, pois atravs dela iremos indicar de qual item do
formulrio desejamos buscar ou atribuir valores.

Evelyn K.R.M. | Etec Jales 2014

11

Entrada de texto protegido,

senha - PASSWORD
Possuem as mesmas opes e formato do tipo TEXT,
se diferem pelo fato de todos os caracteres serem
exibidos como asteriscos (*), em aluso a uma
senha.

Evelyn K.R.M. | Etec Jales 2014

12

Entrada de vrias linhas de texto TEXTAREA

A marcao TEXTAREA no utiliza o formato convencional
INPUT TYPE=text dos exemplos mostrados acima. Uma
marcao <TEXTAREA> delimita o seu incio e a marcao
</TEXTAREA> o seu fim.
Algumas opes:

ROWS= Obrigatrio
Especifica o nmero de linhas da entrada textual.
COLS= Obrigatrio
Especifica o nmero de colunas da entrada textual.
Texto default opcional
Se voc deseja que um texto seja exibido no campo ao abrir o
formulrio, basta coloc-lo entre as marcaes de incio e fim
da TEXTAREA.
Evelyn K.R.M. | Etec Jales 2014

TEXTAREA

13

Evelyn K.R.M. | Etec Jales 2014

14

Menus com opes - SELECT

Trata-se de um menu de opo nica, ou seja s se pode selecionar
um item.
A marcao SELECT segue a mesma conveno de TEXTAREA, as
opes de menu ficam entre a marcao de incio <SELECT> e a de
fim </SELECT>.
Algumas opes:
OPTION Obrigatrio
Adiciona um item ao menu.
VALUE= Opcional
Especifica o valor da opo retornada ao servidor. Se no for definido,
o nome da opo enviado ao servidor.
SELECTED Opcional
A marcao SELECTED determina qual OPTION ser exibida quando o
formulrio exibido, caso nenhuma OPTION tenha a marcao
SELECTED a primeira a ser adicionada a que aparecer como
selecionada.
Evelyn K.R.M. | Etec Jales 2014

15

Menus com opes - SELECT

Evelyn K.R.M. | Etec Jales 2014

16

Listas paginveis SELECT com SIZE

Segue a mesma estrutura do elemento de entrada citado acima o
SELECT a diferena a introduo da opo SIZE que especifica
quantas linhas com opes de menu sero exibidas na janela.

Algumas opes:
MULTIPLE Opcional
Especifica que mltiplas opes podem ser selecionadas utilizando as
teclas CTRL ou SHIFT, j no SELECT anterior apenas uma poderia ser
selecionada.
SIZE= Obrigatrio
Nmero de linhas (opes) exibidas na janela.

OPTION Obrigatrio
Adiciona um item a lista.
VALUE= Opcional
Especifica o valor da opo retornada ao servidor. Se no for
definido, o nome da opo enviado ao servidor.
Evelyn K.R.M. | Etec Jales 2014

17

Listas paginveis SELECT com SIZE

SELECTED Opcional
A marcao SELECTED determina qual OPTION ser exibida
quando o formulrio exibido, caso nenhuma OPTION tenha
a marcao SELECTED a primeira a ser adicionada a que
aparecer como selecionada.

Evelyn K.R.M. | Etec Jales 2014

Botes

18

Botes sim ou no - CHECKBOX

Utiliza o formato INPUT TYPE= assim como a TEXT,
aconselhvel para casos em que podem ser selecionadas
vrias opes(itens).
Algumas opes:
CHECKED Opcional
Esta marcao traz a CHECKBOX selecionada quando o
formulrio for carregado.

Evelyn K.R.M. | Etec Jales 2014

19

Botes com opes - RADIO

similar ao CHECKBOX porm permite ao usurio a
escolha de apenas uma alternativa, diante de uma srie
de opes.
Algumas opes:
NAME
Especifica o nome do objeto, para caracterizar uma
mesma srie de opes todos os objetos desta srie
devem ter o mesmo NAME.
VALUE= Obrigatrio
Especifica o valor da opo a ser enviado para o
servidor, caso o item esteja selecionado.
CHECKED Recomendado
Esta marcao traz RADIOBUTTON selecionado quando
o formulrio for carregado.
Evelyn K.R.M. | Etec Jales 2014

20

Botes com opes - RADIO

Evelyn K.R.M. | Etec Jales 2014

21

Botes de envio (submit) e limpeza (reset)

De

nada adiantaria preencher o formulrio

com dados se no houver um comando
que envie esses dados ao destino. Para isso
h o boto submit.

Para

fazer a limpeza dos dados, isto ,

fazer com que os dados do formulrio
voltem ao valor padro, existe o boto
reset.

atributo value o que aparecer escrito

no boto visvel ao usurio.
Evelyn K.R.M. | Etec Jales 2014

22

Botes de envio (submit) e limpeza (reset)

Evelyn K.R.M. | Etec Jales 2014

Exerccio

23

Crie este formulrio,

no se esquea que
dever
conter
os
LABELs e descubram
como feito esta
caixa envolta do form
preferncias e sexo.

Evelyn K.R.M. | Etec Jales 2014