A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Laboratório de Informática Formulários em HTML 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.

Apresentações semelhantes


Apresentação em tema: "Laboratório de Informática Formulários em HTML 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Formulários em HTML 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula

2 213/1/2014 Formulários mal construídos podem mudar o mundo! Cédula das eleições americanas de 2000

3 Resumo da aula Na aula hoje, nosso objetivo é aprender a criar formulários em HTML 4 e 5; Hoje, vamos nos preocupar apenas com a interface do formulário, o que permite que o usuário interaja com o documento; Em situações reais, para um formulário fazer sentido, será necessária a utilização associada de uma linguagem cliente como JavaScript ou no servidor como PHP.

4 413/1/2014 Resumo da aula Deveremos aceitar que nossos formulários sempre deverão ser construídos de maneira acessível; Começaremos a entender também que a criação de formulários envolve conceitos das áreas: o Projeto de Formulários; o Usabilidade; o Validação de Formulários; o Psicologia Cognitiva; o Etc...

5 513/1/2014 Material extra referente ao assunto da aula http://www.maujor.com/blog/w3c/rec- forms.html http://www.maujor.com/blog/w3c/rec- forms.html http://www.w3schools.com/html/html_f orms.asp http://www.w3schools.com/html/html_f orms.asp http://dev.opera.com/articles/view/20- html-forms-the-basics/ http://dev.opera.com/articles/view/20- html-forms-the-basics/ http://dev.opera.com/articles/view/34- styling-forms/ http://dev.opera.com/articles/view/34- styling-forms/ http://dev.opera.com/articles/view/imp rove-your-forms-using-html5/ http://dev.opera.com/articles/view/imp rove-your-forms-using-html5/

6 613/1/2014 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Contâiner de formulário: ; Rótulo de item de formulário: ; Botão: ; Elemento de entrada de dados: ; Caixa de texto multilinha:. Caixa de seleção: ; Opção de um select: ;

7 713/1/2014 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Grupo de opções em um select: ; Agrupamento de itens de formulário: ; Legenda de um grupo de itens de formulário: ;

8 813/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Contâiner de formulário: ; Rótulo de item de formulário: ; Botão: ; Elemento de entrada de dados: ; Caixa de texto multilinha:. Caixa de seleção: ; Opção de um select: ;

9 913/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Grupo de opções em um select: ; Agrupamento de itens de formulário: ; Legenda de um grupo de itens de formulário: ;

10 1013/1/2014 Propriedades CSS referenciadas na aula (em Inglês –site SitePoint)SitePoint Bordas: – border-width: largura da borda; border-width – border-style: estilo da borda; border-style – border-color: cor da borda. border-color Determinar a cor da letra e o fundo: – color:cor do elemento; color – background-color: cor de fundo; background-color – background-image: imagem de fundo; background-image width: largura de um elemento; width

11 1113/1/2014 Exemplos da aula Resumo sobre todos os tipos de item de formulário; Resumo sobre todos os tipos de item de formulário Exemplo de formulário simples; Exemplo de formulário simples Exemplo de formulário simples; Exemplo de formulário simples Exemplo de formulário mais elaborado; Exemplo de formulário mais elaborado Componentes de formulário do HTML 4; Componentes de formulário do HTML 4 Componentes de formulário do HTML 5 - Abrir com navegador Opera; Componentes de formulário do HTML 5 - Abrir com navegador Opera

12 1213/1/2014 Ponto chave da aula!

13 1313/1/2014 Ponto chave da aula: Renderização padrão em navegadores diferentes é sempre diferente. Itens NUNCA vão ficar exatamente iguais.

14 CSS resolve parcialmente este problema! Teremos uma aula dedicada à sobre formatação de formulários. 1413/1/2014

15 1513/1/2014 A tag Formulário (tag ): – contâiner para uma quantidade ilimitada de componentes de interação com o usuário. Aceita um número limitado de tipos de componentes diferentes. <!--...Coloque seus controles aqui... -->

16 1613/1/2014 Exemplo!

17 1713/1/2014 Tipos de componentes de formulário no HTML Versão 4 1 ou mais tags por componente; Limitadíssimos!! Ver exemplos;exemplos Guarde este resumo!este resumo

18 1813/1/2014

19 1913/1/2014

20 2013/1/2014 Tipos de componentes do HTML Versão 5 Ainda em discussão! É importante conhecer o futuro! Vamos usar o Navegador Opera para testá-las; Opera Versão Portátil em: – http://www.kejut.com/operaportable http://www.kejut.com/operaportable Ver exemplos;exemplos

21 2113/1/2014

22 2213/1/2014 Atributos essenciais dos componentes Atributo id: identifica o controle para o cliente web / JavaScript; Atributo name: identifica o controle para o servidor web; Atributo value: indica o valor do controle e pode mudar; Atributo type: indica o tipo de controle;

23 2313/1/2014 Criar um formulário (siga esta receita) 1) Definir o contâiner de formulário ; 2) Definir o action do formulário, ou seja, para onde ele vai; 3) (opcional) Definir o método de envio do formulário (GET ou POST); 4) (opcional) Delimitar os grupos de itens através de ; 5) (opcional) Usar uma legenda para cada grupo ;

24 2413/1/2014 Criar um formulário (siga esta receita) 6) (opcional) Definir um rótulo para cada item de formulário ; 7) Criar o item de formulário associado ao rótulo,, etc. 8) (acessibilidade) Definir teclas de acesso, através do atributo accesskey; 9) Definir o botão de submissão; 10) CSS: Formatar o formulário.

