1. Formulário Controles
(X)HTML
Professor Jolvani
Aulas 25 e 26

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. 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. 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. 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. Formulário Acessibilidade - (X)HTML
 Podemos agrupar quantos conteúdos forem necessários...

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. 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. 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. 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. 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. Próxima Aula: Caracteres Especiais

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