Como posso fazer um fomulário HTML? O HTML tem alguns elemento que ajudam na criação de formulários e na interação usuário-website. Esses elemento apresentam diversas formas de apresentar ao usuário informações que o site quer que o usuário preencha, selecione ou marque. Para quem programa em outras linguagens, os elementos HTML para fazer formulário são os padrões, de caixa de texto, seleção de um ou vários em uma lista, marcar opções e também escrever textos em várias linhas.

Vamos ver como fazer o elemento Form (tag <form>) do HTML, que é o elemento pai de todos os outros elementos de formulário HTML e no fim desse post teremos links para outros posts descrevendo os outros elementos HTML de formulário.

A Tag <form> – Elemento Form

A tag <form> é utilizada para fazer um formulário, nela define-se vários aspectos do formulário como para onde ele é enviado e que forma de envio é utilizado. Sempre que for fazer um formulário, todos os componentes do formulário devem ficar entre as tags <form> e </form>.

Vamos ver alguns atributos da tag de fomulário <form>.

Action

- O atributo action da tag <form> diz para onde o formulário deve ser enviado. O valor desse atributo é o endereço, estático ou relativo, de onde está a página que vai tratar esse formulário.

Method

- O method diz como enviar os dados do formulário, pode ser pelo método GET ou POST. Se você não especificar o método (atributo method), o padrão é o GET.

Para saber mais sobre os métodos GET e POST acesse Como Funciona os Métodos GET e POST – Diferenças.

Name

- Esse atributo nomeia o fomulário <form>, fazendo ele poder ser identificado por folhas de estilo e scripts (como Javascript). Esse atributo está em desuso, é utilizado somente para compatibilidade com códigos HTML antigos e os códigos HTML novos devem utilizar o atributo id.

Id

- Esse atributo pode ser utilizado em qualquer elemento HTML, ele define uma identificação única para o elemento HTML e deve ser único em um documento.

Target

- Indica onde o resultado da submissão do formulário HTML será exibida. Pode ser o nome de um frame (ou iframe, tag <iframe>), ou uma janela, ou uma dessas seguintes constantes:

– _blank – O resultado do formulário HTML é exibido em uma janela nova e sem nome. alguns navegadores deixam a opção para o usuário, de exibir esse resultado em uma nova aba.

– _self – Exibe a página referenciada na mesma página ou no mesmo frame que o link ou formulário está. Essa é a opção padrão.

- _parent – Exibe a página referenciada no frame pai do frame que o link ou formulário está. Se o frame não tiver frame pai, essa opção fica igual a opção “_self“.

- _top – Exibe a página referenciada na tela inteira do navegador, cancelando qualquer frame que a página anterior continha.

Enctype

- Esse atributo diz como o formulário HTML vai codificar os dados enviados. Se você não quiser enviar nenhum arquivo (upload) para o servidor, você pode não colocar esse atributo no seu formulário HTML (form), que ele vai ficar com o valor padrão, que vai funcionar normal.

Os valores para esse atributo podem ser:

- application/x-www-form-urlencoded – Esse é o valor padrão, se você quiser saber como os dados são codificados, entre em http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1.

- multipart/form-data – Se você quer fazer envio de arquivos (upload), via formulário HTML, você deve utilizar esse valor para o atributo Enctype. O valor padrão não é suficiente para enviar grandes quantidades de dados binários. Esse valor deve ser utilizado quando desejas enviar arquivos, dados binários ou caracteres não ASCII.

Para outros valores desse atributo, consulte: http://www.w3.org/TR/html401/types.html#type-content-type.

Accept

- Esse atributo define quais tipos de conteúdo (content types), que o servidor vai processar corretamente. Colocam-se os tipos separados por vírgula.

O atributo accept especifica que tipos de arquivos (<input type=”file”>), o navegador deve filtrar, para não enviar arquivos para o servidor que não seja correspondente a um dos tipos especificados nesse atributo.

Se você quiser uma lista dos tipos (MIME types) de conteúdo, entre em: http://www.w3.org/TR/html401/references.html#ref-MIMETYPES e em: http://www.iana.org/assignments/media-types/

Accept-charset

- Esse atributo define qual tipo de codificação de caracteres (charset) o servidor vai identificar os dados enviados pelo formulário HTML.

Para ver uma lista de codificação de caracteres (charset), acesse: http://www.w3.org/TR/html401/references.html#ref-CHARSETS.

