13
Internet I Formulários Prof. Manoel Afonso

Internet I - Aula 06 - Formulários

Embed Size (px)

Citation preview

Page 1: Internet I - Aula 06 - Formulários

Internet I

FormuláriosProf. Manoel Afonso

Page 2: Internet I - Aula 06 - Formulários

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.

Page 3: Internet I - Aula 06 - Formulários

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.

Page 4: Internet I - Aula 06 - Formulários

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:

Page 5: Internet I - Aula 06 - Formulários

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.

Page 6: Internet I - Aula 06 - Formulários

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.

Page 7: Internet I - Aula 06 - Formulários

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.

Page 8: Internet I - Aula 06 - Formulários

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.

Page 9: Internet I - Aula 06 - Formulários

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

Page 10: Internet I - Aula 06 - Formulários

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.

Page 11: Internet I - Aula 06 - Formulários

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.

Page 12: Internet I - Aula 06 - Formulários

Dúvidas?

Page 13: Internet I - Aula 06 - Formulários

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