Laboratório de InformáticaFormulários em HTML

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

2

Formulários mal construídos podem mudar o mundo!

Cédula das eleições americanas de 2000

Resumo da aulaNa 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

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:

oProjeto de Formulários;oUsabilidade;oValidação de Formulários;oPsicologia Cognitiva;oEtc...

5

Material extra referente ao assunto da aulahttp://www.maujor.com/blog/w3c/rec-for

ms.htmlhttp://www.w3schools.com/html/html_fo

rms.asphttp://dev.opera.com/articles/view/20-ht

ml-forms-the-basics/http://dev.opera.com/articles/view/34-st

yling-forms/http://dev.opera.com/articles/view/impro

ve-your-forms-using-html5/

6

Tags HTML referenciadas na aula (em Português –site Referenciando)

Contâiner de formulário: <form>;Rótulo de item de formulário: <label>;Botão: <button>;Elemento de entrada de dados: <input>;Caixa de texto multilinha: <textarea>.Caixa de seleção: <select>;Opção de um select: <option>;

7

Tags HTML referenciadas na aula (em Português –site Referenciando)

Grupo de opções em um select: <optgroup>;

Agrupamento de itens de formulário: <fieldset>;

Legenda de um grupo de itens de formulário: <legend>;

8

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Contâiner de formulário: <form>;Rótulo de item de formulário: <label>;Botão: <button>;Elemento de entrada de dados: <input>

;Caixa de texto multilinha: <textarea>.Caixa de seleção: <select>;Opção de um select: <option>;

9

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Grupo de opções em um select: <optgroup>;

Agrupamento de itens de formulário: <fieldset>;

Legenda de um grupo de itens de formulário: <legend>;

10

Propriedades CSS referenciadas na aula (em Inglês –site SitePoint)

Bordas:border-width: largura da borda;border-style: estilo da borda;border-color: cor da borda.

Determinar a cor da letra e o fundo:color:cor do elemento;background-color: cor de fundo;background-image: imagem de fundo;

width: largura de um elemento;

11

Ponto chave da aula!

12

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.

13

14

A tag <form>

Formulário (tag <form>): 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.

<FORM id="form1" action="url" method=“post" > <!--...Coloque seus controles aqui... --> </FORM>

15

16

Tipos de componentes de formulário no HTML Versão 4

1 ou mais tags por componente;

Limitadíssimos!!

17

18

19

Tipos de componentes do HTML Versão 5Ainda 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

20

2111/04/23

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

Criar um formulário (siga esta receita)

1) Definir o contâiner de formulário <form>;

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

5) (opcional) Usar uma legenda para cada grupo <legend>;

23

Criar um formulário (siga esta receita)6) (opcional) Definir um rótulo para

cada item de formulário <label>;7) Criar o item de formulário

associado ao rótulo <input>, <button>, 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

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:http://www.brunocampagnolo.com/2010_1/testform

/

http://tinyurl.com/meuformulario2010

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

2611/04/23

1) Definir o contâiner de formulário (<form>)

Não mostra nada!Todos os componentes de formulário

devem ser colocados dentro do elemento <form>.

27

2) Definir o action do formulário, ou seja, para onde ele vai;

Troque o action pelo action que você precisa! http://www.brunocampagnolo.com/2010_1/testform/ http://tinyurl.com/meuformulario2010

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

28

29

30

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

31

As vars são separadas por &

3211/04/23

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

33

34

4) (opcional) Delimitar os grupos de itens através de <fieldset>;

35

11/04/23

5) (opcional) Usar uma legenda para cada grupo <legend>;

3611/04/23

6) (opcional) Definir um rótulo para cada item de formulário <label>;

O atributo for deve ter como valor o id do componente associado;

<label>

Especifica um rótulo que estende a área de foco do elemento;

Evita tiro ao alvo.

3711/04/23

Com <label>:

38

Sem<label>:

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

39

40

41

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!

42

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

Resultado44

Evoluindo o formulário

45

Caixa de senha46

Botão de rádio

Apenas uma opção de cada vez;O atributo name agrupa os controles;

47

Caixa de checagem48

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 arquivos50

Caixa de texto multilinha

cols e rows determinam o número de colunas e linhas;

51

Caixa de listagem

<select> é o container;Cada opção é um <option>.

52

Resultado53

Formulários54

Dicas para construção de formulários 1) Nunca esqueça de colocar rótulos (<label>); 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.

04/11/23Formulá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:<input type=“text” readonly=“readonly”

value=“xxx”/><input type=“text” disabled=“disabled”

value=“yyy”/>

Formulários em JavaScriptonsubmit x onclickO 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;

5611/04/23

5711/04/23

5811/04/23

59

Referências principais

http://www.maujor.com/blog/w3c/rec-forms.html

http://www.w3schools.com/html/html_forms.asp

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/improve-your-forms-using-html5/

Referências complementares

Firefox 2.0 and Access Keyshttp://juicystudio.com/article/firefox2-

accesskeys.php#realsolutionDiscussão sobre teclas de acesso no Firefox

Avaliador de Acessibilidadehttps://www.governoeletronico.gov.br/

acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios

Recomendações acessibilidadehttp://www.geocities.com/claudiaad/

acessibilidade_web.html

60