09-formularios

Prévia do material em texto

*
*
Laboratório de Informática
Formulários em HTML
1º Semestre 2010 > PUCPR > BSI 
Bruno C. de Paula
 
*
*
*
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;
Também deixaremos claro que nada impede o uso de forms HTML5 já!
*
*
*
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:
Projeto de Formulários;
Usabilidade;
Validação de Formulários;
Psicologia Cognitiva;
Etc...
*
*
*
Material extra referente ao assunto da aula
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/
*
*
*
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>;
*
*
*
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>;
*
*
*
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>;
*
*
*
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>;
*
*
*
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;
*
*
*
Ponto chave da aula!
*
*
*
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.
*
*
*
*
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>
*
*
*
*
Tipos de componentes de formulário no HTML Versão 4
1 ou mais tags por componente;
Limitadíssimos!!
*
*
*
*
*
*
*
*
*
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
*
*
*
Introdução ao Desenvolvimento Para Web 
*
*
*
*
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;
*
*
*
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>;
*
*
*
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.
*
*
*
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...
*
Introdução ao Desenvolvimento Para Web 
*
*
*
*
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>.
*
*
*
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).
*
*
*
*
*
*
*
*
*
No método GET, a informação é passada via barra de endereços
*
*
*
As vars são separadas por &
*
*
*
*
No método POST, a informação só pode ser vista com ferramentas especiais (Firebug)
*
*
*
*
4) (opcional) Delimitar os grupos de itens através de <fieldset>;
*
*
*
*
5) (opcional) Usar uma legenda para cada grupo <legend>;
Introdução ao Desenvolvimento Para Web 
*
*
*
*
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;
Introdução ao Desenvolvimento Para Web 
*
*
<label>
Especifica um rótulo que estende a área de foco do elemento;
Evita tiro ao alvo.
*
*
Introdução ao Desenvolvimento Para Web 
*
*
Com <label>:
*
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;
*
*
*
*
*
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!
*
*
*
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.
*
*
*
Resultado
*
*
*
Evoluindo o formulário
*
*
*
Caixa de senha
*
*
*
Botão de rádio
Apenas uma opção de cada vez;
O atributo name agrupa os controles;
*
*
*
Caixa de checagem
*
*
*
Formulários
*
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
*
*
*
Caixa de texto multilinha
cols e rows determinam o número de colunas e linhas;
*
*
*
Caixa de listagem
<select> é o container;
Cada opção é um <option>.
*
*
*Resultado
*
*
*
Formulários
*
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. 
*
*
*
Formulários
*
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 JavaScript
onsubmit x onclick
O 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;
*
*
*
*
*
*
*
*
*
*
*
*
*
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
*
*
*
Eleições americanas de 2000
*
*
Fonte: Página 173 do Beggining CSS 
A interface dos elementos de formulário é diferente em cada navegador!
*
*
Fonte da imagem: http://reference.sitepoint.com/html/optgroup
Não resolve totalmente pois problemas de margem, espaçamento, etc, persistem.
*
*
*
*
<fieldset>: Conjunto de campos;
<legend>: Legenda dos fieldset;
<label>: Rótulo de item de formulário;
<input type=“text”>: Caixa de texto;
<input type=“submit”>: Botão de envio;
accesskey: Tecla de acesso;
<form action="http://tinyurl.com/form2009li" id="f1">
 <fieldset>
 <legend>Dados Pessoais</legend>
 <label>Nome:
 <input type="text" name="n" id="n" accesskey="n" />
 </label>
 <label for="i" accesskey="i" title="Idade em anos">
 <input type="text" name="i" id="i" value="18" 
 maxlength="3" size="3" />
 </label>
 <input type="submit" />
 </fieldset>
 </form>
*
*
Cada componente é representado por uma ou mais tags;
Por exemplo, uma caixa de texto de uma linha é representada pela tag:
<input type="text" id="txt1" name="txt1" />
Uma caixa de seleção com duas opções é representada por:
<select id="s1" name="s1">
<option>Opcao1</option>
<option>Opcao2</option>
</select>
Todo controle deve ter um nome (propriedade name) e um valor (propriedade value); 
O valor pode mudar conforme interação com o usuário.
*
*
<form>
</form>
*
*
URL:
http://www.brunocampagnolo.com/2010_1/testform/ 
<form action="http://www.brunocampagnolo.com/2010_1/testform/">
 
 </form> 
Na PUCPR, aperte F12 para exibir o Firebug!
*
*
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset></fieldset>
 <fieldset></fieldset>
 </form>
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 </fieldset>
 </form>
 
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 <label for="nome">Nome:</label>
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 </fieldset>
 </form>
