HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

Transcrição

1 HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

2 Listas Listas de itens são bastante úteis para a exibição ordenada de elementos em um determinado texto: Relações Índices Definições 2

3 Estrutura Básica Todas as listas são formadas a partir de duas partes: Um código que define o tipo da lista Um código que define o tipo de item 3

4 Listas Ordenadas 4

5 Tipos de Listas Existem três tipos de listas: OL (Ordered List) UL (Unordered List) DL (Definition List) 5

6 Lista Ordenada Usada quando se deseja apresentar uma relação de elementos e estes têm que obedecer a uma ordem: Índice de tópicos Relação de vencedores de um concurso Seqüência de tarefas a serem realizadas 6

7 Listas Ordenadas Como criar Inserir <OL> para marcar o início da lista Inserir <LI> no início da linha seguinte para definir o item da lista Logo após escrever o elemento da lista Opcionalmente, inserir </LI> ao final de cada linha Repetir o processo para cada elemento Inserir </OL> para marcar o final da lista 7

8 Listas Ordenadas <OL> <LI> José Gregório </LI> <LI> Maria Matilde Sampaio </LI> <LI> Antônio da Silva </LI> <LI> Inácio Xavier Couto </LI> </OL> 8

9 Listas Não-Ordenadas Usadas quando a ordem dos elementos não é importante. Lista dos integrantes de um grupo Relação dos professores de um curso 9

10 Listas Não-Ordenadas Como criar Inserir <UL> para marcar o início da lista Inserir <LI> no início da linha seguinte para definir o item da lista Logo após escrever o elemento da lista Repetir o processo para cada elemento Inserir </UL> para marcar o final da lista 10

11 Listas Não-Ordenadas <UL> <LI> Motor </LI> <LI> Chassis </LI> <LI> Pneus </LI> <LI> Direção </LI> </UL> 11

12 Listas Não-Ordenadas 12

13 Lista de Definições É útil quando queremos associar um conceito ou termo a uma definição ou descrição maiores. Glossário Índices Remissivos 13

14 Lista de Definições 14

15 Lista de Definições Como criar Inserir <DL> para marcar o início da lista Inserir <DT> no início da linha seguinte para marcar o início da definição Inserir <DD> no início da linha seguinte para marcar a descrição da definição Repetir o processo para cada elemento Inserir </DL> para marcar o final da lista 15

16 Lista de Definições <DL> <DT> Filosofia </DT> <DD> Reflexão sobre as causas primeiras de tudo o que existe. </DD> <DT> Gnosticismo </DT> <DD> Sistema teológico e filosófico cujos sectários se arrogavam um conhecimento sublime da natureza e os atributos divinos. </DD> </DL> 16

17 Listas Aninhadas UL OL 17

18 Listas Aninhadas <UL> <LI>São Paulo <OL> <LI> Santo André </LI> <LI> São Bernardo </LI> <LI> São Caetano </LI> </OL> </LI> <LI>Paraíba <OL> <LI> Lagoa Seca </LI> <LI> Lagoa de Roça </LI> <LI> Lagoa de Dentro </LI> </OL> </LI> </UL> Lista do Nível 1 (mais externo) Lista do Nível 2 (mais interno) 18

19 Tabelas Tabelas são muito importantes porque permitem organizar os dados a fim de possibilitar uma melhor visualização Orçamentos Folha de pagamento Notas de alunos 19

20 Importante Tabelas NÃO devem ser usadas para organizar o layout da página. Padrões Usabilidade Acessibilidade Separação entre layout e conteúdo Para isso, usaremos CSS 20

21 Introdução Salários Marketing Pesquisa Total

22 Estrutura de uma Tabela Define a tabela Definem as células de dados <table>...</table> <td>...</td> <tr>...</tr> Definem as linhas Obs: as células de cabeçalho usam as tags <th>..</th> 22

23 Criando uma Tabela Simples Inserir <TABLE> inserir <TR> para definir o início da linha Inserir <TD> para definir uma célula da linha Inserir os dados da linha Inserir </TD> para concluir a célula da linha Repetir a seqüência 3 a 5 para cada célula Inserir </TR> para concluir a linha Repetir passos 2 a 7 para cada linha seguinte Inserir </TABLE> 23

24 Criando uma Tabela Simples <TABLE> <TR> <TH> PRODUTO </TH> <TH> PREÇO </TH> </TR> <TR> <TD> MOUSE </TD> <TD> 10,00 </TD> </TR> <TR> <TD> TECLADO </TD> <TD> 70,00 </TD> </TR> <TR> <TD> SCANNER </TD> <TD> 490,00 </TD> </TR> <TR> <TD> MONITOR </TD> <TD> 4.000,00 </TD> </TR> </TABLE> Linha 1 Linha 2 Linha 3 Linha 4 Linha

25 Criando uma Tabela Simples 25

26 Expandindo Células Através de várias colunas A célula deve ocupar o espaço de várias colunas <TD COLSPAN=n> Onde n corresponde ao número de colunas sobre as quais a célula deve se expandir. 26

27 Expandindo Células <tr> <td colspan=2> produto </td> </tr> <tr> <td> mouse </td> <td> 10,00 </td> </tr> <tr> <td> teclado </td> <td> 70,00 </td> </tr> 27

28 Expandindo Células 28

29 Expandindo Células Através de várias linhas <TD ROWSPAN=n> Onde n corresponde ao número de linhas. Nesse caso, quando o valor de n=1 deve-se reduzir uma célula na linha abaixo (<TD> e </TD>) 29

30 Expandindo Células <tr><td colspan=2> produto </td> </tr> <tr><td> mouse </td> <td> 10,00 </td> </tr> <tr><td> teclado </td> <td> 70,00 </td> </tr> <tr><td rowspan="2"> scanner </td> <td> 490 </td></tr> <tr><td> 4000 </td></tr> 30

