Laboratório de Informática Detalhamento sobre os itens de formulário (IMPRIMIR OU DEIXAR DE...
Transcript of Laboratório de Informática Detalhamento sobre os itens de formulário (IMPRIMIR OU DEIXAR DE...
Laboratório de InformáticaDetalhamento sobre os itens de formulário(IMPRIMIR OU DEIXAR DE FÁCIL ACESSO!)
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
04/11/23Formulários2
Tipos de Componentes de Formulário do HTML versão 4
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.
04/11/23Formulários3
Tipos de Componentes de Formulário do HTML versão 4 Caixas de Texto; Botões; Botões de Rádio; Caixas de Checagem; Menus:
Caixas de Seleção; Caixas de Listagem;
Rótulos; Grupos de Campos; Campos Ocultos;
04/11/23Formulários4
Tipos de Componentes de Formulário do HTML versão 4 – Caixas de Texto Permitem a entrada de informações textuais; Útil para entrada de dados simples; Por padrão, a digitação é livre, sem nenhum
tipo de validação; Pode ser:
Caixa de Texto de uma linha; Caixa de Senha: substitui letras por “*” ou similar; Caixa de Texto de mais de uma linha; Caixa de Envio de Arquivo: permite envio de arquivos
ao servidor web.
04/11/23Formulários5
Nome Nomes alternativos
Exemplo de Código
Imagem
Caixa de Texto de uma linha
Textbox, input, text field, campo de texto.
<input
type="text"
name="t1"
id="t1"
value="Bruno"/>
Caixa de Senha
Password Box, campo senha.
<input
type= "password"
name="t1"
id="t1"
value="Bruno"/>
Em destaque, a diferença entre os tipos de caixa de texto.O atributo type diferencia estes tipos de caixa.
04/11/23Formulários6
Nome Nomes alternativos
Exemplo de Código
Imagem
Caixa de Texto de mais de uma linha
Textarea, Textbox multiline.
<textarea rows=“2” cols=“5”>
Olá, Mundo
</textarea>
Caixa de Envio de Arquivo
File Box, file upload.
<input
type="file"/>
04/11/23Formulários7
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;
04/11/23Formulários8
Principais atributos para as caixas de texto de uma linha e caixa de senha (tag <input>)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).
04/11/23Formulários9
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.
04/11/23Formulários10
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.
04/11/23Formulários11
Tipos de Componentes de Formulário do HTML versão 4 – Botões
Permitem a execução de um comando provocado, geralmente, através do clique do mouse;
Comandos podem ser:Enviar os dados de um formulário;Limpar os campos de um formulário;Executar código Javascript.
04/11/23Formulários12
Tipos de Componentes de Formulário do HTML versão 4 – Botões Pode ser dos tipos:
Botão normal;Botão com conteúdo HTML;Botão de submissão: envia os dados de um
formulário ao servidor web;Botão de submissão gráfico: imagem, que
quando clicada, envia os dados de um formulário ao servidor web
Botão de limpeza de formulário: limpa os dados de um formulário, retornando ao valor inicial.
04/11/23Formulários13
Nome Nomes alternativos
Exemplo de Código
Imagem
Botão normal
Button, Push Button
<input type=“button“ value=“Clique aqui”/>
Botão com conteúdo HTML
Button, Push Button
<button type=“button“>
<h1><i>Meu</i> Botão</h1>
</button>
A única diferença entre estes dois tipos é que: O botão com conteúdo HTML permite imagens, texto formatado, etc.
04/11/23Formulários14
Nome Nomes alternativos
Exemplo de Código
Imagem
Botão de submissão
Submit, Submit Button, Send Button
<input type=“submit“/>
OU
<button type=“submit“>
Enviar Dados
</button>
Botão de imagem
Submit, image button
<input type="image" src="bt.gif"/>
04/11/23Formulários15
Nome Nomes Alternativos
Exemplo de Código Imagem
Botão de “limpeza”
Button, Reset, reset button, botão Limpar
<input type=“reset“/>
<button type= “reset“ >Limpar</button>
04/11/23Formulários16
Principais atributos para botões(tag <input> e tag <button>)
Ver mais em: http://www.referenciando.com/
referencias/html-xhtml/html-tags/button name: identificador do botão; type: pode ser button, submit ou reset
conforme o tipo de botão; Tag <input>
value: texto do Botão e o que é enviado para o servidor quando o submit é feito;
Tag <button>value: o que é enviado para o servidor quando o
submit é feito;
04/11/23Formulários17
Principais atributos para botões(tag <input> e tag <button>)disabled: indica botão desabilitado;tabindex: posição do elemento na
ordem de tabulação (tab order);accesskey: tecla de acesso ao
elemento;
src (apenas para type=“image”): Imagem associada ao botão de submissão;
alt (apenas para type=“image”): Texto alternativo à imagem;
04/11/23Formulários18
Tipos de Componentes de Formulário do HTML versão 4 – 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.
04/11/23Formulários19
<FORM name="form1" id="form1"><label for="sexoM">Masculino</label><input type="radio" checked="checked" name="sexo“ id="sexoM“ value="M"/><label for="sexoF">Feminino</label><input type="radio" name="sexo" id="sexoF“
value=“F”/></FORM>
O que diferencia os botões de rádio acima são os atributos ID e value.
04/11/23Formulários20
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;
04/11/23Formulários21
Principais atributos para botões de rádio(tag <input type=“radio”>)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).
04/11/23Formulários22
Tipos de Componentes de Formulário do HTML versão 4 – Caixa 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.
04/11/23Formulários23
<label for="cb1">Professor</label><input type="checkbox" id="cb1" name="emprego" value="1" checked="checked"/><label for="cb2">Desenvolvedor Web</label><input type="checkbox" id="cb2" name="emprego" value="2" checked="checked"/>
O que diferencia as caixas de checagem acima são os atributos ID e value.
04/11/23Formulários24
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.
04/11/23Formulários25
Principais atributos para caixas de checagem(tag <input type=“checkbox”>)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).
04/11/23Formulários26
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:
04/11/23Formulários27
Tipos de Componentes de Formulário do HTML versão 4 – Menus Permitem a seleção de um ou mais valores dentro
de um conjunto de valores possível; Pode ser dos tipos:
Caixa de Listagem de uma linha com seleção simples (Combobox);
Caixa de Listagem de uma linha com seleção múltipla; Caixa de Listagem de mais de uma linha com seleção
simples (Listbox); Caixa de Listagem de mais de uma linha com seleção
múltipla (Listbox); Menu em castaca;
Associado às tags: <select> (contâiner), <option> (cada opção) e <optgroup> (define grupo de opões);
04/11/23Formulários28
Nome Nomes alternativos
Exemplo de Código Imagem
Caixa de Listagem de uma linha Simples
Selectbox, menu, combobox, combo field, caixa de combinação, menu pulldown, caixa de seleção
<select name="s1" id="s1">
<option>Op1</option>
<option>Op2</option>
<option>Op3</option>
</select>
Caixa de Listagem Múltipla de uma linha múltipla
Menu
* Não recomendado!
<select name="s1" id="s1“ multiple="multiple" size="1">
<option>Op1</option>
<option>Op2</option>
<option>Op3</option>
</select>
04/11/23Formulários29
Nome Nomes alternativos
Exemplo de Código Imagem
Caixa de Listagem de mais de uma linha simples
menu, listbox, lista, selectbox
<select name="s1" id="s1" size="3">
<option>Op1</option>
<option>Op2</option>
<option>Op3</option>
</select>
Caixa de Listagem de mais de uma linha Múltipla
Listbox, selectbox, menu, menu de rolagem.
<select name="s1" id="s1" size="3" multiple="multiple">
<option>Op1</option>
<option>Op2</option>
<option>Op3</option>
</select>
04/11/23Formulários30
Nome Nomes alternativos
Exemplo de Código Imagem
Menu em castaca
Listbox, menu, listbox com grupos
<SELECT name="s1">
<OPTGROUP label="Grupo1">
<OPTION>Op1</OPTION>
<OPTION>Op2</OPTION>
<OPTION>Op3</OPTION>
</OPTGROUP>
<OPTGROUP label="Grupo2">
<OPTION>Op4</OPTION>
<OPTION>Op5</OPTION>
</OPTGROUP>
</SELECT>
04/11/23Formulários31
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.
04/11/23Formulários32
Principais atributos para menus(tag <select>)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).
04/11/23Formulários33
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;
04/11/23Formulários34
Principais atributos para opções de menu(tag <optgroup>)<optgroup> define grupos de opçõesVer mais em:
http://www.referenciando.com/referencias/html-xhtml/html-tags/optgroup
label: texto que é exibido como o nome do item;
disabled: inativo, fica em cinza.
04/11/23Formulários35
Tipos de Componentes de Formulário do HTML versão 4 – RótulosPermite 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!
04/11/23Formulários36
Tipos de Componentes de Formulário do HTML versão 4 – RótulosÚ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>.
04/11/23Formulários37
<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.
04/11/23Formulários38
Principais atributos para rótulos(tag <label>)for: identificador do controle que o
rótulo está associado.
Importante: o for é em relação ao ID e não em relação ao name!
04/11/23Formulários39
Tipos de Componentes de Formulário do HTML versão 4 – Grupos de CamposPermite a organização lógica de um
conjunto de itens de formulário em grupos;
Uso aconselhável para dividir formulários grandes e deixá-los mais acessíveis;
Associado às tags:<fieldset>: define o grupo;<legend>: legenda do grupo.
04/11/23Formulários40
<fieldset><legend>Contato:</legend><label>Telefone:<input type="text" /></label><label>Email:<input type="text"/></label></fieldset>
04/11/23Formulários41
Tipos de Componentes de Formulário do HTML versão 4 – Campo oculto Permite o armazenamento de informações
invisíveis e que não podem ser alteradas; Importante: se o usuário exibir o código fonte
ele vai visualizar as informações; A utilidade deste campo é passar informações
sem que o usuário comum perceba ou possa alterar.
Exemplo:<input type="hidden" value="12345"/>
04/11/23Formulários42
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.
04/11/23Formulários43
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”/>
04/11/23Formulários44
Ordem de Tabulação (atributo taborder)
Atributo taborder; Especifica a ordem de navegação via tecla
<TAB>, em ordem crescente; Valor que vai de 0 a 32767; Elementos desabilitados não são
considerados no taborder; Elementos que aceitam taborder:
A, AREA, BUTTON, INPUT, OBJECT, SELECT e TEXTAREA; Exemplo:
<input type=“text” taborder=“10”/> <input type=“text” taborder=“20”/>
04/11/23Formulários45
Teclas de Acesso (atributo accesskey)
O atributo accesskey determina uma tecla de atalho acessível através da tecla escolhida mais a tecla ALT, SHIFT+ALT ou ALT+Tecla,Enter;
Difícil utilizar pois as teclas se confundem com o comportamento padrão do browser, ver [2];
Item importante para a acessibilidade; Ver avaliador de acessibilidade em [3] e
recomendações em [4]; Só pode ser utilizado com: <a>, <area>,
<button>, <input>, <label>, <legend> e <textarea>;
04/11/23Formulários46
<LABEL for="fuser" accesskey="1">User Name</LABEL><INPUT type="text" name="user" id="fuser"><INPUT type="text" name="code" id="fcode" accesskey="2"><a href="http://www.pucpr.br/" accesskey="h">Home</a>
No exemplo, três teclas de acesso são definidas. No Firefox, use as combinações SHIFT+ALT+1, etc.No ID, use ALT + 1, ALT+2 e ALT+h, <enter>
04/11/23Formulários47
Teclas de Acessibilidade sugeridas
1 — Página inicial 2 — Ir para conteúdo 3 — Ir para menu 4 — Fale Conosco
04/11/23Formulários48
Dica Visual (tooltip)
O atributo title implementa uma dica visual (tooltip) flutuante quando o mouse passa sobre o elemento.
Essa dica é essencial para navegadores não visuais; Dica: esse atributo pode ser usado em outras tags do
HTML. <input title="idade em anos" type="text"
name="idade" id="idade"/>
04/11/23Formulários49
Bibliografia Complementar
[1] Web Form Design: Modern Solutions and Creative Ideas:http://www.smashingmagazine.com/
2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
[2] Firefox 2.0 and Access Keyshttp://juicystudio.com/article/firefox2-
accesskeys.php#realsolutionDiscussão sobre teclas de acesso no
Firefox
04/11/23Formulários50
Bibliografia Complementar
[3] Avaliador de Acessibilidadehttps://
www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
[4] Recomendações acessibilidadehttp://www.geocities.com/claudiaad/
acessibilidade_web.html