Laboratório de Informática Detalhamento sobre os itens de formulário (IMPRIMIR OU DEIXAR DE FÁCIL ACESSO!) 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

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.


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;


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.


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.



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"/>


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;


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


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.


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.


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.


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.



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.



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"/>


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>


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;


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;


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.


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


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;


Principais atributos para botões de rádio(tag <input type=“radio”>)disabled: inativo, fica em cinza;tabindex: posição do elemento na




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.


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


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.


Principais atributos para caixas de checagem(tag <input type=“checkbox”>)disabled: inativo, fica em cinza;tabindex: posição do elemento na




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:


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




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>



</select>

Caixa de Listagem Múltipla de uma linha múltipla

Menu

* Não recomendado!

<select name="s1" id="s1“ multiple="multiple" size="1">




</select>




Caixa de Listagem de mais de uma linha simples

menu, listbox, lista, selectbox

<select name="s1" id="s1" size="3">




</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">




</select>




Menu em castaca

Listbox, menu, listbox com grupos

<SELECT name="s1">

<OPTGROUP label="Grupo1">

<OPTION>Op1</OPTION>



</OPTGROUP>

<OPTGROUP label="Grupo2">



</OPTGROUP>

</SELECT>


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.


Principais atributos para menus(tag <select>)disabled: inativo, fica em cinza;tabindex: posição do elemento na




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;


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.


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!


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


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


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!


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.


<fieldset><legend>Contato:</legend><label>Telefone:<input type="text" /></label><label>Email:<input type="text"/></label></fieldset>


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"/>


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.


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


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


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


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


Teclas de Acessibilidade sugeridas

1 — Página inicial 2 — Ir para conteúdo 3 — Ir para menu 4 — Fale Conosco


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"/>


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


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

Documents

Laboratório de Informática Detalhamento sobre os itens de formulário (IMPRIMIR OU DEIXAR DE FÁCIL ACESSO!) 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula