Anda di halaman 1dari 14

Formulrio Controles

(X)HTML
Professor Jolvani
Aulas 25 e 26

Formulrio Acessibilidade - (X)HTML


Ol

programadores de xHtml

Vamos

continuar nossa aula de formulrios

Criamos

a prxima aula copiando da Aula18....

Aula19.html
Aprenderemos

sobre acessibilidade nos formulrios

http://

maujor.com/tutorial/lay2col-faux-colunm.php
Soluo layout largura varivel width:auto;

Formulrio Acessibilidade - (X)HTML

Alguns controles de formulrio como os componentes button possuem rtulos


associados a eles (submit, reset, button, file...) usa-se o atributo value para definir
o nome....

Mas a maioria dos outros controles no possuem rtulo como os Labels, textarea,
checkbox.... Para os demais usa-se a tag <label> usando o atributo for= + o nome
do id do input... Visualmente no altera nada.

O for usado para acessar explicitamente o controle, mesmo valor do id

Formulrio Acessibilidade - (X)HTML

Posso utilizar o controle (input) dentro do label... Colocar o campo dentro do


label

Mas a maioria dos outros controles no possuem rtulo como os Labels,


textarea, checkbox.... Para os demais usa-se a tag <label> usando o atributo
for= + o nome do id do input... Visualmente no 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).

Formulrio Acessibilidade - (X)HTML

Temos ainda o controle <fieldset> serve para estruturar o formulrio.


Serve para agrupar um conjunto de controles que tenham finalidades
relacionadas... Como nome, endereo e sexo por exemplo.

Dentro do fieldset colocamos a legenda... (que grupo esse?)

Formulrio Acessibilidade - (X)HTML

Podemos agrupar quantos contedos forem necessrios...

Formulrio 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 no esta associado a ningum ele no se


posiciona a nenhum controle (campo)... Teste (em resumo por exemplo)

Isso so aspectos de acessibilidade, ou seja, podemos navegar pelo


formulrio 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 usurio


executa uma ao sobre ele. E existem 3 mtodos para colocar o foco
nos elementos:

Formulrio 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 ento


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

Formulrio 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 navegao pode mudar. No existe


padro. No Firefox usa-se alt+shfit+Letra.

bom lembrar dos elementos que do acessibilidade ao portal, (fieldset


em conjunto com legend, label e atributos (tabindex e accesskey))

Mais elementos: desabled e readonly

Desabled = desabilita o controle para aes do usurio vamos ver o


efeito.

No
campo
Nome,
vamos
colocar
value=internauta
disabled=desabled observe o controle desabilitado.

Formulrio Acessibilidade Parte 2

No exemplo ele desabilita o foco, no permite acesso ao campo e no


envia o dado do formulrio para o servidor...

O atributo readonly, vc sempre vai usar um ou outro. Nele vc consegue


dar o foco, navegar por tabulao, envia os dados para o servidor,
porm eu no posso editar o campo, ou seja, no posso alterar o valor
definido pra ele.

Existe outro controle denominado <input type=hidden ... />

Formulrio Acessibilidade Parte 2

<input type=hidden ... />

Permite enviar informaes que no quero apresentar ao usurio mas


que devem ser enviadas ao servidor...

hidden, significa que a informao fica escondida do internauta. Ele vai


enviar o valor desse controle e no vai apresentar nada ao internauta.
Sendo um controle oculto...

Testando...

Buenas, ento vimos todas as sees de acessibilidade espero que vc


faam formulrios acessveis....

At a prxima...

Prxima Aula: Caracteres Especiais

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

Prxima Aula: Caracteres Especiais


<fieldset style="border-color:yellow; width:210px" >
<legend>Informaes 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>