Até a data de escrita desse post, e mesmo sem testar, o Internet Explorer não aceita esse atributo.

Exemplo de Formulário HTML (<form>)

Vamos ver um exemplo simples do uso de formulário HTML. O exemplo irá mostrar alguns campos, onde todos devem ser preenchidos para o envio do formulário. Se algum campo não for preenchido, aparece uma mensagem de erro no campo que não foi preenchido.

O nosso arquivo para executar esse código é o contato.php.

O Arquivo contato.php.

Nesse arquivo temos o nosso código PHP que processa o fomulário HTML quando ele é enviado.

<?php

$Enviar = $_POST["Enviar"];

if(strlen($Enviar) > 0) { // o formulário foi enviado
	$nome = $_POST["nome"];
	$email = $_POST["email"];
	$telefone = $_POST["telefone"];
	$departamento = $_POST["departamento"];
	$mensagem = $_POST["mensagem"];

	if((strlen($nome) > 0) && (strlen($email) > 0) && (strlen($telefone) > 0) &&
		(strlen($departamento) > 0) && (strlen($mensagem) > 0)) { // todos os dados preenchidos
		print("<strong>Dados do Formulário:<strong><BR>");
		print("<strong>Nome:</strong>".$nome."<BR>");
		print("<strong>Email:</strong>".$email."<BR>");
		print("<strong>Telefone:</strong>".$telefone."<BR>");
		print("<strong>Departamento:</strong>".$departamento."<BR>");
		print("<strong>Mensagem:</strong>".$mensagem."<BR>");
	}
	else { // nem todos os dados preenchidos, voltar para o formulário
		// dizer em msg de erro o que falta no formulário
		if(strlen($nome) == 0)
			$erro_nome = "<span class=\"msg_erro\">O campo Nome deve ser preenchido</span>";
		if(strlen($email) == 0)
			$erro_email = "<span class=\"msg_erro\">O campo Email deve ser preenchido</span>";
		if(strlen($telefone) == 0)
			$erro_telefone = "<span class=\"msg_erro\">O campo Telefone deve ser preenchido</span>";
		if(strlen($departamento) == 0)
			$erro_departamento = "<span class=\"msg_erro\">O campo Departamento deve ser preenchido</span>";
		if(strlen($mensagem) == 0)
			$erro_mensagem = "<span class=\"msg_erro\">O campo Mensagem deve ser preenchido</span>";

		// colocando o departamento selecionado como selecionado
		$$departamento = "selected=\"true\"";

		require("contatoform.php");
	}
}
else { // o formulário não foi enviado
	require("contatoform.php");
}

?>

Onde tem a chamada do array $_POST, pegamos os dados enviados do formulário, pelo método POST. Para pegar os dados enviados pelo método GET, utilizamos o array $_GET. No nosso exemplo, somente enviamos dados pelo método POST, então somente utilizaremos o array $_POST.

No array $_POST, temos todos os nomes  das variáveis que enviamos do formulário, como chaves do array (array associativo), e seus valores como os valores do formulário. Se temos um campo tipo text, com nome “email” (name=”email”), e enviamos esse formulário pelo método POST, teremos no PHP, o array $_POST["email"] com o valor do que foi escrito no campo email.

No nosso exemplo, se o formulário foi enviado, ele pega todos os valores que foram enviados e testa, para ver se algum está em branco (com número de caracteres igual a zero). Se todos estiverem preenchidos, o programa mostra eles na tela. Se algum não tiver sido preenchido, o programa testa para ver quais não foram preenchidos e seta uma mensagem de erro personalizada para cada campo não preenchido, e volta a mostrar o fomulário.

A linha que faz o campo selecionável (selecbox) ficar como estava quando foi enviado, merece um pouco mais de explicação. A linha é a seguinte: $$departamento = “selected=\”true\”";. Ela está simplesmente, colocando na variável com o nome do valor da variável $departamento, o valor “selected=\”true\”". Por exemplo, se a minha variável $departamento for igual a “comercial”, depois de executar essa linha, eu terei uma variável $comercial com o valor igual a “selected=\”true\”". Isso tudo para, no arquivo HTML, eu poder selecionar automaticamente o que foi estava selecionado no fomulário, no campo de seleção (selectbox). Vamos entender isso mais a frente.

