Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 1 Formulários A linguagem HTML, permite que o browser realize uma interação com.

Apresentação em tema: "Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 1 Formulários A linguagem HTML, permite que o browser realize uma interação com."— Transcrição da apresentação:

1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 1 Formulários A linguagem HTML, permite que o browser realize uma interação com um servidor Web, preenchendo campos, clicando em botões, passando informações etc. Estas informações são tratadas por outros programas, denominados scripts, podendo armazenar os dados para posteriores utilizações. Os scripts podem retornar outros documentos HTML, URLs, ou algum outro tipo de dado para o CLIENTE. O elemento FORM, ou TAG FORM, é o responsável. Ele provê a maneira correta e suportada pelas ferramentas para coletar dados através de formulários com caixas de entrada de textos, botões, etc. Precisamos entender que o FORM capta dados, mas não realiza nenhum processamento com os mesmos. É aí que entram os scripts, permitindo que o(s) servidor(es) se comunique(m) com o browser, o qual deve atuar sobre essas informações, retornando os dados para o navegador – browser. A confecção dos scripts exige que se aprenda uma linguagem de programação como: JavaScript, PHP, ASP etc.

2 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 2 Formulários (continuação) Construindo Formulários (FORM) O primeiro passo para construir um objeto FORM, é utilizando as TAGs e. Formato geral:... O atributo ACTION diz ao browser para onde enviar os dados do formulário. Será quase sempre um programa em script que realizará o processamento dos dados, algum tipo de ação. O url é o endereço Web que contém o(s) programas).

3 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 3 Formulários (continuação) O atributo METHOD informa ao browser como enviar os dados para a URL, especificado no atributo ACTION. Há duas opções: GET e POST. Embora ambos realizem o envio dos dados, na maioria dos casos o método GET pode causar um erro em formulários grandes. Por isso sempre devemos usar o método POST. Vamos realizar um teste usando os scripts públicos do NCSA. Existe um para cada método: “http://hoohooncsa.uiuc.edu/htbin-post/post-query http://hoohooncsa.uiuc.edu/htbin/query Esses métodos simplesmente acessam os dados fornecidos e retornam em uma nova página (home-page).

4 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 4 Formulários (continuação) INPUT A TAG, especifica vários campos editáveis dentro do formulário. Ele pode receber diversos atributos que definem os mecanismos de entrada (botões, caixas de texto, etc), o nome da variável, associado a entrada de dados, o alinhamento e o campo dos valor mostrado. O atributo importante do INPUT é o NAME. A ele é associado o valor da entrada do elemento. Por exemplo, quando recebermos os dados, deve vir o NAME := resposta dada pelo visitante. Outro atributo importante é o TYPE, ele determina o tipo de campo na entrada de dados. Exemplo: Para mudar o tamanho padrão da janela, basta utilizar o atributo SIZE. Exemplo: Para limitar o tamanho do texto deve ser utilizado o atributo MAXLENGTH

5 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 5 Formulários (continuação) Exemplo: Olhe como seria: texto a-) TYPE=“PASSWORD” Este atributo, é utilizado para fazer entre de dados ou campos com senha. Quando o usuário digitar, será exibido o caracter “*” ao invés da letra digitada. Exemplo: Vamos fazer um exemplo utilizando os atributos SIZE e MAXLENGTH. Digite os comandos abaixo no bloco de notas e grave como EXERC31.HTM

6 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 6 Exemplo de Formulário Meu primeiro formulario Digite seus dados pessoais Nome: Nome do Pai: Nome da Mãe: Endereço: Bairro: Cidade: CEP: Senha: Exerc31A = exerc31, colocando o mesmo em uma tabela e alinhando a direita a coluna dos nomes e a esquerda a coluna das caixas de texto.

7 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 7 b-) TYPE=“RADIO” Este atributo, é utilizado quando o usuário deve escolher uma resposta em forma de alternativa, de um conjunto, utiliza-se o RADIO Buttons. Um exemplo típico desse tipo de botões, é uma resposta cujos valores esperados são: SIM ou NÃO. Para tanto, é preciso que todos os Radio Buttons referentes a mesma questão estejam em um mesmo grupo, ou seja, tenham o mesmo atributo NAME. Outro atributo é utilizado neste tipo o VALUE, o qual determina os valores ao NAME. Exemplo: sim não Este código deve apresentar o seguinte resultado: SIM NÃO

8 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 8 c-) TYPE=“CHECKBOX” O atributo CHECKBOX, permite a inclusão de várias caixas de checagem, nas quais o usuário pode escolher mais de uma alternativa. Este atributo, deve ser acompanhado de outros dois: o NAME (muito importante) e o CHECKED, quando deseja-se exibir uma opção pré-selecionada ou uma opção padrão. Exemplo: VB DELPHI JAVA Este código deve apresentar o seguinte resultado: VB DELPHI JAVA

