A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


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

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

2 1/13/2014 Formulários2 Tags de formulário : Botão; : Conjunto de campos; : Contâiner de formulário; : Caixa de Texto, Checkbox, botão de rádio, etc. : Rótulo; : Legenda de grupo de campos; : Grupo de opções; : Opção de menu; : Contâiner de opções de menu; : Caixa de texto de mais de uma linha.

3 1/13/2014 Formulá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: Uma caixa de seleção com duas opções é representada por: – Opcao1 – Opcao2 Todo controle deve ter um nome (propriedade name) e um valor (propriedade value); O valor pode mudar conforme interação com o usuário.

4 1/13/2014 Formulá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;

5 1/13/2014 Formulários5 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.

6 1/13/2014 Formulários6 NomeNomes alternativos Exemplo de Código Imagem Caixa de Texto de uma linha Textbox, input, text field, campo de texto. Caixa de Senha Password Box, campo senha. Em destaque, a diferença entre os tipos de caixa de texto. O atributo type diferencia estes tipos de caixa.

7 1/13/2014 Formulários7 NomeNomes alternativos Exemplo de Código Imagem Caixa de Texto de mais de uma linha Textarea, Textbox multiline. Olá, Mundo Caixa de Envio de Arquivo File Box, file upload.

8 1/13/2014 Formulários8 Principais atributos para as caixas de texto de uma linha e caixa de senha (tag ) Ver: ml-xhtml/html-tags/input 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;

9 1/13/2014 Formulários9 Principais atributos para as caixas de texto de uma linha e caixa de senha (tag ) 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).

10 1/13/2014 Formulários10 Principais atributos para as caixas de texto de mais de uma linha (tag ) Ver: ias/html-xhtml/html-tags/textarea 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 1/13/2014 Formulários11 Principais atributos para as caixas de texto de mais de uma linha (tag ) 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.

12 1/13/2014 Formulários12 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.

13 1/13/2014 Formulários13 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.

14 1/13/2014 Formulários14 NomeNomes alternativos Exemplo de Código Imagem Botão normal Button, Push Button Botão com conteúdo HTML Button, Push Button Meu Botão A única diferença entre estes dois tipos é que: O botão com conteúdo HTML permite imagens, texto formatado, etc.

15 1/13/2014 Formulários15 NomeNomes alternativos Exemplo de Código Imagem Botão de submissão Submit, Submit Button, Send Button OU Enviar Dados Botão de imagem Submit, image button

16 1/13/2014 Formulários16 NomeNomes Alternativo s Exemplo de CódigoImagem Botão de limpeza Button, Reset, reset button, botão Limpar Limpar

17 1/13/2014 Formulários17 Principais atributos para botões (tag e tag ) Ver mais em: as/html-xhtml/html-tags/button 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 – value: texto do Botão e o que é enviado para o servidor quando o submit é feito; Tag – value: o que é enviado para o servidor quando o submit é feito;

18 1/13/2014 Formulários18 Principais atributos para botões (tag e tag ) 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;

19 1/13/2014 Formulários19 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.

20 1/13/2014 Formulários20 Masculino Feminino

21 1/13/2014 Formulários21 Principais atributos para botões de rádio (tag ) Ver mais em: cias/html-xhtml/html-tags/input 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;

22 1/13/2014 Formulários22 Principais atributos para botões de rádio (tag ) 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).

23 1/13/2014 Formulários23 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.

24 1/13/2014 Formulários24 Professor Desenvolvedor Web O que diferencia as caixas de checagem acima são os atributos ID e value.

25 1/13/2014 Formulários25 Principais atributos para caixas de checagem (tag ) Ver mais em: ias/html-xhtml/html-tags/input 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.

26 1/13/2014 Formulários26 Principais atributos para caixas de checagem (tag ) 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).

27 1/13/2014 Formulá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:

28 1/13/2014 Formulá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: (contâiner), (cada opção) e (define grupo de opões);

29 1/13/2014 Formulários29 Nome Nomes alternativos Exemplo de CódigoImagem Caixa de Listage m de uma linha Simples Selectbox, menu, combobox, combo field, caixa de combinação, menu pulldown, caixa de seleção Op1 Op2 Op3 Caixa de Listagem Múltipla de uma linha múltipla Menu * Não recomendad o! Op1 Op2 Op3

30 1/13/2014 Formulários30 NomeNomes alternativos Exemplo de CódigoImagem Caixa de Listagem de mais de uma linha simples menu, listbox, lista, selectbox Op1 Op2 Op3 Caixa de Listagem de mais de uma linha Múltipla Listbox, selectbox, menu, menu de rolagem. Op1 Op2 Op3

31 1/13/2014 Formulários31 NomeNomes alternativos Exemplo de CódigoImagem Menu em castaca Listbox, menu, listbox com grupos Op1 Op2 Op3 Op4 Op5

32 1/13/2014 Formulários32 Principais atributos para menus (tag ) é o Contâiner pai de e ; Ver mais em: ml-xhtml/html-tags/select 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.

33 1/13/2014 Formulários33 Principais atributos para menus (tag ) 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).

34 1/13/2014 Formulários34 Principais atributos para opções de menu (tag ) define cada opção; Ver mais em: l-xhtml/html-tags/option 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;

35 1/13/2014 Formulários35 Principais atributos para opções de menu (tag ) define grupos de opções Ver mais em: ias/html-xhtml/html-tags/optgroup ias/html-xhtml/html-tags/optgroup label: texto que é exibido como o nome do item; disabled: inativo, fica em cinza.

36 1/13/2014 Formulários36 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!

37 1/13/2014 Formulá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.

38 1/13/2014 Formulários38 Nome: 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. Na segunda, a associação é feita pelo atributo id.

39 1/13/2014 Formulários39 Principais atributos para rótulos (tag ) 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!

40 1/13/2014 Formulários40 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: – : define o grupo; – : legenda do grupo.

41 1/13/2014 Formulários41 Contato: Telefone:

42 1/13/2014 Formulários42 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: –

43 1/13/2014 Formulários43 Dicas para construção de formulários 1) Nunca esqueça de colocar rótulos ( ); 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.

44 1/13/2014 Formulá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: –

45 1/13/2014 Formulários45 Ordem de Tabulação (atributo taborder) Atributo taborder; Especifica a ordem de navegação via tecla, 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: –

46 1/13/2014 Formulá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:,,,,, e ;

47 1/13/2014 Formulários47 User Name Home 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,

48 1/13/2014 Formulários48 Teclas de Acessibilidade sugeridas 1 Página inicial 2 Ir para conteúdo 3 Ir para menu 4 Fale Conosco

49 1/13/2014 Formulá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.

50 1/13/2014 Formulários50 Bibliografia Complementar [1] Web Form Design: Modern Solutions and Creative Ideas: – 008/04/17/web-form-design-modern- solutions-and-creative-ideas/ 008/04/17/web-form-design-modern- solutions-and-creative-ideas/ [2] Firefox 2.0 and Access Keys – -accesskeys.php#realsolution -accesskeys.php#realsolution – Discussão sobre teclas de acesso no Firefox

51 1/13/2014 Formulários51 Bibliografia Complementar [3] Avaliador de Acessibilidade – https://www.governoeletronico.gov.br /acoes-e-projetos/e-MAG/ases- avaliador-e-simulador-de- acessibilidade-sitios https://www.governoeletronico.gov.br /acoes-e-projetos/e-MAG/ases- avaliador-e-simulador-de- acessibilidade-sitios [4] Recomendações acessibilidade – cessibilidade_web.html cessibilidade_web.html


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

Apresentações semelhantes


Anúncios Google