O Arquivo contatoform.php.

Nesse arquivo tem o nosso formulário em HTML e um pouco de PHP para deixar o formulário mais dinâmico.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Exemplo de Formulário HTML/PHP</title>

	<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>
<body>

<form name="form_contato" action="contato.php" method="post">
	<div>Nome: <?php echo($erro_nome); ?></div>
	<div><input name="nome" id="nome" type="text" value="<?php echo($nome); ?>" /></div>

	<div>Email: <?php echo($erro_email); ?></div>
	<div><input name="email" id="email" type="text" value="<?php echo($email); ?>" /></div>

	<div>Telefone: <?php echo($erro_telefone); ?></div>
	<div><input name="telefone" id="telefone" type="text" value="<?php echo($telefone); ?>" /></div>

	<div>Departamento: <?php echo($erro_departamento); ?></div>
	<div>
		<select name="departamento" id="departamento">
			<option value="">...</option>
			<option value="comercial" <?php echo($comercial); ?>>comercial</option>
			<option value="financeiro" <?php echo($financeiro); ?>>financeiro</option>
			<option value="juridico" <?php echo($juridico); ?>>jurídico</option>
			<option value="suporte" <?php echo($suporte); ?>>suporte</option>
		</select>
	</div>

	<div>Mensagem: <?php echo($erro_mensagem); ?></div>
	<div><textarea name="mensagem" id="mensagem" rows="5" cols="25"><?php echo($mensagem); ?></textarea></div>

	<div><input name="Enviar" value="Enviar" type="submit" /></div>
</form>

</body>
</html>/

Esse arquivo simplesmente define 5 campos e um botão de submeter o formulário, sendo que um desses campos é um campo selecionável (selectbox).

Todos eles tem no atributo value, um trecho de código em PHP, por isso precisamos que a extensão desse arquivo seja reconhecida como extensão para processamento do PHP. Esse trecho serve para definir no formulário HTML, caso de erro, o que o usuário já tinha escrito antes, porque sem isso o fomulário viria todo em branco novamente, e isso é ruim, pois se eu errei somente uma coisinha no fomulário, e ele voltar em branco, terei que preenche-lo todo novamente.

No caso do selecbox, eu tenho que fazer com que a seleção do usuário volte a aparecer se o formulário der erro, então coloco um trecho PHP exibindo uma variável com o nome do value da opção (option) em questão, para no script de processamento, ele tratar isso, como foi explicado no arquivo contato.php.

Podes perceber que tenho várias classes de folha de estilo no documento, e o documento também chama um arquivo de folha de estilo, que eu colocarei somente para mostrar a mensagem de erro em destaque.

O Arquivo estilo.css

Esse arquivo é bem simples, abaixo o código:

.msg_erro {
	color: red;
	font-weight: bold;
}

Com essa classe eu destaco as minhas mensagens de erro.

O Exemplo Pronto

Você pode ver esse exemplo pronto em http://www.comocriarsites.com/exemplos/formulariohtmlsimples/.

Visible

- Esse é o valor padrão, o elemento não faz nada e o conteúdo que ultrapassar o elemento sera escrito fora dele.

Hidden

- Todo conteúdo que ultrapassar o elemento com esse valor no estilo overflow ficará escondido, e o elemento não terá barra de rolagem para visualização do resto do conteúdo.

Scroll

- Com esse valor o elemento sempre vai ter barra de rolagem, não importa se tenha ou não conteúdo passando de seus limites. Se você quer que o elemento tenha barra de rolagem, você normalmente não usa overflow: scroll e sim overflow: auto.

Auto

- O elemento exibirá barra de rolagem somente se o seu conteúdo ultrapassar seus limites.

Overflow x/y

Ainda podemos especificar mais quais limites queremos que o overflow atue, utilizando overflow-x, para o overflow valer somente para a barra e o limite horizontal, e overflow-y, para o overflow valer somente para a barra e o limite vertical.

Exemplos de Overflow

Vamos exemplificar alguns casos de overflow para o melhor entendimento.

Elemento sem Overflow

O código do exemplo acima é:

<div style="border: 1px solid black; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

Você pode verificar que o tamanho do elemento <div> não mudou, a sua borda mostra isso, mas o texto ultrapassou o limite vertical do elemento. Esse é o comportamento overflow padrão, que é como se colocasse o estilo overflow: visible.