Permite a definição formal de rótulos para itens do formulários;
Quando o usuário clica no rótulo, o item de formulário é selecionado ou checado.
Aumentam a área útil de seleção de um item de formulário;
Lembre-se: caixas de texto não tem rótulos associados por padrão!
Útil para melhorar a acessibilidade e usabilidade de seu formulário;
Essencial para criar formulários da maneira certa, principalmente quando você usar botões de rádio e caixas de checagem!
Associado à tag <label>.
<label>Nome:<input type="text" name="nome"/></label>
<label for="idade">Idade:</label>
<input type="text" name="idade" id="idade"/>
Observe que há duas maneiras de especificar o rótulo.
Na primeira, tanto o controle quanto o rótulo estão dentro da tag <label>.
Na segunda, a associação é feita pelo atributo id.
A segunda maneira é mais usual.
*
*
Principais atributos para as caixas de texto de uma linha e caixa de senha (tag <input>)
Ver: http://www.referenciando.com/referencias/html-xhtml/html-tags/input
name: nome, usado na submissão;
id: identificador, usado em Javascript e associação com rótulos;
size: tamanho aparente em número de caracteres;
maxlength: número máximo de caracteres permitidos na digitação;
value: valor padrão quando a página é carregada;
readonly: somente leitura, não permite edição;
disabled: inativo, fica em cinza;
tabindex: posição do elemento na ordem de tabulação (tab order).
accesskey: tecla de acesso ao elemento (geralmente associada ao ALT).
*
*
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 <label for="nome">Nome:</label>
 <input type="text" 
 name="nome" 
 id="nome"
 value="Jamanta" />
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 </fieldset>
 </form>
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
<form action="http://tinyurl.com/form2009li">
 <fieldset>
 <legend>Obrigatorio</legend>
 <label for="nome">Nome:</label>
 <input type="text" 
 name="nome" 
 id="nome"
 value="Jamanta" 
 accesskey="n"
 />
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 </fieldset>
 </form>
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 <label for="nome">Nome:</label>
 <input type="text" 
 name="nome" 
 id="nome"
 value="Jamanta" 
 accesskey="n" />
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 </fieldset>
 <input type="submit" value="Cadastrar" />
 </form>
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 <label for="nome">Nome:</label>
 <input type="text" 
 name="nome" 
 id="nome"
 value="Jamanta" 
 accesskey="n" />
 </fieldset>
 <fieldset>
 <legend>Opcional</legend></fieldset>
 
 <input type="submit" value="Cadastrar" />
 
 </form>
*
*
<input type="password" 
 name="senha" 
 id="senha" 
 value="12345" />
*
*
Botões de rádio
Permite a seleção de apenas uma opção dentro de um conjunto de opções disponíveis;
Mutuamente exclusivos: quando um é selecionado os outros não podem estar selecionados;
No Windows são redondos;
Nomes alternativos: radio button;
Cada grupo de botões de rádio tem que ter o mesmo nome (atributo name).
O atributo checked indica se está selecionado.
O que diferencia os botões de rádio são os atributos ID e value.
Principais atributos para botões de rádio (tag <input type=“radio”>)
Ver mais em:
http://www.referenciando.com/referencias/html-xhtml/html-tags/input
name: identificador do botão de rádio;
value: valor associado a cada botão de rádio, por padrão é o valor “on” (ligado);
checked: checa o botão de rádio por padrão e reflete o estado de checagem. Para um mesmo grupo de botões de rádio, apenas uma opção pode estar marcada por padrão;
disabled: inativo, fica em cinza;
tabindex: posição do elemento na ordem de tabulação (tab order).
accesskey: tecla de acesso ao elemento (geralmente associada ao ALT).
<input type="radio" 
 name="sexo" id="masculino" value="1" 
 checked="checked" />
 <label for="masculino">Masculino</label>
 <input type="radio" 
 name="sexo" id="feminino" value="2" />
 <label for="feminino">Feminino</label>
*
*
Caixas de checagem
Chaves do tipo ligado/desligado;
Funciona como se fosse um tipo lógico (verdadeiro / falso);
No Windows, são quadrados;
Nomes alternativos: checkbox;
O atributo checked indica se está marcado:
Marcado: checked igual a true;
Não marcado: checked igual a false;
Em uma mesma página, as caixas de checagem podem ter o mesmo nome, mas não há agrupamento de checkbox.
O que diferencia as caixas de checagem são os atributos ID e value.
Principais atributos para caixas de checagem (tag <input type=“checkbox”>)
Ver mais em:
http://www.referenciando.com/referencias/html-xhtml/html-tags/input
name: identificador da caixa de checagem;
value: especifica o valor associado à checkbox quando é checada. Por padrão (se não especificar o valor do atributo), o valor é on;
checked: valor que especifica se a checkbox está ou não checada por padrão.
disabled: inativo, fica em cinza;
tabindex: posição do elemento na ordem de tabulação (tab order).
accesskey: tecla de acesso ao elemento (geralmente associada ao ALT).
 
