Aula 25 e 26 formulário acessibilidade

189 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
189
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 25 e 26 formulário acessibilidade

  1. 1. Formulário Controles (X)HTML Professor Jolvani Aulas 25 e 26
  2. 2. Formulário Acessibilidade - (X)HTML Olá programadores de xHtml Vamos continuar nossa aula de formulários Criamos a próxima aula copiando da Aula18.... Aula19.html Aprenderemos sobre acessibilidade nos formulários http://maujor.com/tutorial/lay2col-faux-colunm. php
  3. 3. Formulário Acessibilidade - (X)HTML  Alguns controles de formulário como os componentes button possuem rótulos associados a eles (submit, reset, button, file...) usa-se o atributo value para definir o nome....  Mas a maioria dos outros controles não possuem rótulo como os Labels, textarea, checkbox.... Para os demais usa-se a tag <label> usando o atributo for=“” + o nome do id do input... Visualmente não altera nada.  O for é usado para acessar explicitamente o controle, mesmo valor do id
  4. 4. Formulário Acessibilidade - (X)HTML  Posso utilizar o controle (input) dentro do label... Colocar o campo dentro do label  Mas a maioria dos outros controles não possuem rótulo como os Labels, textarea, checkbox.... Para os demais usa-se a tag <label> usando o atributo for=“” + o nome do id do input... Visualmente não altera nada.  Para que serve o atributo for? Para associar explicitamente o label ao controle “input type=“text” id=“nome”.... Tanto o label quanto o controle devem possuir o mesmo valor (id e for = “nome”).
  5. 5. Formulário Acessibilidade - (X)HTML  Temos ainda o controle <fieldset> serve para estruturar o formulário. Serve para agrupar um conjunto de controles que tenham finalidades relacionadas... Como nome, endereço e sexo por exemplo.  Dentro do fieldset colocamos a legenda... (que grupo é esse?)
  6. 6. Formulário Acessibilidade - (X)HTML  Podemos agrupar quantos conteúdos forem necessários...
  7. 7. Formulário Acessibilidade - (X)HTML  Outro aspecto a acessibilidade, quando nos clicamos em um controle, do tipo fiald = campo, no label do controle, por exemplo senha, nome (no label) o cursor é posicionado no controle em que o label esta associado...  Se eu clicar em um label que não esta associado a “ninguém” ele não se posiciona a nenhum controle (campo)... Teste (em resumo por exemplo)  Isso são aspectos de acessibilidade, ou seja, podemos navegar pelo formulário com algumas teclas de atalho, nesse caso com o clique do mouse.  Nos temos ainda outros elementos de acessibilidade... Atributo tabindex  Nos documentos xhtml um elemento recebe o foco quando o usuário executa uma ação sobre ele. E existem 3 métodos para colocar o foco nos elementos:
  8. 8. Formulário Acessibilidade – Parte 2  Podemos usar o mouse e apontar para o elemento clicando sobre ele...  Com o teclado usando o controlo tab = tabindex... Teste...  Ou definir uma tecla de atalho para acessar o elemento. Podemos então definir uma letra para usar como atalho....  Usando o atributo tabindex. Por default tabindex inicia em zero (0)  Coloque tabindex=1 para resumo e teste usando a tecla tab. Observe que mudamos toda ordem dos controles....
  9. 9. Formulário Acessibilidade – Parte 2  Temos outro controle de acessibilidade o accesskey. Onde podemos definir uma letra para definir um determinado elemento. Para nome podemos usar a letra N por exemplo: accesskey=“N”  Porem, dependendo do navegador a navegação pode mudar. Não existe padrão. No Firefox usa-se alt+shfit+Letra.  É bom lembrar dos elementos que dão acessibilidade ao portal, (fieldset em conjunto com legend, label e atributos (tabindex e accesskey))  Mais elementos: desabled e readonly  Desabled = desabilita o controle para ações do usuário vamos ver o efeito.  No campo Nome, vamos colocar value=“internauta” e disabled=“disabled” observe o controle desabilitado.
  10. 10. Formulário Acessibilidade – Parte 2  No exemplo ele desabilita o foco, não permite acesso ao campo e não envia o dado do formulário para o servidor...  O atributo readonly, vc sempre vai usar um ou outro. Nele vc consegue dar o foco, navegar por tabulação, envia os dados para o servidor, porém eu não posso editar o campo, ou seja, não posso alterar o valor definido pra ele.  Existe outro controle denominado <input type=“hidden” ... />
  11. 11. Formulário Acessibilidade – Parte 2  <input type=“hidden” ... />  Permite enviar informações que não quero apresentar ao usuário mas que devem ser enviadas ao servidor...  hidden, significa que a informação fica escondida do internauta. Ele vai enviar o valor desse controle e não vai apresentar nada ao internauta. Sendo um controle oculto...  Testando...  Buenas, então vimos todas as seções de acessibilidade espero que vc façam formulários acessíveis....  Até a próxima...
  12. 12. Próxima Aula: Caracteres Especiais
  13. 13. Próxima Aula: Caracteres Especiais <table border=“1”> <th colspan=“2”>Login<th> <tr><td> <label for=“nome”>Nome: </label> </td> <td> <input type=“text” id=“nome”/> </td> </tr> <tr><td>Senha:</td><td><input /></td></tr> </table>
  14. 14. Próxima Aula: Caracteres Especiais <fieldset style="border-color:yellow; width:210px" > <legend>Informações Pessoais</legend> Nome: <input type="text" id="nome" /> <br /> Senha: <input type="password" id="senha" /> <br /> Sexo: <br /> <input type="radio" name="sexo" value="M" />Masculino <br /> <input type="radio" name="sexo" value="F" />Feminino <br /> <input type="reset" value="Limpar" /> <br /> </fieldset>

×