Recursos Complementares (Tabelas e Formulários)

(1)

Prof. Mauro Lopes

Recursos Complementares

(Tabelas e Formulários)

(2)

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 Linguagem de Programação para WEB – Prof. Mauro Lopes

(3)

Plano de Aula

• Tabelas

– Definição de tabelas

– Bordas

– Alinhamento

– Largura

– Fundo

– Espaçamento entre células

– Visibilidade

• Formulários

(4)

30 -

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;

(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;

(6)

30 -

Tabelas: definição de tabelas

6

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

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

(8)

30 -

Tabelas: bordas

8

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

(9)

Tabelas: alinhamento

• Para determinar o alinhamento da tabela em relação à

página, é possível utilizar os valores

left

(modo-padrão),

center

e

right

com a propriedade CSS

text-align

, definida nas tags <style>

e </style>;

• Para usarmos a propriedade

text-align

iremos usar a

(10)

30 -

Tabelas: alinhamento

10

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

(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

(12)

30 -

Tabelas: largura

12

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

(13)

Tabelas: fundo

• As propriedades CSS

background-color

e

background-image

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>

);

(14)

30 -

Tabelas: fundo

14

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

(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

:

(16)

30 -

Tabelas: visibilidade

16

Vamos ver na prática !!!

Acompanhe o exemplo

exposto pelo Professor.

(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;

(18)

30 -

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;

(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.

(20)

30 -

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.

20

Vamos ver na prática !!!

Acompanhe o exemplo exposto pelo

Professor.

(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.

(22)

30 -

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.

22

Vamos ver na prática !!!

Acompanhe o exemplo exposto pelo Professor.

(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 !!!

(24)

30 -

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>

(25)

Elementos de um Formulário

• Caixa de Seleção (Select):

Vamos ver na prática !!!

(26)

30 -

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