Elemento com Overflow Hidden

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: hidden; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O tamanho do elemento <div> também não mudou, mas o texto dentro dele não ultrapassou a borda do elemento, e todo o conteúdo do elemento que ultrapassou o limite vertical dele ficou escondido.

Elemento com Overflow Scroll

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: scroll; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou com barras de rolagem vertical e horizontal, mesmo sem a necessidade da barra horizontal.

Elemento com Overflow Auto

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: auto; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou somente com barra de rolagem vertical e horizontal como não precisou da barra de rolagem horizontal ele não exibe.

Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:

index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.

banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.

banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.

O Arquivo index.html

No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:

<script language="JavaScript" src="http://url.para/script/banner.js"></script>

Mude a url no atributo src para a url correta onde está o arquivo banner.js.

Para chamar o arquivo banner.css, use a seguinte linha:

<link href="http://url.para/estilo/banner.css" rel="stylesheet" type="text/css" />

Mude a url no atributo href para a url correta onde está o arquivo banner.css.

Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag <head> e </head>).

O Código HTML

No corpo do documento html (entre as tags <body> e </body>), entra o código:

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

A primeira linha é uma tag <div>, tem o atributo id igual a banner_popup – esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style – esse atributo define o estilo do nosso componente, no caso o div. Ele define que o <div> vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).

Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).

Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag <table>) HTML.

No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag <a>. O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag <a>, que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.

Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.

A Chamada Javascript

A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

Esse código deve vir logo antes da tag </body>, ou podemos colocar a função abre_banner() no atributo onload do próprio <body>. Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.

O Arquivo index.html Completo

<html>
<head>
	<title>Banner Popup</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="banner.js"></script>
</head>
<body>

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

</body>
</html>

O Arquivo banner.js

No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:

function fecha_banner()
{
	var banner_obj = document.getElementById('banner_popup');
	banner_obj.style.display = 'none';
}

function fecha_banner_timeout()
{
	setTimeout('fecha_banner()', 10000);
}

function abre_banner()
{
	var banner_obj = document.getElementById('banner_popup');

	banner_obj.style.left = '200px';
	banner_obj.style.top = '100px';

	banner_obj.style.display = '';

	fecha_banner_timeout();
}

A função fecha_banner()

A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).

A função fecha_banner_timeout()

A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.

A função abre_banner()

A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.

O Arquivo banner.css

No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:

.linksFechar:link
{
 	text-decoration: none;
	font-size: 14px;
	color: #000000;
}

Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.

E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.

Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.

O código abaixo mostra como colocar um vídeo do QuickTime (.mov) e mais abaixo vou colocar a explicação de cada parte do código HTML.

<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
	<PARAM name="src" value="http://localhost/blog_exemplo/cafe_townsend_chef.mov">
	<PARAM name="autoplay" value="false">
	<PARAM name="controller" value="true">
	<PARAM name="loop" value="true">
<EMBED src="http://localhost/blog_exemplo/cafe_townsend_chef.mov" width="320" height="256" autoplay="false" controller="true" loop="true" pluginspage="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>

A tag <object> chama o controle do ActiveX definido pelo atributo classid. Esse número todo representa um controle para um vídeo do QuickTime (.mov). Os atributos width e height, são respectivamente, a largura e a altura de exibição do vídeo e são atributos obrigatórios.

O atributo codebase tem como valor uma URL e ela é a URL onde tem o plugin do ActiveX que toca vídeo QuickTime (.mov). Esse local é padrão e definido pela empresa Apple, que criou o formato do QuickTime (.mov).

Nas linhas seguinte tem a tag <param>, essa tag define alguns parâmetros para o controle ActiveX. A explicação de cada parâmetro vai abaixo:

src: define a URL do vídeo a ser tocado.

autoplay: se true o vídeo se iniciará sem precisar ser clicado o play.

controller: se true exibe o controle do vídeo com os botões play/pause, stop e outros.

loop: se true reiniciará o vídeo assim que ele terminar.

Uma lista completa dos parametros pode ser vista no site: http://www.apple.com/quicktime/tutorials/embed2.html.

A tag <embed> deve ser colocada dentro da tag <object> para tocar o vídeo, pois os navegadores como o FireFox ignoram a tag <object> com esse atributo classid. Os atributos da tag <embed> podem ser os mesmos da tag <object>. O atributo pluginspage da tag <embed> tem esse valor por padrão, que é a URL onde encontrar o plugin para tocar o arquivo QuickTime (.mov).

