Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30
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
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
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
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
Tabelas: definição de tabelas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 6
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
Tabelas: bordas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 8
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
Tabelas: alinhamento Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 10
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= 300 11
Tabelas: largura Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 12
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
Tabelas: fundo Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 14
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
Tabelas: visibilidade Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 16
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
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
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
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
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
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
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
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
Elementos de um Formulário Caixa de Seleção (Select): Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 25
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
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
Perguntas Página do Professor Mauro: http://www.dai.ifma.edu.br/~mlcsilva 28
Próxima Aula... Recursos Especiais (CSS). 29
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