25 2513/1/2014 Exemplo de formulário Vamos começar com este formulário...este formulário Ao clicar no botão cadastrar, os dados são enviados para a página: – http://tinyurl.com/form2009li http://tinyurl.com/form2009li –

26 E vamos evoluir para este...este 2613/1/2014

27 2713/1/2014 1) Definir o contâiner de formulário ( ) Não mostra nada! Todos os componentes de formulário devem ser colocados dentro do elemento.

28 2813/1/2014 2) Definir o action do formulário, ou seja, para onde ele vai; O formulário ao ser enviado, submete os dados para a página indicada pelo atributo action;

29 3) (opcional) Definir o método de envio (GET ou POST) Método GET: – envio das informações pela barra de endereços; – visível; – limitado a cerca de 2000 caracteres; Método POST: – envio das informações via cabeçalho HTTP; – ilimitado (teórico). 2913/1/2014

30 3013/1/2014

31 3113/1/2014

32 No método GET, a informação é passada via barra de endereços 3213/1/2014

33 No método POST, a informação só pode ser vista com ferramentas especiais (Firebug) 3313/1/2014

34 3413/1/2014 4) (opcional) Delimitar os grupos de itens através de ;

35 3513/1/2014 5) (opcional) Usar uma legenda para cada grupo ;

36 3613/1/2014 6) (opcional) Definir um rótulo para cada item de formulário ; O atributo for deve ter como valor o id do componente associado;

37 Especifica um rótulo que estende a área de foco do elemento; Evita tiro ao alvo. 3713/1/2014

38 Com : 3813/1/2014 Sem : Área clicável em roxo

39 7) Criar o item de formulário associado ao rótulo Vamos criar uma caixa de texto através da tag input com atributo type = text; 3913/1/2014

40 4013/1/2014

41 4113/1/2014 O atributo for deve ter como valor o id do componente associado;

42 8) (acessibilidade) Definir teclas de acesso (atributo accesskey) Firefox: SHIFT + ALT + TECLA; IE: ALT + TECLA; Cuidado com conflitos! 4213/1/2014

43 9) Definir o botão de submissão Ao clicar no botão de submissão, os dados são enviados para a página indicada pelo atributo action do form; Observe que a página é perdida ao clicar no botão. 4313/1/2014

44 Resultado (ver link)link 4413/1/2014

45 Evoluindo o formulário 4513/1/2014

46 Caixa de senha 4613/1/2014

47 Botão de rádio Apenas uma opção de cada vez; O atributo name agrupa os controles; 4713/1/2014

48 Caixa de checagem 4813/1/2014

49 1/13/2014 Formulários49 Diferença entre caixa de checagem e botão de rádio Só pode uma opção de cada vez: Pode selecionar mais de uma opção:

50 Caixa de envio de arquivos 5013/1/2014

51 Caixa de texto multilinha cols e rows determinam o número de colunas e linhas; 5113/1/2014

52 Caixa de listagem é o container; Cada opção é um. 5213/1/2014

53 Resultado (ver link)link 5313/1/2014

54 1/13/2014 Formulários54 Dicas para construção de formulários 1) Nunca esqueça de colocar rótulos ( ); 2) Dê name e id para todos os elementos; 3) Respeite a diferença entre readonly e disabled; 4) Gere a ordem de tabulação (taborder) quando necessário; 5) A tecla de atalho (accesskey) é obrigatória para que seu sistema seja utilizável sem teclado. 6) O atributo title é uma ótima alternativa para exibição de uma dica visual ou para ajudar a navegação em um navegador não visual.

55 1/13/2014 Formulários55 Diferença entre atributo disabled e atributo readonly disabled: deixa o elemento desabilitado (texto em cinza). readonly: impede a edição do elemento, mas ele não fica com o texto em cinza. Exemplo: –

56 5613/1/2014 Referências principais http://www.maujor.com/blog/w3c/rec- forms.html http://www.maujor.com/blog/w3c/rec- forms.html http://www.w3schools.com/html/html_f orms.asp http://www.w3schools.com/html/html_f orms.asp http://dev.opera.com/articles/view/20- html-forms-the-basics/ http://dev.opera.com/articles/view/20- html-forms-the-basics/ http://dev.opera.com/articles/view/34- styling-forms/ http://dev.opera.com/articles/view/34- styling-forms/ http://dev.opera.com/articles/view/imp rove-your-forms-using-html5/ http://dev.opera.com/articles/view/imp rove-your-forms-using-html5/

57 Referências complementares Firefox 2.0 and Access Keys – http://juicystudio.com/article/firefox2- accesskeys.php#realsolution http://juicystudio.com/article/firefox2- accesskeys.php#realsolution – Discussão sobre teclas de acesso no Firefox Avaliador de Acessibilidade – https://www.governoeletronico.gov.br/acoe s-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios https://www.governoeletronico.gov.br/acoe s-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios Recomendações acessibilidade – http://www.geocities.com/claudiaad/acessi bilidade_web.html http://www.geocities.com/claudiaad/acessi bilidade_web.html 5713/1/2014

58 5813/1/2014 Próxima aula CSS: – Seletores! – Textos e Fontes!


Carregar ppt "Laboratório de Informática Formulários em HTML 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."

Apresentações semelhantes


Anúncios Google