Bruno C de Paula Laboratrio de Informtica Formulrios

Bruno C. de Paula Laboratório de Informática Formulários em HTML 1º Semestre 2010 > PUCPR > BSI

2 Cédula das eleições americanas de 2000 Formulários mal construídos podem mudar o mundo!

Resumo da aula üNa aula hoje, nosso objetivo é aprender a criar formulários em HTML 4 e 5; üHoje, vamos nos preocupar apenas com a interface do formulário, o que permite que o usuário interaja com o documento; üEm situações reais, para um formulário fazer sentido, será necessária a utilização associada de uma linguagem cliente como Java. Script ou no servidor como PHP; üTambém deixaremos claro que nada impede o uso de forms HTML 5 já!

4 Resumo da aula q Deveremos aceitar que nossos formulários sempre deverão ser construídos de maneira acessível; q Começaremos a entender também que a criação de formulários envolve conceitos das áreas: o Projeto de Formulários; o Usabilidade; o Validação de Formulários; o Psicologia Cognitiva; o Etc. . .

Material extra referente ao assunto da aula q http: //www. maujor. com/blog/w 3 c/rec- 5 forms. html q http: //www. w 3 schools. com/html_forms. asp q http: //dev. opera. com/articles/view/20 -htmlforms-the-basics/ q http: //dev. opera. com/articles/view/34 -stylingforms/ q http: //dev. opera. com/articles/view/improveyour-forms-using-html 5/

6 Tags HTML referenciadas na aula (em Português –site Referenciando) q Contâiner de formulário: <form>; q Rótulo de item de formulário: <label>; q Botão: <button>; q Elemento de entrada de dados: <input>; q Caixa de texto multilinha: <textarea>. q Caixa de seleção: <select>; q Opção de um select: <option>;

Tags HTML referenciadas na aula (em Português –site Referenciando) q Grupo 7 de opções em um select: <optgroup>; q Agrupamento de itens de formulário: <fieldset>; q Legenda de um grupo de itens de formulário: <legend>;

Tags HTML referenciadas na aula (em Inglês – site Site. Point) q Contâiner de formulário: <form>; q Rótulo de item de formulário: <label>; q Botão: <button>; q Elemento de entrada de dados: <input>; q Caixa de texto multilinha: <textarea>. q Caixa de seleção: <select>; q Opção de um select: <option>; 8

Tags HTML referenciadas na aula (em Inglês – site Site. Point) q Grupo 9 de opções em um select: <optgroup>; q Agrupamento de itens de formulário: <fieldset>; q Legenda de um grupo de itens de formulário: <legend>;

Propriedades CSS referenciadas na aula (em Inglês –site Site. Point) q Bordas: Øborder-width: largura da borda; Øborder-style: estilo da borda; Øborder-color: cor da borda. q Determinar a cor da letra e o fundo: Øcolor: cor do elemento; Øbackground-color: cor de fundo; Øbackground-image: imagem de fundo; q width: largura de um elemento; 10

11 Ponto chave da aula!

12 Ponto chave da aula: Renderização padrão em navegadores diferentes é sempre diferente. Itens NUNCA vão ficar exatamente iguais.

CSS resolve parcialmente este problema! Teremos uma aula dedicada à sobre formatação de formulários.

14 A tag <form> q Formulário (tag <form>): Øcontâiner para uma quantidade ilimitada de componentes de interação com o usuário. q Aceita um número limitado de tipos de componentes diferentes. <FORM id="form 1" action="url" method=“post" > <!--. . . Coloque seus controles aqui. . . --> </FORM>

15

Tipos de componentes de formulário no HTML Versão 4 16 q 1 ou mais tags por componente; q Limitadíssimos!!

17

18

Tipos de componentes do HTML Versão 5 q Ainda em discussão! q É importante conhecer o futuro! q Vamos usar o Navegador Opera para testálas; q Opera Versão Portátil em: Øhttp: //www. kejut. com/operaportable 19

20

28/02/2021 21 Atributos essenciais dos componentes q Atributo id: identifica o controle para o cliente web / Java. Script; q Atributo name: identifica o controle para o servidor web; q Atributo value: indica o valor do controle e pode mudar; q Atributo type: indica o tipo de controle;

Criar um formulário (siga esta receita) q 1) 22 Definir o contâiner de formulário <form>; q 2) Definir o action do formulário, ou seja, para onde ele vai; q 3) (opcional) Definir o método de envio do formulário (GET ou POST); q 4) (opcional) Delimitar os grupos de itens através de <fieldset>; q 5) (opcional) Usar uma legenda para cada grupo <legend>;

Criar um formulário (siga esta receita) q 6) 23 (opcional) Definir um rótulo para cada item de formulário <label>; q 7) Criar o item de formulário associado ao rótulo <input>, <button>, etc. q 8) (acessibilidade) Definir teclas de acesso, através do atributo accesskey; q 9) Definir o botão de submissão; q 10) CSS: Formatar o formulário.

