Linguagem HTML BásicaFormulários – Detalhamento dos Componentes
Linguagem HTML Básica
Bruno C. de PaulaBruno C. de Paula
04/11/23Formulários2
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.
04/11/23Formulários3
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ários4
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ários5
Tipos de Componentes de Formulário do HTML versão 4 – Caixas de TextoPermitem 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ários6
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ários7
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ários8
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ários9
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ários10
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ários11
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ários12
Tipos de Componentes de Formulário do HTML versão 4 – BotõesPermitem 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ários13
Tipos de Componentes de Formulário do HTML versão 4 – BotõesPode 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ários14
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ários15
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ários16
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ários17
Principais atributos para botões(tag <input> e tag <button>)
Ver mais em:http://www.referenciando.com/
referencias/html-xhtml/html-tags/buttonname: 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ários18
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ários19
Tipos de Componentes de Formulário do HTML versão 4 – Botões de RádioPermite 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ários20
<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ários21
Principais atributos para botões de rádio(tag <input type=“radio”>)Ver mais em:http://www.referenciando.com/
referencias/html-xhtml/html-tags/inputname: 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ários22
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ários23
Tipos de Componentes de Formulário do HTML versão 4 – Caixa de ChecagemChaves 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ários24
<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ários25
Principais atributos para caixas de checagem(tag <input type=“checkbox”>)Ver mais em:http://www.referenciando.com/
referencias/html-xhtml/html-tags/inputname: 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ários26
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ários27
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ários28
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ários29
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ários30
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ários31
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ários32
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ários33
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ários34
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ários35
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ários36
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ários37
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ários38
<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ários39
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ários40
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ários41
<fieldset><legend>Contato:</legend><label>Telefone:<input type="text" /></label><label>Email:<input type="text"/></label></fieldset>
04/11/23Formulários42
Tipos de Componentes de Formulário do HTML versão 4 – Campo ocultoPermite 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ários43
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ários44
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ários45
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ários46
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ários47
<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ários48
Teclas de Acessibilidade sugeridas1 — Página inicial 2 — Ir para conteúdo 3 — Ir para menu 4 — Fale Conosco
04/11/23Formulários49
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ários50
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 Keys– http://juicystudio.com/article/firefox2-
accesskeys.php#realsolution– Discussão sobre teclas de acesso no Firefox
04/11/23Formulários51
Bibliografia Complementar
[3] Avaliador de Acessibilidade–https://
www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
[4] Recomendações acessibilidade–http://www.geocities.com/claudiaad/
acessibilidade_web.html
Top Related