Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouThiago Redondo Alterado mais de 10 anos atrás
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!
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.