Agora você já consegue colocar um vídeo do QuickTime (.mov) no seu site.

Para colocar um vídeo Windows Media (.wmv), acesse: Como Colocar Vídeo .WMV no seu Site (HTML).

Aqui no comocriarsites.com você aprende a fazer seu site de graça (gratis).

Se você deseja investir em um site profissional ou quer hospedar seu site em um servidor profissional acesse: http://www.panasoft.com.br

Style Position: Static

Static é o valor padrão do estilo position dos elementos de um documento html. Se você não definir o estilo position, ele será static. Esse static quer dizer que o elemento será renderizado no navegador de acordo com o local onde ele está no código, seguindo o fluxo padrão da página. Com valor static do estilo position, o elemento não segue estilo como left, right, top e bottom.

Exemplo de Position Static:

<table>
	<tr>
		<td>
		<span>normal position (static)</span>
		<span style="position: static; top: 30px; left: 80px;">Position Static.</span>
		</td>
	</tr>
</table>

Style Position: Relative

Quando um estilo (style) está em relative, o valor da posição normal do elemento é adicionada a qualquer valor de estilos left, right, top e bottom. Isso quer dizer que se o elemento é renderizado normal na posição 100 x 100, e você colocar estilo left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 130 pixels para esquerda (left) e 150 pixels do topo (top).

Exemplo de Position Relative:

<table>
	<tr>
		<td>
		<span>normal position (relative)</span>
		<span style="position: relative; top: 50px; left: 100px;">Position Relative.</span>
		</td>
	</tr>
</table>

Style Position: Absolute

Quando um elemento está com o estilo position com valor absolute, ele será posicionado exatamente nos pixels que os estilos left, right, top e bottom definirem. Se um elemento com position absolute está na posição 100 x 100, e é colocado os estilos left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 30 pixels da esquerda (left) e 50 pixels do topo (top).

Exemplo de Position Absolute:

<table>
	<tr>
		<td>
		<span>normal position (absolute)</span>
		<span style="position: absolute; top: 30px; left: 80px;">Position Absolute.</span>
		</td>
	</tr>
</table>

Para você vizualizar os exemplos acima bem, coloque-os todo em um mesmo documento html e verifique o que cada um faz com o texto deles.

Para um guia completo de CSS (Cascading Style Sheets):

http://www.w3schools.com/CSS/default.asp

O algorítimo:

function findPosX(obj)
{
	var curleft = 0;
	if(obj.offsetParent)
		while(1)
		{
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

São dois algorítimos, um para a posição horizontal (findPosX) e outro para a posição vertical (findPosY). Os dois recebem um atributo de nome obj que é o objeto do elemento que você quer saber a posição e retornam um inteiro, que é a posição do elemento no documento HTML.

As funções do Javascript offsetLeft e offsetTop, retornam um inteiro que é a distântcia em pixels entre o elemento passado como paramatro e o elemento pai desse elemento passado comoparametro. A diferença entre as duas é que a primeira (offsetLeft), retorna a distância da esquerda entre o elemento e seu elemento pai, e a segunda (offsetTop), retorna a distância de cima entre o elemento e seu elemento pai.

Abaixo um exemplo de uso:

<html>
<head>
	<title>Teste de Posicionamento em Javascript</title>
</head>
<body>

<script language="JavaScript">

function findPosX(obj)
{
  var curleft = 0;
  if(obj.offsetParent)
      while(1)
      {
        curleft += obj.offsetLeft;
        if(!obj.offsetParent)
          break;
        obj = obj.offsetParent;
      }
  else if(obj.x)
      curleft += obj.x;
  return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

</script>

<table>
	<tr>
		<td>Linha 1</td>
	</tr>
	<tr>
		<td>Linha 2</td>
	</tr>
	<tr>
		<td>
		<table>
			<tr>
				<td id="td_posicao">Quero saber a posicao desse TD</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

<script language="JavaScript">

var td_pos_obj = document.getElementById('td_posicao');

var x = findPosX(td_pos_obj);
var y = findPosY(td_pos_obj);

alert('pos x: ' + x + ' - pos y: ' + y);

</script>

</body>
</html>

Algumas explicações:

A linha “var td_pos_obj = document.getElementById(’td_posicao’);” faz a variável td_pos_obj ficar identificando o elemento que e quero saber a posição. Pode ver que na tag <td> que eu quero saber a posição, tem um atributo id, com valor igual a td_posicao. Isso serve para eu identificar o elemento e depois poder saber qual ele é facilmente utilizando a função getElementById do Javascript. Essa função é boa porque funciona tanto no IE (acho que pelo menos no 6 e no 7) e no Firefox (testado na versao 2 e 3).

Se você quer saber a diferênça entre os valores do estilo (style) position, acesse: CSS Style Position: Diferença entre Relative, Absolute e Static

Você com 3 passos e poucos cliques gera um código para colocar no seu site, pronto para tocar um vídeo, e o melhor: é de graça (gratis).

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="312">
	<param name="FileName" value="http://dominio.com/caminho/seuvideo.wmv" />
	<param name="autostart" value="true">
	<param name="ShowControls" value="true">
	<param name="ShowStatusBar" value="true">
	<param name="ShowDisplay" value="false">
<embed src="http://dominio.com/caminho/seuvideo.wmv" width="320" height="312" autostart="1" ShowControls="1" ShowStatusBar="1" ShowDisplay="0"></embed>
</object>

A tag object chama um controle ActiveX para tocar o tipo de vídeo, definido pelo atributo classid. Com o classid do exemplo acima, o controle ActiveX toca arquivos do Windows Media Video (.wmv).

Você ainda pode ver que dentro da tag object existe uma tag embed, isso tem que existir porque o object com atributo classid só funciona no Internet Explorer e a tag embed funciona no Firefox e possivelmente no Opera, e deve ser colocada dentro da tag object para os navegadores entenderem que é um vídeo só.

Dentro da tag object e embed ainda tem os atributos width e height que são a largura e a altura de exibição do vídeo em pixels, respectivamente.

Em seguida vem as tags param, elas definem parametros para o vídeo, sendo o nome do parametro o atributo name e o valor o atributo value:

FileName: O url para o seu vídeo, pode ser completa ou relativa.

autostart: Se definido como true, o vídeo vai iniciar assim que tiver carregado tempo suficiente. Se definido false, o usuário terá que iniciar o vídeo.

ShowControls: Se definido como true, o vídeo vai ser mostrado com um controle. Esse controle tem os botões play/pause, stop e outros. Esse controle ocupa 46 pixels da altura (height) total do vídeo, então se você quiser que o vídeo fique do tamanho original, adicione 46 pixels ao tamanho dele no atributo height da tag object e embed.

ShowStatusBar: Se true, mostra uma barra de status do vídeo. Essa barra tem 26 pixels de altura (height).

ShowDisplay: Se true, mostra as informações do vídeo que está tocando. Essa barra tem 74 pixels de altura (height).

Na tag embed ao invéz de usar o atributo FileName, usa-se o atributo src, que coloca a url para o vídeo. Os outros atributos funcionam igual ao explicado acima, mas coloca-se 0 para false e 1 para true.

Existe uma outra forma de colocar um vídeo .wmv em um site, explicado no site: http://www.maujor.com/tutorial/adeus-embed.php traduzido de http://www.alistapart.com/articles/byebyeembed, artigo da autora Elizabeth Castro. Ela mostra que é possível não utilizar a tag embed para tocar vídeos em qualquer navegador. Eu fiz um teste com o código que ela mostra no artigo, e ocorreram alguns bugs aqui comigo com o Firefox 3.0.6. A tela que mostra o vídeo sumia quando eu apertava um botão no controle e eu não consegui esconder os controles do vídeo. No IE7 tudo funcionou normal.

Para colocar um vídeo QuickTime (.mov) no seu site, acesse: Como Colocar Vídeo QuickTime (.mov) no seu site (HTML).

Aqui no comocriarsites.com você aprende a fazer seu site de graça (gratis).

Se você deseja investir em um site profissional ou quer hospedar seu site em um servidor profissional acesse: http://www.panasoft.com.br

O Pin Fotos facilita para você na melhoria de sua foto. Online mesmo é possível ajustar contrastes, brilho e as bordas.

Outra grande vantagem é, em vez de colocar a foto no seu site, você coloca somente o link de referência dela. Isto economiza sua banda e deixa gastar a banda da Abril.

Clique aqui para criar seu album.