31 Expandindo Células 31

32 Pading, Spacing Padding Espaço entre o conteúdo e a borda da célula Spacing Espaço entre uma célula e outra 32

33 Pading, Spacing Atributos HTML que se referem à apresentação Equivalentes em CSS não são bem suportados pelo Internet Explorer 6 cellpadding, cellspacing <table cellpadding="15" cellspacing="15"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> 33

34 Exemplo 34

35 Criando um Formulário Um formulário é composto basicamente por três partes principais: A definição do formulário Os elementos do formulário O botão que aciona o envio do formulário 35

36 Criando um Formulário Os tags <FORM> e </FORM> definem o início e o fim do formulário <FORM> pode ter dois atributos: ACTION: define onde a ação ocorrerá, ou seja, quem irá processar o formulário. METHOD: define como o formulário será enviado. Pode ser de duas maneiras: GET e POST.. 36

37 Criando um Formulário Um formulário pode ter um nome NAME= nome do formulário Dentro do formulário coloca-se os campos Cada campo também deve ter um nome. 37

38 Criando um Formulário <FORM ACTION= scripts/insere.php METHOD= POST > GET é o método default. POST permite enviar mais dados e estes não aparecem na janela de endereços do Browser. 38

39 Elementos de um Formulário Área de Texto <TEXTAREA NAME= nome do campo Opcionalmente pode-se definir o número de linhas e de colunas da área de texto: ROWS=n e COLS=n > Caso necessário, digite um texto que sempre aparecerá na área de texto ao ser carregada. Esse texto não será formatado. </TEXTAREA> 39

40 Elementos de um Formulário <FORM NAME= MEUFORM ACTION=..\scripts\teste.php METHOD= POST > <B> Digite sua mensagem: </B> <BR> <TEXT AREA NAME= area1 ROWS=10 COLS=20> Nessa área aparecerá um texto default se for colocado um... </TEXTAREA> </FORM> 40

41 Elementos de um Formulário 41

42 Elementos de um Formulário Elementos de Entradas Text Password Radio Checkbox Submit Reset 42

43 Elementos de um Formulário Text > <INPUT TYPE= text NAME= nome Opcionalmente, digite VALUE= valor inicial Opcionalmente, digite SIZE=n Opcionalmente, digite MAXLENGTH 43

44 Elementos de um Formulário <FORM NAME= MEUFORM METHOD= POST > <B> Login: </B> <BR> <INPUT TYPE="text" NAME= nome SIZE=15 MAXLENGTH=20> <P> <B> Senha: </B> <BR> <INPUT TYPE="text" NAME= nome SIZE=15 MAXLENGTH=20> </FORM> 44

45 Elementos de um Formulário 45

46 Elementos de um Formulário Password Troca-se apenas o text por password A sintaxe empregada é a mesma Apenas esconde o texto sendo digitado <INPUT TYPE= password NAME= nome SIZE=15 MAXLENGTH=20> 46

47 47

48 Elementos de um Formulário Radio Permite que opções sejam apresentadas ao usuário através de botões Apenas um será selecionado por vez Comportamento ou exclusivo 48

49 Elementos de um Formulário <INPUT TYPE= radio NAME= conjunto VALUE= 1 > Brasil <INPUT TYPE= radio NAME= conjunto VALUE= 2 > EUA <INPUT TYPE= radio NAME= conjunto VALUE= 3 > Inglaterra <INPUT TYPE= radio NAME= conjunto VALUE= 4 > Rússia 49

50 50

51 Elementos de um Formulário Radio Se quiser que um valor apareça inicialmente escolhido deve-se defini-lo como CHEKED Se o atributo value não for configurado a palavra on será enviada por script. <INPUT TYPE= radio NAME= conjunto VALUE= 4 CHECKED> Rússia 51

52 Elementos de um Formulário Checkbox Também permite que opções sejam apresentadas ao usuário através de botões Mais de uma opçaõ pode ser selecionado por vez Comportamento E 52

53 Elementos de um Formulário <INPUT TYPE= checkbox NAME= conjunto VALUE= 1 > Brasil <INPUT TYPE= checkbox NAME= conjunto VALUE= 2 > EUA <INPUT TYPE= checkbox NAME= conjunto VALUE= 3 > Inglaterra <INPUT TYPE= checkbox NAME= conjunto VALUE= 4 > Rússia 53

54 54

55 Elementos de um Formulário Select Também exibe um conjunto de opções mas de forma diferente. <SELECT NAME= nome Opcionalmente, SIZE=n Opcionalmente, MULTIPLE > <OPTION VALUE= valor > nome da opção para cada opção. </SELECT> 55

56 Elementos de um Formulário <SELECT NAME="sel1 MULTIPLE> <OPTION NAME="A"> ANA </OPTION> <OPTION NAME="B"> BETA </OPTION> <OPTION NAME="C"> CARLOTA </OPTION> <OPTION NAME="D"> DENISE </OPTION> <OPTION NAME="E SELECTED> ELBA </SELECT> 56

57 Elementos de um Formulário 57

58 Elementos de um Formulário Submit É o meio pelo qual o formulário é enviado ao servidor. Aciona o browser para que ele colete os dados, construa os pacotes HTTP e os envie através uma conexão TCP. 58

59 Elementos de um Formulário <INPUT TYPE="SUBMIT" NAME="nome" VALUE="rótulo"> 59

60 Elementos de um Formulário Reset Limpa o Formulario Cada campo volta ao seu valor default <INPUT TYPE=RESET NAME=name VALUE= rótulo > 60

61 61