Bruno C. de Paula
Laboratório de Informática
Detalhamento sobre os itens de
formulário
(IMPRIMIR OU DEIXAR DE FÁCIL
ACESSO!)
1º Semestre 2010 > PUCPR > BSI
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.


11/5/2015
2
Formulários
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;

11/5/2015
3
Formulários
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.
11/5/2015
4
Formulários
Nome
Nomes
Exemplo de
alternativos Código
Caixa de
Texto de
uma
linha
Textbox,
input, text
field,
campo de
texto.
Imagem
<input
type="text"
name="t1"
id="t1"
value="Bruno"/>
Caixa de Password <input
Senha
Box, campo type= "password"
name="t1"
senha.
id="t1"
value="Bruno"/>
Em destaque, a diferença entre os tipos de caixa de texto.
O atributo type diferencia estes tipos de caixa.
11/5/2015
5
Formulários
Nome
Nomes
Exemplo de
alternativos Código
Caixa de
Texto de
mais de
uma
linha
Caixa de
Envio de
Arquivo
Textarea,
Textbox
multiline.
<textarea
rows=“2”
cols=“5”>
Olá, Mundo
</textarea>
File Box,
file upload.
<input
type="file"/>
Imagem
11/5/2015
6
Formulários
Principais atributos para as caixas de
texto de uma linha e caixa de senha
(tag <input>)

Ver:
http://www.referenciando.com/referencias/htmlxhtml/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;

11/5/2015
7
Formulários
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).
11/5/2015
8
Formulários
Principais atributos para as caixas de
texto de mais de uma linha
(tag <textarea>)

Ver:
http://www.referenciando.com/referencias/ht
ml-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.

11/5/2015
9
Formulários
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.
11/5/2015
10
Formulários
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.
11/5/2015
11
Formulários
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.
11/5/2015
12
Formulários
Nome
Nomes
Exemplo de
alternativos Código
Botão
normal
Button,
Push
Button
Botão com Button,
conteúdo
Push
HTML
Button
Imagem
<input type=“button“
value=“Clique aqui”/>
<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.
11/5/2015
13
Formulários
Nome
Nomes
Exemplo de
alternativos Código
Botão de
Submit,
submissão Submit
Button,
Send
Button
<input
type=“submit“/>
OU
<button
type=“submit“>
Enviar Dados
</button>
Botão de
imagem
<input
type="image"
src="bt.gif"/>
Submit,
image
button
Imagem
11/5/2015
14
Formulários
Nome
Nomes
Exemplo de Código
Alternativo
s
Botão de Button,
“limpeza” Reset,
reset
button,
botão
Limpar
Imagem
<input type=“reset“/>
<button type= “reset“
>Limpar</button>
11/5/2015
15
Formulários
Principais atributos para botões
(tag <input> e tag <button>)
Ver mais em:
 http://www.referenciando.com/referencias/ht
ml-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
11/5/2015
é feito;
16
Formulários
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;
11/5/2015
17
Formulários
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.
11/5/2015

18
Formulários
<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.
11/5/2015
19
Formulários
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;

11/5/2015
20
Formulários
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).
11/5/2015
21
Formulários
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.
11/5/2015
22
Formulários
<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.
11/5/2015
23
Formulários
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.

11/5/2015
24
Formulários
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).
11/5/2015
25
Formulários
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:
11/5/2015
26
Formulários
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
(Combobox);
 Caixa de Listagem de
 Caixa de Listagem de
(Listbox);
 Caixa de Listagem de
(Listbox);
 Menu em castaca;

