05 - formulários

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: [email protected]

05

–

Formulários



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



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.


3



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>.


4

Formulários



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.


5

Formulários



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.


6

Formulários



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.


7

Rótulos ou Label



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.


8

Entrada de dados



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.


9

Entrada de dados



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.


10

Entrada de dados



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.


11

Entrada de texto protegido,

senha - PASSWORD



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.


12

Entrada de várias linhas de texto – TEXTAREA


http://slidepdf.com/reader/full/05-formularios 13/23Evelyn K.R.M. | Etec Jales 2014

13

TEXTAREA



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.


14

Menus com opções - SELECT


http://slidepdf.com/reader/full/05-formularios 15/23Evelyn K.R.M. | Etec Jales 2014

15

Menus com opções - SELECT



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.


16

Listas pagináveis – SELECT com SIZE



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.


17

Listas pagináveis – SELECT com SIZE



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.


18

Botões



É 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.


19

Botões com opções - RADIO




20

Botões com opções - RADIO



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.


21

Botões de envio (submit) e limpeza (reset)




22

Botões de envio (submit) e limpeza (reset)



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

05 - formulários

Documents