9 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 9 Construa um formulário, utilizando os comandos abaixo no bloco de notas e grave como EXERC32.htm. Exemplo de Formulário Formulário com Escolha de Alternativas Escolha Única Voce gostou desta página ? SIM NÃO Escolha Múltipla Qual(is) página(s) você mais gostou ? Principal Arruda Alecrim Camomila Todas continua ...

10 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 10 d ) TYPE=“SUBMIT” Esse é o botão que submete os dados do formulário a uma ação, isto é, envia os dados para o script que vai tratá-los. Exemplo: O resultado será: Enviar e ) TYPE=“RESET” Esse botão, quando clicado, automaticamente todos os campos preenchidos são limpos, retornando ao estado inicial.

11 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 11 O resultado será: Limpar Construa um novo formulário com os comandos abaixo, para verificar o funcionamento dos botões SUBMIT e RESET, e grave no bloco de notas como EXERC33.HTM. Exerc33 – Exemplo de Formulário Botões SUBMIT e RESET Dados Pessoais Nome: Endereço: Telefone: Senha: continua ...

12 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 12 Endereço: Bairro: Cidade: CEP: Senha: Você gostou desta página ? SIM NÃO f ) TEXTAREA Quando existe a necessidade de proporcionar ao usuário, um espaço mais amplo, com mais de uma linha, podemos utilizar uma área de texto ao invés de uma caixa de texto.

13 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 13 Formato geral: texto Para delimitar o espaço utilizado por esta TAG, utiliza-se os atributos COLS e ROWS que especificam as colunas e linhas que se deseja mostrar. O atributo NAME é obrigatório e especifíca o nome dado a variável que deve receber o conteúdo digitado. O atributo VALUE não é usado nesta TAG, mas quando deseja- se que um texto seja exibido, basta colocar o texto antes de fechar a TAG, como mostra o formato geral. O resultado será:

14 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 14 g) SELECT São criados botões de opções para selecionar alternativas, mas podem tornar- se difíceis de manejar caso existam muitas opções. Neste caso, o mais indicado seria usar uma lista de seleções. Formato geral: Opção 1 Opção 2 Opção 3... O nome, definido no atributo NAME, é único para toda a lista. O atributo SIZE indica a quantidade de itens da lista e o atributo MULTIPLE, indica que podem ser selecionadas várias opções da lista. Os TAGs apresentam as opções disponíveis. Caso um dos itens possuir o atributo SELECTED, este será apresentado como opção padrão da lista.

15 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 15 Use o bloco de notas e grave os comandos abaixo como EXERC34.HTM. Neste exercício estaremos testando as TAGs TEXTAREA e SELECT OPTION. Exemplo de Formulário Áreas de texto e lista Dê sua opinião http://hoohoo.ncsa.uiuic.edu/cgi-bin/post-query Qual a sua opinião sobre o envolvimento de pessoas famosas em atos ilícitos (drogas)? Opinião sobre pessoas famosas envolvidas com drogas Qual a sua opinião sobre os programas de televisão que ridicularizam as pessoas ? Opinião sobre programas de TV que ridicularizam as pessoas Qual a sua opinião sobre a união estável de pessoas por interesse ? Opinião sobre união matrimonial por interesse

16 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 16 Como se senta para responder estas perguntas ? Preparado Despreparado Alheio Consciente Nenhuma das anteriores O que VOCÊ acha das questões anteriores ? Relevantes Irrelevantes Polêmicas Importantes Desprezíveis Nenhuma das anteriores

17 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 17 Digite no bloco de notas os comando abaixo e grave como EXERC34A.HTM. Este exemplo mostra todos os comando que são envolvidos em um formulário. Exerc34A – Exemplo Completo de Formulário Exemplo Completo de Formulário Levantamento Sócio Econômico Dados Pessoais “http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query Nome: Endereço: Telefone: Senha: Sexo: Masculino Feminino Levantamento de Bens Continua... 

18 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 18 Casa Própria Automóvel Telefone Celular DVD TV Lcd Assinatura TV a Cabo Geladeira Home Theater Média Salarial da Família Menor que 5 Sal. Min. Entre 5 e 10 Sal. Min. Entre 10 e 15 Sal. Min. Entre 15 e 20 Sal. Min. Superior a 20 Sal. Min. Continua... 

19 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 19 Área de Trabalho: Agricultura Pecuária Comércio Indústria Prestação de Serviços Outras Descreva sua opinião sobre a situação do país: Sua opinião é...

20 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 29/5/2016 14:57 20 PUBLICAÇÃO DE SITES CONTADORES DE ACESSO CSS EDITORES HTML (DREAMWEAVER) SITES DINAMICOS (HTML + PHP)