Recursos Complementares (Tabelas e Formulários)

Transcrição

1 Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes

2 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu uso. A importância do uso de tabelas se dá, pela ocorrência comum da necessidade de tabular informações em nossas páginas. Nesta aula trabalharemos também o conceito de Formulários. Formulário é um recurso avançado e importante, pois é uma forma estruturada de enviar informações de uma página para outra. Ao final deste estudo, o aluno estará apto a utilizar estes recursos em suas páginas. 2

3 Tabelas Definição de tabelas Bordas Alinhamento Largura Fundo Plano de Aula Espaçamento entre células Visibilidade Formulários Criação de Formulários Elementos de um Formulário 3

4 Tabelas Tabela é uma estrutura formada por um conjunto de linhas e colunas, sendo o encontro de uma linha com uma coluna denominado célula; As tabelas devem apenas ser usadas para apresentar dados dispostos e organizados na forma tabular. Esse recurso não deve ter outra utilidade; Muitas pessoas, ao longo dos últimos anos, usaram tabelas inclusive para organizar o layout de um documento; Tabelas, segundo recomendação do consórcio W3C, devem ser usadas apenas para dispor e apresentar dados e nada mais; 4

5 Tabelas: definição de tabelas Em uma tabela deve-se usar as tags <table> e </table>, as quais delimitam a área de início e fim de uma tabela; Após a definição da área de apresentação de uma tabela, é necessário um conjunto específico de tags, a saber: <caption>... </caption>: definem a legenda superior de uma tabela; <th>...</th>: define o título das colunas de uma tabela. O texto de título será em negrito e centralizado. th significa table header; <tr>...</tr>: indicam o início e o fim de uma linha que fará parte de uma tabela. tr significa table row; <td>...</td>: definem a estrutura de células que conterá (conteúdo) de uma tabela. td significa table data; dados 5

6 Tabelas: definição de tabelas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 6

7 Tabelas: bordas O parâmetro border apresenta as linhas de borda de uma tabela. Este parâmetro é usado dentro da tag <table>; Para alterar a espessura da linha de borda de uma tabela, basta colocar um valor entre aspas (a medida que o número aumenta, a borda também aumenta) ao lado do sinal de igual a ; Exemplo: border= 2 7

8 Tabelas: bordas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 8

9 Tabelas: alinhamento Para determinar o alinhamento da tabela em relação à página, é possível utilizar os valores left (modopadrão), center e right com a propriedade CSS textalign, definida nas tags <style> e </style>; Para usarmos a propriedade text-align iremos usar a tag <div>; 9

10 Tabelas: alinhamento Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 10

11 Tabelas: largura O parâmetro width determina a largura de uma tabela. Os valores devem ser indicados entre aspas após o símbolo igual a e podem ser informados em quantidade de pontos (pixels) ou em formato percentual; Este parâmetro deve ser informado dentro da tag <table>; Exemplo width=

12 Tabelas: largura Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 12

13 Tabelas: fundo As propriedades CSS background-color e backgroundimage associadas a função url() determinam, respectivamente, a cor e a imagem de fundo de uma tabela; Estas propriedades podem ser usadas em qualquer uma das tags que fazem parte da construção de uma tabela (<table>, <th>, <tr>, <td> ou <caption>); 13

14 Tabelas: fundo Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 14

15 Tabelas: visibilidade Para trabalhar a visibilidade das linhas de uma tabela, usamos dois parâmetros: frame e rules; O parâmetro frame determina os lados da borda de uma tabela que serão visíveis; O parâmetro rules determina quais linhas internas de uma tabela estarão visíveis; Valores para frame: void (não terá borda externa), above (inclui borda superior), below (inclui borda inferior), lhs (inclui borda esquerda), rhs (inclui borda direita), hsides (inclui borda horizontais), vsides (inclui bordas verticais); Valores para rules: none (exclui as linhas internas), rows (inclui as linhas horizontais), cols (inclui as linhas verticais), all (crias todas as linhas internas); 15

16 Tabelas: visibilidade Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 16

