O documento explica o que são formulários HTML, como criá-los e quais elementos podem ser usados, como inputs do tipo texto, senha, checkbox, radio button e botões. Campos como nome, labels, métodos GET e POST também são explicados.

1. Internet I
Formulários
Prof. Manoel Afonso

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Dúvidas?

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