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

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

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

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

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

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

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

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

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

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

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

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

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

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

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; 3/25/2017 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). 3/25/2017 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. 3/25/2017 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. 3/25/2017 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. 3/25/2017 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). 3/25/2017 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: 3/25/2017 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 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

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

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

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

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

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; 3/25/2017 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/html-xhtml/html-tags/optgroup label: texto que é exibido como o nome do item; disabled: inativo, fica em cinza. 3/25/2017 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! 3/25/2017 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>. 3/25/2017 Formulários

<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

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

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

<legend>Contato:</legend> <label>Telefone: <fieldset> <legend>Contato:</legend> <label>Telefone: <input type="text" /></label> <label>Email:<input type="text"/></label> </fieldset> 3/25/2017 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"/> 3/25/2017 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. 3/25/2017 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”/> 3/25/2017 Formulários

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

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

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

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

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

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

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