Formulário Controles(X)HTML

Professor Jolvani

Aulas 25 e 26

Formulário Acessibilidade - (X)HTMLOlá programadores de xHtmlVamos continuar nossa aula de formuláriosCriamos a próxima aula copiando da

Aula18....

Aula19.htmlAprenderemos sobre acessibilidade nos

formulárioshttp://maujor.com/tutorial/lay2col-faux-

colunm.php

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

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

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

Formulário Acessibilidade - (X)HTML Podemos agrupar quantos conteúdos forem necessários...

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:

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

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.

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

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

Próxima Aula: Caracteres Especiais

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>

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>