laboratório de informática formulários em html 1º semestre 2010 > pucpr > bsi bruno c. de...
TRANSCRIPT
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