17 Criação de Formulários As tags para construção de um formulário são <form> e </form>, as quais possibilitam iniciar e terminar um formulário. Seus parâmetros são: action: informa o endereço Internet para o qual o conteúdo do formulário será enviado. Se nada for informado, o próprio endereço da página será usado; method: informa o método de transferência dos dados que será usado pelo parâmetro action, sendo possível definir os valores: get: valor padrão do parâmetro action, usado quando se deseja enviar os dados de um formulário ao final do endereço URL, seguindo o formato endereço?nome=valor; post: usado para enviar as informações como um bloco de dados endereçados ao URL definido no action. Este é o método mais indicado para troca de informações entre as páginas; enctype: especifica a forma de submissão dos dados de um formulário quando usamos o valor post; 17

18 Criação de Formulários Internamente às tags <form> e </form> são necessárias algumas tags auxiliares para a formatação de um formulário, tais como as tags: <label> e </label>: para o texto de identificação de um campo; <input />: tag orfã para os campos; <select> e </select>: para as listas de opções; <textarea> e </textarea>: para uma área de texto; <button> e </button>: para botões customizados; <fieldset> e </fieldset>: área de agrupamento para objetos de um formulário; Iremos a partir de agora fazer um estudo detalhado de cada tag auxiliar a construção do formulário; 18

19 Elementos de um Formulário Campo de Texto Campo para entrada de texto comum. Parâmetros Size O tamanho do elemento em caracteres (padrão quando não definido é de 20 caracteres) na página XHTML (que será exibido na tela). Maxlength É o tamanho máximo do texto que pode ser inserido no elemento. Value É utilizado quando há necessidade de se pré-definir um valor para o elemento. Este valor pode ser normalmente alterado pelo usuário. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 19

20 Elementos de um Formulário Botão Rádio (Radio button) Tipo de Botão que permite que o usuário selecione um dentre um conjunto de botões disponíveis. Para formar um grupo todos os botões de radio tem de ter o mesmo nome (name= ); Parâmetros: Checked quando usado, o elemento fica com o estado inicial como selecionado. Value É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver selecionado. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 20

21 Elementos de um Formulário Botão de Checagem (CheckBox) Os botões de checagem, funcionam semelhante aos botões de radio, com a diferença que estes podem receber múltiplas seleções; Parâmetros Checked Se for declarado o elemento terá seu estado inicial como marcado. Value É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 21

22 Elementos de um Formulário Botão Submeter (Submit) Botão utilizado para enviar os dados do formulário para um local definido no parâmetro action do próprio formulário; Parâmetros: Value O texto que aparecerá no Botão. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 22

23 Elementos de um Formulário Botão de Limpar (Reset) Botão utilizado para deixar o formulário no seu estado inicial. De forma geral serve para limpar os campos do formulário; Parâmetros: Value O texto que aparecerá no Botão. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 23

24 Elementos de um Formulário Caixa de Seleção (Select) Geram caixas de seleção, que permitem ao usuário de acordo com a sua configuração selecionar um ou mais elementos da lista; Parâmetros: Multiple Se existir, permite que sejam selecionadas múltiplas opções através das teclas Ctrl ou Shift. Size Número de opções exibidas por vez na tela. Se o size estiver setado para 1 que é o default e não existir o parâmetro multiple, o elemento é exibido como um Combo Box. Caso contrário é exibido como um Select List. Option cada subtag option adiciona uma opção ao elemento. Value O value de cada option é o valor passado caso aquela opção seja selecionada. Obs.: O texto da opção deve ser especificado entre as tags <option> e </option> 24

25 Elementos de um Formulário Caixa de Seleção (Select): Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 25

26 Elementos de um Formulário Área de Texto (Textarea): Possibilita a entrada de texto de múltiplas linhas; Parâmetros: Cols (Número de caracteres por linha, de certa forma define a largura) e Rows (Número de linhas do campo, de certa forma define a altura) Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 26

27 Elementos de um Formulário Elementos como labels, optgroup, fieldsets e buttons serão demonstrados na Prática. Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 27

28 Perguntas Página do Professor Mauro: 28

29 Próxima Aula... Recursos Especiais (CSS). 29

30 Referências Materiais avulsos da Internet e o Livro Guia de Orientação e Desenvolvimento de Sites - Html, Xhtml, Css e Javascript / Jscript, Jose Augusto N. G. Manzano, 1ª Edição - Editora Érica, 382 páginas. Autoria Web Prof. Mauro Lopes 30