Transcript Bruno C. de Paula Linguagem HTML Básica Formulários – Detalhamento dos Componentes Linguagem HTML Básica.

Bruno C. de Paula
Linguagem HTML Básica
Formulários – Detalhamento
dos Componentes
Linguagem HTML Básica
Tags de formulário
 <button>: Botão;
 <fieldset>: Conjunto de campos;
 <form>: Contâiner de formulário;
 <input>: Caixa de Texto, Checkbox, botão
de rádio, etc.
 <label>: Rótulo;
 <legend>: Legenda de grupo de campos;
 <optgroup>: Grupo de opções;
 <option>: Opção de menu;
 <select>: Contâiner de opções de menu;
 <textarea>: Caixa de texto de mais de
uma linha.
11/7/2015
2
Formulários
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
11/7/2015
usuário.
3
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/7/2015
4
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/7/2015
5
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/7/2015
6
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/7/2015
7
Formulários
Principais atributos para as caixas de
texto de uma linha e caixa de senha
(tag <input>)
 Ver:
http://www.referenciando.com/referencias/ht
ml-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;
11/7/2015
8
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/7/2015
9
Formulários
Principais atributos para as caixas de
texto de mais de uma linha
(tag <textarea>)
 Ver:
http://www.referenciando.com/referenc
ias/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.
11/7/2015
10
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/7/2015
11
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/7/2015
12
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/7/2015
13
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/7/2015
14
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/7/2015
15
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/7/2015
16
Formulários
Principais atributos para botões
(tag <input> e tag <button>)
 Ver mais em:
 http://www.referenciando.com/referenci
as/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
11/7/2015
submit é feito;
17
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
11/7/2015
18
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).
11/7/2015
 O atributo checked indica se
19
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/7/2015
20
Formulários
Principais atributos para botões de
rádio
(tag <input type=“radio”>)
 Ver mais em:
 http://www.referenciando.com/referen
cias/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/7/2015
21
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/7/2015
22
Formulários
Tipos de Componentes de Formulário
do
HTML
versão
– Caixa de Checagem

Chaves
do tipo 4ligado/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/7/2015
23
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/7/2015
24
Formulários
Principais atributos para caixas de
checagem
(tag <input type=“checkbox”>)
 Ver mais em:
 http://www.referenciando.com/referenc
ias/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/7/2015
25
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/7/2015
26
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/7/2015
27
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
simples (Listbox);
– Caixa de Listagem de
múltipla (Listbox);
– Menu em castaca;
uma linha com seleção simples
uma linha com seleção múltipla;
mais de uma linha com seleção
mais de uma linha com seleção
 Associado às tags: <select> (contâiner), <option>
(cada opção) e <optgroup> (define grupo de
opões);
11/7/2015
28
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/7/2015
29
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/7/2015
30
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/7/2015
31
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/ht
ml-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.
11/7/2015
32
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/7/2015
33
Formulários
Principais atributos para opções de
menu
(tag <option>)
 <option> define cada opção;
 Ver mais em:
http://www.referenciando.com/referencias/htm
l-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;
11/7/2015
34
Formulários
Principais atributos para opções de
menu
(tag <optgroup>)
<optgroup> define grupos de opções
Ver mais em:
http://www.referenciando.com/referenc
ias/html-xhtml/html-tags/optgroup
label: texto que é exibido como o nome
do item;
disabled: inativo, fica em cinza.
11/7/2015
35
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/7/2015
36
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/7/2015
37
Formulários
<label>Nome:<input type="text"
name="nome"/></label>
<label for="idade">Idade:</label>
<input type="text" name="idade"
id="idade"/>
38
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/7/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/7/2015
39
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/7/2015
40
Formulários
<fieldset>
<legend>Contato:</legend>
<label>Telefone:
<input type="text" /></label>
<label>Email:<input
type="text"/></label>
</fieldset>
11/7/2015
41
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/7/2015
42
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/7/2015
43
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/7/2015
44
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/7/2015
45
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
11/7/2015
<textarea>;
46
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/7/2015
47
Formulários
Teclas de Acessibilidade
sugeridas
1
2
3
4
—
—
—
—
Página inicial
Ir para conteúdo
Ir para menu
Fale Conosco
11/7/2015
48
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/7/2015
49
Formulários
Bibliografia Complementar
[1] Web Form Design: Modern
Solutions and Creative Ideas:
– http://www.smashingmagazine.com/2
008/04/17/web-form-design-modernsolutions-and-creative-ideas/
[2] Firefox 2.0 and Access Keys
– http://juicystudio.com/article/firefox2
-accesskeys.php#realsolution
– Discussão sobre teclas de acesso no
11/7/2015
Firefox
50
Formulários
Bibliografia Complementar
[3] Avaliador de Acessibilidade
– https://www.governoeletronico.gov.br
/acoes-e-projetos/e-MAG/asesavaliador-e-simulador-deacessibilidade-sitios
[4] Recomendações acessibilidade
– http://www.geocities.com/claudiaad/a
cessibilidade_web.html
11/7/2015
51
Formulários