Linguagem HTML Básica Formulários – Detalhamento dos Componentes

Apresentação em tema: "Linguagem HTML Básica Formulários – Detalhamento dos Componentes"— Transcrição da apresentação:

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

2 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. 3/25/2017 Formulários

3 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. 3/25/2017 Formulários

4 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; 3/25/2017 Formulários

5 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. 3/25/2017 Formulários

6 Caixa de Texto de uma linha
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. type= "password" Em destaque, a diferença entre os tipos de caixa de texto. O atributo type diferencia estes tipos de caixa. 3/25/2017 Formulários

7 Caixa de Texto de mais de uma linha Textarea, Textbox multiline.
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"/> 3/25/2017 Formulários

8 Principais atributos para as caixas de texto de uma linha e caixa de senha (tag <input>)
Ver: 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; 3/25/2017 Formulários

9 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). 3/25/2017 Formulários

10 Principais atributos para as caixas de texto de mais de uma linha (tag <textarea>)
Ver: 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. 3/25/2017 Formulários

11 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. 3/25/2017 Formulários

12 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. 3/25/2017 Formulários

13 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. 3/25/2017 Formulários

14 Botão com conteúdo HTML
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 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. 3/25/2017 Formulários

15 Submit, Submit Button, Send Button
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"/> 3/25/2017 Formulários

16 Button, Reset, reset button, botão Limpar
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> 3/25/2017 Formulários

17 Principais atributos para botões (tag <input> e tag <button>)
Ver mais em: 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; 3/25/2017 Formulários

18 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; 3/25/2017 Formulários

19 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. 3/25/2017 Formulários

20 O que diferencia os botões de rádio acima são os atributos ID e value.
<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. 3/25/2017 Formulários

21 Principais atributos para botões de rádio (tag <input type=“radio”>)
Ver mais em: 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; 3/25/2017 Formulários

22 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). 3/25/2017 Formulários

23 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. 3/25/2017 Formulários

24 <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. 3/25/2017 Formulários

25 Principais atributos para caixas de checagem (tag <input type=“checkbox”>)
Ver mais em: 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. 3/25/2017 Formulários

26 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). 3/25/2017 Formulários

27 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: 3/25/2017 Formulários

28 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); 3/25/2017 Formulários

29 Caixa de Listagem de uma linha Simples
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"> 3/25/2017 Formulários

30 Caixa de Listagem de mais de uma linha simples
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"> 3/25/2017 Formulários

31 Listbox, menu, listbox com grupos <SELECT name="s1">
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> </SELECT> 3/25/2017 Formulários

32 Principais atributos para menus (tag <select>)
<select> é o Contâiner pai de <option> e <optgroup>; Ver mais em: 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. 3/25/2017 Formulários

33 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). 3/25/2017 Formulários

34 Principais atributos para opções de menu (tag <option>)
<option> define cada opção; Ver mais em: 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; 3/25/2017 Formulários

35 Principais atributos para opções de menu (tag <optgroup>)
<optgroup> define grupos de opções Ver mais em: label: texto que é exibido como o nome do item; disabled: inativo, fica em cinza. 3/25/2017 Formulários

36 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! 3/25/2017 Formulários

37 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>. 3/25/2017 Formulários

38 <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. 3/25/2017 Formulários

39 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! 3/25/2017 Formulários

40 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. 3/25/2017 Formulários

41 <legend>Contato:</legend> <label>Telefone:
<fieldset> <legend>Contato:</legend> <label>Telefone: <input type="text" /></label> <label> <input type="text"/></label> </fieldset> 3/25/2017 Formulários

42 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"/> 3/25/2017 Formulários

43 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. 3/25/2017 Formulários

44 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”/> 3/25/2017 Formulários

45 Ordem de Tabulação (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”/> 3/25/2017 Formulários

46 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>; 3/25/2017 Formulários

47 No ID, use ALT + 1, ALT+2 e ALT+h, <enter>
<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=" 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> 3/25/2017 Formulários

48 Teclas de Acessibilidade sugeridas
1 — Página inicial 2 — Ir para conteúdo 3 — Ir para menu 4 — Fale Conosco 3/25/2017 Formulários

49 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"/> 3/25/2017 Formulários

50 Bibliografia Complementar
[1] Web Form Design: Modern Solutions and Creative Ideas: [2] Firefox 2.0 and Access Keys Discussão sobre teclas de acesso no Firefox 3/25/2017 Formulários

51 Bibliografia Complementar
[3] Avaliador de Acessibilidade [4] Recomendações acessibilidade 3/25/2017 Formulários