24 Exemplo de formulário q Vamos começar com um formulário bastante simples; q Ao clicar no botão cadastrar, os dados são enviados para a página: Ø http: //www. brunocampagnolo. com/2010_1/testform/ Øhttp: //tinyurl. com/meuformulario 2010

q. E vamos evoluir para o formulário a seguir. . . 25

28/02/2021 26 1) Definir o contâiner de formulário (<form>) q Não mostra nada! q Todos os componentes de formulário devem ser colocados dentro do elemento <form>.

2) Definir o action do formulário, ou seja, para onde ele vai; 27 ü Troque o action pelo action que você precisa! ü http: //www. brunocampagnolo. com/2010_1/testform/ ü http: //tinyurl. com/meuformulario 2010 ü O formulário ao ser enviado, submete os dados para a página indicada pelo atributo action;

3) (opcional) Definir o método de envio (GET ou POST) q Método 28 GET: Øenvio das informações pela barra de endereços; Øvisível; Ølimitado a cerca de 2000 caracteres; q Método POST: Øenvio das informações via cabeçalho HTTP; Øilimitado (teórico).

29

30

31 No método GET, a informação é passada via barra de endereços

28/02/2021 32 As vars são separadas por &

33 No método POST, a informação só pode ser vista com ferramentas especiais (Firebug)

34 4) (opcional) Delimitar os grupos de itens através de <fieldset>;

5) (opcional) Usar uma legenda para cada grupo <legend>; 35 28/02/2021

28/02/2021 36 6) (opcional) Definir um rótulo para cada item de formulário <label>; q. O atributo for deve ter como valor o id do componente associado;

28/02/2021 37 <label> q. Especifica um rótulo que estende a área de foco do elemento; q. Evita tiro ao alvo.

q Com <label>: Área clicável em roxo ü Sem<label>: 38

7) Criar o item de formulário associado ao rótulo q Vamos criar uma caixa de texto através da tag input com atributo type = text; 39

40

ü O atributo for deve ter como valor o id do componente associado; 41

8) (acessibilidade) Definir teclas de acesso (atributo accesskey) q Firefox: SHIFT + ALT + TECLA; q IE: ALT + TECLA; q Cuidado com conflitos! 42

9) Definir o botão de submissão q Ao 43 clicar no botão de submissão, os dados são enviados para a página indicada pelo atributo action do form; q Observe que a página é perdida ao clicar no botão.

44 Resultado

45 Evoluindo o formulário

46 Caixa de senha

47 Botão de rádio q Apenas uma opção de cada vez; q O atributo name agrupa os controles;

48 Caixa de checagem

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: 49

50 Caixa de envio de arquivos

51 Caixa de texto multilinha q cols e rows determinam o número de colunas e linhas;

52 Caixa de listagem q <select> é o container; q Cada opção é um <option>.

Resultado 53

Dicas para construção de formulários q 1) Nunca esqueça de colocar rótulos (<label>); q 2) Dê name e id para todos os elementos; q 3) Respeite a diferença entre readonly e disabled; q 4) Gere a ordem de tabulação (taborder) quando necessário; q 5) A tecla de atalho (accesskey) é obrigatória para que seu sistema seja utilizável sem teclado. q 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. 54

Diferença entre atributo disabled e atributo readonly q disabled: deixa o elemento desabilitado (texto em cinza). q readonly: impede a edição do elemento, mas ele não fica com o texto “em cinza”. q Exemplo: Ø <input type=“text” readonly=“readonly” value=“xxx”/> Ø <input type=“text” disabled=“disabled” value=“yyy”/> 2/28/2021 55

Formulários em Java. Script onsubmit x onclick q. O evento onsubmit é chamado quando se clica no botão submit do formulário; q É um evento de formulário; q Útil para validações de formulário; q. O evento onclick é para qualquer tipo de botão; q É um evento de botão; q Exemplos de cada um dos casos a seguir; 28/02/2021 56

28/02/2021 57

28/02/2021 58

59 Referências principais q http: //www. maujor. com/blog/w 3 c/rec-forms. html q http: //www. w 3 schools. com/html_forms. asp q http: //dev. opera. com/articles/view/20 -html-forms- the-basics/ q http: //dev. opera. com/articles/view/34 -styling-forms/ q http: //dev. opera. com/articles/view/improve-yourforms-using-html 5/

60 Referências complementares q Firefox 2. 0 and Access Keys Øhttp: //juicystudio. com/article/firefox 2 accesskeys. php#realsolution ØDiscussão sobre teclas de acesso no Firefox q Avaliador de Acessibilidade Øhttps: //www. governoeletronico. gov. br/acoes-eprojetos/e-MAG/ases-avaliador-e-simulador-deacessibilidade-sitios q Recomendações acessibilidade Øhttp: //www. geocities. com/claudiaad/acessibilidad e_web. html