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

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

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.

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

513/1/2014 Material extra referente ao assunto da aula forms.html forms.html orms.asp orms.asp html-forms-the-basics/ html-forms-the-basics/ styling-forms/ styling-forms/ rove-your-forms-using-html5/ rove-your-forms-using-html5/

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

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

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

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

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

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

1213/1/2014 Ponto chave da aula!

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

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

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

1613/1/2014 Exemplo!

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

1813/1/2014

1913/1/2014

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: – Ver exemplos;exemplos

2113/1/2014

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;

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 ;

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.

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

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

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.

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;

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

3013/1/2014

3113/1/2014

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

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

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

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

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;

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

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

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

4013/1/2014

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

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

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

Resultado (ver link)link 4413/1/2014

Evoluindo o formulário 4513/1/2014

Caixa de senha 4613/1/2014

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

Caixa de checagem 4813/1/2014

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:

Caixa de envio de arquivos 5013/1/2014

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

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

Resultado (ver link)link 5313/1/2014

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.

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

5613/1/2014 Referências principais forms.html forms.html orms.asp orms.asp html-forms-the-basics/ html-forms-the-basics/ styling-forms/ styling-forms/ rove-your-forms-using-html5/ rove-your-forms-using-html5/

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 – s-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios s-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios Recomendações acessibilidade – bilidade_web.html bilidade_web.html 5713/1/2014

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