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 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentações semelhantes


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

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

2 2 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; Também deixaremos claro que nada impede o uso de forms HTML5 já!

4 4 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 5 Material extra referente ao assunto da aula forms.html forms.html asp asp forms-the-basics/ forms-the-basics/ forms/ forms/ your-forms-using-html5/ your-forms-using-html5/

6 6 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 7 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 8 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 9 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 10 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 11 Ponto chave da aula!

12 12 Ponto chave da aula: Renderização padrão em navegadores diferentes é sempre diferente. Itens NUNCA vão ficar exatamente iguais.

13 CSS resolve parcialmente este problema! Teremos uma aula dedicada à sobre formatação de formulários. 13

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

15 15

16 16 Tipos de componentes de formulário no HTML Versão 4 1 ou mais tags por componente; Limitadíssimos!!

17 17

18 18

19 19 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:

20 20

21 21 13/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;

22 22 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 ;

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

24 24 Exemplo de formulário Vamos começar com um formulário bastante simples; Ao clicar no botão cadastrar, os dados são enviados para a página:

25 E vamos evoluir para o formulário a seguir... 25

26 26 13/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.

27 27 2) Definir o action do formulário, ou seja, para onde ele vai; Troque o action pelo action que você precisa! O formulário ao ser enviado, submete os dados para a página indicada pelo atributo action;

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

29 29

30 30

31 No método GET, a informação é passada via barra de endereços 31

32 As vars são separadas por & 32 13/1/2014

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

34 34 4) (opcional) Delimitar os grupos de itens através de ;

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

36 36 13/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 /1/2014

38 Com : 38 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; 39

40 40

41 41 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! 42

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

44 Resultado 44

45 Evoluindo o formulário 45

46 Caixa de senha 46

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

48 Caixa de checagem 48

49 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 50

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

52 Caixa de listagem é o container; Cada opção é um. 52

53 Resultado 53

54 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 Formulários em JavaScript onsubmit x onclick O evento onsubmit é chamado quando se clica no botão submit do formulário; É um evento de formulário; Útil para validações de formulário; O evento onclick é para qualquer tipo de botão; É um evento de botão; Exemplos de cada um dos casos a seguir; 56 13/1/2014

57 57 13/1/2014

58 58 13/1/2014

59 59 Referências principais the-basics/ the-basics/ forms-using-html5/ forms-using-html5/

60 Referências complementares Firefox 2.0 and Access Keys accesskeys.php#realsolution accesskeys.php#realsolution Discussão sobre teclas de acesso no Firefox Avaliador de Acessibilidade https://www.governoeletronico.gov.br/acoes-e- projetos/e-MAG/ases-avaliador-e-simulador-de- acessibilidade-sitios https://www.governoeletronico.gov.br/acoes-e- projetos/e-MAG/ases-avaliador-e-simulador-de- acessibilidade-sitios Recomendações acessibilidade e_web.html e_web.html 60


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

Apresentações semelhantes


Anúncios Google