Post on 10-Jan-2016
description
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 1/23
______________________________________________________________________
ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALES
Profª. Evelyn K. R. Matos
email: evelynkrm@gmail.com
05
–
Formulários
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 2/23
A função básica de um formulário em umdocumento (X)HTML é o de colher dadosvindos do usuário.
Uma das atividades mais comuns dosusuário da web é realizar cadastros eresponder entrevistas.
Evelyn K.R.M. | Etec Jales 2014
2
Formulários
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 3/23
Muitas empresas usam o sistema de pesquisa online onde o usuário responde,através de formulários, uma série de perguntas que mais tarde, poderão setransformar em uma massa de dados úteis para identificar perfis de novos
consumidores, tendências e novos mercados.
Evelyn K.R.M. | Etec Jales 2014
3
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 4/23
Para criar um formulário, é necessário o usodo elemento form.
Esse elemento deverá possuir obrigatoriamente a tag de fechamento, ouseja, o conteúdo do formulário deverá ficar entre <form> e </form>.
Evelyn K.R.M. | Etec Jales 2014
4
Formulários
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 5/23
Um formulário precisa ter a indicação de como
enviar as informações para o servidor, para issoexistem dois métodos, GET e POST.
METHOD = “GET”: A maioria dos documentos HTMLsão recuperados a partir da requisição de uma
única URL ao servidor. Assim, um formulário queutilize este método, envia toda a sua informação aofinal da URL, suporta até 128 caracteres.
METHOD = “POST”: Toda a informação é transmitida
via formulário, quando o servidor recebe umaativação de um formulário utilizando POST ele sabeque precisa continuar “ouvindo” para receber asinformações, este método transfere grandequantidade de dados.
Evelyn K.R.M. | Etec Jales 2014
5
Formulários
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 6/23
Exemplo de envio de formulário pelométodo post e a ação é que vá para apágina de cadastro.
Os formulários podem conter qualquer tipo de formatação,parágrafo, listas, tabelas, imagens, só não podem conter outrosformulários sobrepostos.
Evelyn K.R.M. | Etec Jales 2014
6
Formulários
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 7/23
São textos que indicam qual é o dado que deve ser
inserido nos campos de formulário.
Geralmente, os elementos de formulário sempre vemacompanhado de rótulos.
O rótulo deve sempre ter o atributo “for”especificado, pois é neste atributo que indica-se aqual campo o rótulo pertence.
Evelyn K.R.M. | Etec Jales 2014
7
Rótulos ou Label
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 8/23
As formatações para campos de entradade dados são três: <INPUT>, <SELECT> e<TEXTAREA>.
Entrada de texto comum - TEXTÉ a forma mais simples de campo deentrada, permite a digitação do texto em
uma única linha, e possui uma larguradefault de 20 caracteres.
Evelyn K.R.M. | Etec Jales 2014
8
Entrada de dados
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 9/23
Algumas opções:
VALUE=“” Opcional
Você especifica que texto aparecerá nocampo quando o formulário for exibido.
SIZE=“” Opcional
Esta marcação altera o tamanho deste campoexibido na tela.
MAXLENGHT=“” Opcional
Limita o número de caracteres que o usuáriopode digitar.
Evelyn K.R.M. | Etec Jales 2014
9
Entrada de dados
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 10/23
Obs: A opção NAME deve ser colocada em todos os itens doformulário, pois através dela iremos indicar de qual item doformulário desejamos buscar ou atribuir valores.
Evelyn K.R.M. | Etec Jales 2014
10
Entrada de dados
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 11/23
Possuem as mesmas opções e formato do tipo TEXT,se diferem pelo fato de todos os caracteres seremexibidos como asteriscos (*), em alusão a uma
senha.
Evelyn K.R.M. | Etec Jales 2014
11
Entrada de texto protegido,
senha - PASSWORD
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 12/23
A marcação TEXTAREA não utiliza o formato convencionalINPUT TYPE=“text” dos exemplos mostrados acima. Umamarcação <TEXTAREA> delimita o seu início e a marcação</TEXTAREA> o seu fim.
Algumas opções:
ROWS=”” ObrigatórioEspecifica o número de linhas da entrada textual.
COLS=”” ObrigatórioEspecifica o número de colunas da entrada textual.
Texto default é opcionalSe você deseja que um texto seja exibido no campo ao abrir oformulário, basta colocá-lo entre as marcações de início e fimda TEXTAREA.
Evelyn K.R.M. | Etec Jales 2014
12
Entrada de várias linhas de texto – TEXTAREA
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 13/23Evelyn K.R.M. | Etec Jales 2014
13
TEXTAREA
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 14/23
Trata-se de um menu de opção única, ou seja só se pode selecionar
um item.A marcação SELECT segue a mesma convenção de TEXTAREA, asopções de menu ficam entre a marcação de início <SELECT> e a defim </SELECT>.
Algumas opções:
OPTION ObrigatórioAdiciona um item ao menu.
VALUE=“” OpcionalEspecifica o valor da opção retornada ao servidor. Se não for definido,o nome da opção é enviado ao servidor.
SELECTED OpcionalA marcação SELECTED determina qual OPTION será exibida quando oformulário é exibido, caso nenhuma OPTION tenha a marcaçãoSELECTED a primeira a ser adicionada é a que aparecerá comoselecionada.
Evelyn K.R.M. | Etec Jales 2014
14
Menus com opções - SELECT
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 15/23Evelyn K.R.M. | Etec Jales 2014
15
Menus com opções - SELECT
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 16/23
Segue a mesma estrutura do elemento de entrada citado acima o
SELECT a diferença é a introdução da opção SIZE que especificaquantas linhas com opções de menu serão exibidas na janela.
Algumas opções:
MULTIPLE Opcional
Especifica que múltiplas opções podem ser selecionadas utilizando asteclas CTRL ou SHIFT, já no SELECT anterior apenas uma poderia ser selecionada.
SIZE=”” ObrigatórioNúmero de linhas (opções) exibidas na janela.
OPTION ObrigatórioAdiciona um item a lista.
VALUE=”” OpcionalEspecifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é enviado ao servidor.
Evelyn K.R.M. | Etec Jales 2014
16
Listas pagináveis – SELECT com SIZE
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 17/23
SELECTED Opcional
A marcação SELECTED determina qual OPTION será exibidaquando o formulário é exibido, caso nenhuma OPTION tenhaa marcação SELECTED a primeira a ser adicionada é a queaparecerá como selecionada.
Evelyn K.R.M. | Etec Jales 2014
17
Listas pagináveis – SELECT com SIZE
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 18/23
Botões sim ou não - CHECKBOX
Utiliza o formato INPUT TYPE=”” assim como a TEXT, éaconselhável para casos em que podem ser selecionadasvárias opções(itens).
Algumas opções:
CHECKED Opcional
Esta marcação traz a CHECKBOX selecionada quando oformulário for carregado.
Evelyn K.R.M. | Etec Jales 2014
18
Botões
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 19/23
É similar ao CHECKBOX porém permite ao usuário aescolha de apenas uma alternativa, diante de uma sériede opções. Algumas opções:
NAMEEspecifica o nome do objeto, para caracterizar uma
mesma série de opções todos os objetos desta sériedevem ter o mesmo “NAME”.
VALUE=”” ObrigatórioEspecifica o valor da opção a ser enviado para o
servidor, caso o item esteja selecionado.
CHECKED RecomendadoEsta marcação traz RADIOBUTTON selecionado quandoo formulário for carregado.
Evelyn K.R.M. | Etec Jales 2014
19
Botões com opções - RADIO
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 20/23
Evelyn K.R.M. | Etec Jales 2014
20
Botões com opções - RADIO
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 21/23
De nada adiantaria preencher o formuláriocom dados se não houver um comandoque envie esses dados ao destino. Para issohá o botão submit .
Para fazer a limpeza dos dados, isto é,fazer com que os dados do formuláriovoltem ao valor padrão, existe o botão
reset .
O atributo value é o que aparecerá escritono botão visível ao usuário.
Evelyn K.R.M. | Etec Jales 2014
21
Botões de envio (submit) e limpeza (reset)
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 22/23
Evelyn K.R.M. | Etec Jales 2014
22
Botões de envio (submit) e limpeza (reset)
7/18/2019 05 - Formulários
http://slidepdf.com/reader/full/05-formularios 23/23
Crie este formulário,
não se esqueça quedeverá conter osLABEL’s e descubramcomo é feito estacaixa envolta do form
“preferências e sexo”.
Evelyn K R M | Etec Jales 2014
23
Exercício