Internet I - Aula 06 - Formulários

263 visualizações

Publicada em

Ensinando os primeiros passos com formulários em HTML.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
263
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Internet I - Aula 06 - Formulários

  1. 1. Internet I Formulários Prof. Manoel Afonso
  2. 2. O que é um Formulário?  Os formulários são usados para passar dados de uma página para outra.  Um formulário HTML pode conter elementos de entrada, que nós chamamos de input, como:  Campos de Texto;  Checkboxes;  Botões de Seleção Única (Radio Button);  Etc.
  3. 3. Como fazer um formulário?  Todos os elementos de um formulário devem estar dentro da tag <form>  Dois atributos do formulário são de grande importância, o “action” e o “method”  Action: serve para informar para onde o formulário será enviado;  Method: Pode receber os valores “post” ou “get”, informando o método de envio.  Post é um método “invisível”, é quando se passa as informações via código.  Get é um método “visível”, é quando se passa informações via link.
  4. 4. Dá pra exemplificar?  No exemplo abaixo, ao submeter o formulário, os dados dos campos dentro dele seriam enviados para uma página chamada “cadastrar”, e o tipo de envio será via post:
  5. 5. Elementos Input  O mais importante elemento dos formulários é o elemento input. Ele é utilizado para capturar a informação do usuário.  Um input pode variar de muitas formas, dependendo de seu atributo type.  Os tipos que um input pode assumir são:  Texto;  Checkbox;  Senha;  Botão Radio;  Etc.
  6. 6. E o exemplo caramba?  O elemento <input> com o atributo type=”text” define um campo de uma linha em que o usuário pode digitar texto. Também é sempre importante informar um valor ao atributo name, que identificará o dado que está sendo enviado.
  7. 7. Elemento label  A tag <label> define um texto para um campo do formulário. Esse elemento tem uma função muito importante na usabilidade dos formulários, porque cria um link entre o texto e o campo escritos dentro dele.
  8. 8. Campo de Senha  Um campo de senha pode ser criado em um formulário utilizando o atributo type=”password”. Os caracteres em um campo senha recebem uma máscara, sendo mostrados com asteriscos ou círculos, de acordo com cada navegador.
  9. 9. Campo de Radio  O elemento <input> com o atributo type=”radio” define um campo do tipo radio. Esses campos permitem que o usuário selecione apenas um valor de um número limitado de escolhas.  Nesses elementos, é importante definir também os valores dos atributos value, já que todos devem ter o mesmo name. No código acima, o usuário marca uma das opções para o campo “tipo”: PF (Pessoa física) ou PJ (Pessoa jurídica).
  10. 10. Campo de Checkbox  O elemento <input> com o atributo type="checkbox" define um checkbox. Essas caixas de seleção permitem que o usuário selecione zero ou mais opções de um número limitado de escolhas. Os valores desses campos são enviados como 0 ou 1, caso o usuário tenha marcado ou não a caixa.
  11. 11. Botão Enviar  O elemento <input> com o atributo type="submit" define um botão de envio. Esse botão é utilizado para enviar os dados de um formulário para outra página. Os dados são enviados para a página especificada no atributo action do elemento form. A página definida nesse atributo geralmente executa alguma operação com os dados recebidos.
  12. 12. Dúvidas?
  13. 13. Exercício  Crie um aplicativo de FireFox OS com um formulário de cadastro de cliente, o formulário deve pedir:  Nome;  Senha;  Email;  Telefone;  Sexo;  Ao clicar em “Cadastrar” o formulário deve levar a uma nova página que exibirá a mensagem “Cadastrado com Sucesso”.

×