uma linha com seleção simples
uma linha com seleção múltipla;
mais de uma linha com seleção simples
mais de uma linha com seleção múltipla
Associado às tags: <select> (contâiner), <option> (cada
opção) e <optgroup> (define grupo de opões);
11/5/2015
27
Formulários
Nome
Nomes
alternativos
Exemplo de Código
Caixa de
Listage
m 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
recomendad
o!
<select name="s1" id="s1“
multiple="multiple" size="1">
<option>Op1</option>
<option>Op2</option>
<option>Op3</option>
</select>
11/5/2015
28
Imagem
Formulários
Nome
Nomes
Exemplo de Código
Imagem
alternativos
<select name="s1" id="s1"
Caixa de menu,
size="3">
Listagem listbox,
<option>Op1</option>
de mais lista,
<option>Op2</option>
de uma
selectbox
<option>Op3</option>
</select>
linha
simples
<select name="s1" id="s1"
Caixa de Listbox,
size="3" multiple="multiple">
Listagem selectbox,
<option>Op1</option>
de mais menu,
<option>Op2</option>
de uma
menu de
<option>Op3</option>
</select>
linha
rolagem.
Múltipla
11/5/2015
29
Formulários
Nome Nomes
Exemplo de Código
alternativos
Menu
Listbox,
em
menu,
castaca
listbox com
grupos
Imagem
<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>
11/5/2015
30
Formulários
Principais atributos para menus
(tag <select>)
<select> é o Contâiner pai de <option> e
<optgroup>;
 Ver mais em:
http://www.referenciando.com/referencias/htmlxhtml/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.

11/5/2015
31
Formulários
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).
11/5/2015
32
Formulários
Principais atributos para opções de
menu
(tag <option>)
<option> define cada opção;
 Ver mais em:
http://www.referenciando.com/referencias/htmlxhtml/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;
11/5/2015
33
Formulários
Principais atributos para opções de
menu
(tag <optgroup>)
 <optgroup>
define grupos de opções
 Ver mais em:
http://www.referenciando.com/referencias/ht
ml-xhtml/html-tags/optgroup
 label: texto que é exibido como o nome do
item;
 disabled: inativo, fica em cinza.
11/5/2015
34
Formulários
Tipos de Componentes de Formulário
do
HTML versão 4 – Rótulos
 Permite
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!
11/5/2015
35
Formulários
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>.
11/5/2015
36
Formulários
<label>Nome:<input type="text"
name="nome"/></label>
<label for="idade">Idade:</label>
<input type="text" name="idade"
id="idade"/>
37
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 é
11/5/2015
feita
pelo atributo id.
Formulários
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!
11/5/2015
38
Formulários
Tipos de Componentes de Formulário
do
HTML versão 4 – Grupos de Campos
 Permite
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.
11/5/2015
39
Formulários
<fieldset>
<legend>Contato:</legend>
<label>Telefone:
<input type="text" /></label>
<label>Email:<input
type="text"/></label>
</fieldset>
11/5/2015
40
Formulários
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"/>

11/5/2015
41
Formulários
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.
11/5/2015
42
Formulários
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”/>
11/5/2015
43
Formulários
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”/>
11/5/2015
44
Formulários
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>;

11/5/2015
45
Formulários
<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>
11/5/2015
46
Formulários
Teclas de Acessibilidade sugeridas
1
—
2 —
3 —
4 —
Página inicial
Ir para conteúdo
Ir para menu
Fale Conosco
11/5/2015
47
Formulários
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"/>
11/5/2015
48
Formulários
Bibliografia Complementar
 [1]
Web Form Design: Modern Solutions
and Creative Ideas:
http://www.smashingmagazine.com/2008/
04/17/web-form-design-modern-solutionsand-creative-ideas/
 [2] Firefox 2.0 and Access Keys
http://juicystudio.com/article/firefox2accesskeys.php#realsolution
Discussão sobre teclas de acesso no Firefox
11/5/2015
49
Formulários
Bibliografia Complementar
 [3]
Avaliador de Acessibilidade
https://www.governoeletronico.gov.br/acoe
s-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibilidade-sitios
 [4] Recomendações acessibilidade
http://www.geocities.com/claudiaad/acessi
bilidade_web.html
11/5/2015
50
Formulários