<input type="checkbox" 
 name="receberAtualizacoes"
 id="receberAtualizacoes"
 checked="checked"/>
 <label for="receberAtualizacoes">
 Receber atualizacoes
 </label>
*
*
Principais atributos para as caixas de texto de mais de uma linha (tag <input type=“file”>)
Todos os demais atributos de textfield, com restrição no atributo value;
accept: Lista de tipos de arquivos aceitos pela caixa de envio de arquivos:
text/html, image/png, image/gif, video/mpeg, text/css, audio/basic;
Atributo ignorado pelos navegadores atuais.
<label for="foto">Foto:</label>
<input type="file" id="foto" name="foto" />
*
*
<label for="observacoes">Observacoes:</label><br />
<textarea cols="30" rows="5">Digite aqui</textarea>
Principais atributos para as caixas de texto de mais de uma linha (tag <textarea>)
Ver: http://www.referenciando.com/referencias/html-xhtml/html-tags/textarea
name: identificador da textarea;
cols: determina o número de colunas que a checkbox vai apresentar;
rows: determina o número de linhas que a checkbox apresenta;
disabled: inativo, fica em cinza;
readonly: somente leitura, não permite edição.
*
*
Principais atributos para menus (tag <select>)
<select> é o Contâiner pai de <option> e <optgroup>;
Ver mais em: http://www.referenciando.com/referencias/html-xhtml/html-tags/select
name: identificador do select;
size: número de itens vistos pelo usuário so mesmo tempo. Se for 1, é criado um menu pull-down, se for maior, é criado um menu de rolagem.
multiple: permite que o usuário selecione mais de um item do menu.
disabled: inativo, fica em cinza;
tabindex: posição do elemento na ordem de tabulação (tab order).
accesskey: tecla de acesso ao elemento (geralmente associada ao ALT).
Principais atributos para opções de menu (tag <option>)
<option> define cada opção;
Ver mais em: http://www.referenciando.com/referencias/html-xhtml/html-tags/option
selected: permite definir quais são as opções marcadas por padrão. Semelhante ao checked do radio e do checkbox.
value: valor associado ao item. Após o envio do formulário, é o value que é submetido para o cgi/php/etc;
label: texto que é exibido em cada opção. Ignorado pelo Firefox;
disabled: inativo, fica em cinza;
 
 <label for="corPredileta">Cor predileta:</label>
 <select id="cor" name="cor">
 <optgroup label="Primarias">
 <option>Azul</option>
 <option selected="selected">Vermelho</option>
 </optgroup>
 <optgroup label="Outras">
 <option>Rosa</option>
 <option>Salmao</option>
 </optgroup>
 </select>
*
*
 <form action="http://www.brunocampagnolo.com/2010_1/testform/">
 <fieldset>
 <legend>Obrigatorio</legend>
 <p>
 <label for="nome">Nome:</label>
 <input type="text" 
 name="nome" 
 id="nome"
 value="Jamanta" 
 accesskey="n" />
 </p>
 
 <p>
 <input type="password" 
 name="senha" 
 id="senha" 
 value="12345" />
 </p>
 
 <p>
 <input type="radio" 
 name="sexo" id="masculino" value="1" 
 checked="checked" />
 <label for="masculino">Masculino</label>
 <input type="radio" 
 name="sexo" id="feminino" value="2" />
 <label for="feminino">Feminino</label>
 
 </p>
 
 
 
 
 </fieldset>
 <fieldset>
 <legend>Opcional</legend>
 <p>
 
 <input type="checkbox" 
 name="receberAtualizacoes"
 id="receberAtualizacoes"
 checked="checked"/>
 <label for="receberAtualizacoes">
 Receber atualizacoes
 </label>
 
 </p> 
 
 <p>
 <label for="foto">Foto:</label>
 <input type="file" id="foto" name="foto" />
 </p>
 
 <p>
 <label for="observacoes">Observacoes:</label><br />
 <textarea cols="30" rows="5">Digite aqui</textarea>
 </p>
 
 <p>
 <label for="corPredileta">Cor predileta:</label>
 <select id="cor" name="cor">
 <optgroup label="Primarias">
 <option>Azul</option>
 <option selected="selected">Vermelho</option>
 </optgroup>
 <optgroup label="Outras">
 <option>Rosa</option>
 <option>Salmao</option>
 </optgroup>
 </select></p>
 </fieldset>
 
 <input type="submit" value="Cadastrar" /><br />
 <input type="reset" value="Limpar" />
 
 </form>
*
*