Laboratório de InformáticaFormulários em HTML

1º Semestre 2009 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

211/04/23

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.

411/04/23

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

511/04/23

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/impr

ove-your-forms-using-html5/

611/04/23

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

711/04/23

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

811/04/23

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

911/04/23

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

1011/04/23

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;

1111/04/23

Exemplos da aula

Resumo sobre todos os tipos de item de formulário;

Exemplo de formulário simples;Exemplo de formulário simples;Exemplo de formulário mais elaborado;Componentes de formulário do HTML 4;Componentes de formulário do HTML 5 -

Abrir com navegador Opera;

1211/04/23

Ponto chave da aula!

1311/04/23

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.

1411/04/23

1511/04/23

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>

1611/04/23

Exemplo!

1711/04/23

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

1 ou mais tags por componente;

Limitadíssimos!!Ver exemplos;Guarde este resumo!

1811/04/23

1911/04/23

2011/04/23

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/operaportableVer exemplos;

2111/04/23

2211/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;

2311/04/23

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

2411/04/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.

2511/04/23

Exemplo de formulário

Vamos começar com este formulário...Ao clicar no botão cadastrar, os dados

são enviados para a página:–http://tinyurl.com/form2009li–

E vamos evoluir para este...

2611/04/23

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

2811/04/23

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

2911/04/23

3011/04/23

3111/04/23

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

3211/04/23

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

3311/04/23

3411/04/23

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

3511/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>:

3811/04/23

Sem<label>:

Área clicável em roxo

7) Criar o item de formulário associado ao rótuloVamos criar uma

caixa de texto através da tag input com atributo type = text;

3911/04/23

4011/04/23

4111/04/23

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!

4211/04/23

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.

4311/04/23

Resultado (ver link)

4411/04/23

Evoluindo o formulário

4511/04/23

Caixa de senha

4611/04/23

Botão de rádio

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

4711/04/23

Caixa de checagem

4811/04/23

04/11/23Formulá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

5011/04/23

Caixa de texto multilinha

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

5111/04/23

Caixa de listagem

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

5211/04/23

Resultado(ver link)

5311/04/23

04/11/23Formulá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”/>

5611/04/23

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 Keys– http://juicystudio.com/article/firefox2-

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

Recomendações acessibilidade– http://www.geocities.com/claudiaad/

acessibilidade_web.html

5711/04/23

5811/04/23

Próxima aula

CSS:–Seletores!–Textos e Fontes!