Construindo um Formulario sem uso de tabelas

Após muito procurar sobre como construir formulários sem tabelas, percebi que não era uma dúvida só minha, mas de muitas pessoas.

Alguns acham desnecessário já que se trata de dados tabulados, porém, por que não?!

No começo foi por teimosia mesmo, até perceber que é bem mais facil construir formulários em css do que tabelas! Como não achei nenhum tutorial, tive que ir nos erros e acertos. Cheguei em algo bem simples e praticamente ridículo quanto a complexebilidade que havia imaginado!

Chega de blábláblá, vou montar um pequeno tutorial aqui para quem tiver interesse.

Bom, código modificado 11/08/2006!

Alteraçoes:

11/08/2006 - 12:30PM - Base do código modificada de listas <ul> para quebra de linha <br />!

HTML

<fieldset><!--- criamos o campo do formulario --><legend>Dados do Pai</legend> <!--- setamos um titulo ao formulario --> <label>Nome:</label> <!--- usamos <label> no nome referente ao campo que iremos inserir--> <input name="pai_nome" type="text" size="35"><!--- em seguida colocamos o item, seja <select> <input> <textarea> ou qualquer outra coisa que queira como uma checkbox --> <label>Data de Nasc.</label> <input name="pai_nasc" type="text" size="10"> <label>Telefone</label> <input name="pai_tel" type="text" size="20"><br /> <label>Endereço</label>	<input name="pai_endereco" type="text" size="40"> <label>Bairro</label>	<input name="pai_bairro" type="text" size="40"><br /> <div align=right><!--- vemos aqui uma diferença! Bom, como pode deduzir, o formulario é alinhado à esquerda e quero os botões à direita então coloquei uma div para alinha-los--> <input type="reset" name="reset" value="Voltar">	<input type="submit" name="Submit" value="Avançar"> </div></fieldset><!--- fechamos o formulario -->agora o CSS

<!--- o * é usado para que todos os campos que tenham algum efeito já serem setados como queremos. Como a lista tem por padrao o "circ" (aquele pontinho preto) eu já começo tirando, pois não me interessa essa propriedade-->* { list-style:none;}<!--- Aqui eu digo que todos os campos "fieldset" independente de onde estejam, terão largura igual a 590px -->fieldset {width: 590px;}<!--- Aqui COMEÇA a parte interessante, pelo menos foi pra mim rsrs.. Digo que todos os campos input e select manterão uma distancia de 17px do topo e 10px da esquerda-->input, select {margin-top:17px;margin-left:10px;}<!--- Lembra do <label>? pois é, aqui está ele! Ele vai servir para que possamos ajusta o nome do campo onde queremos. Dizemos aqui que o campo terá uma posição absoluta, ou seja, dane-se o layout ele vai ficar aqui e acabou rsrsr. A pergunta é.. aqui onde? bom, ai depende de você! Teste mudar essa parte, você vai entender melhor...-->label {position:absolute;margin-top:0px;margin-left:10px;}<!--- Um detalhe interessante que aconteceu no FF e eu não conhecia... a caixa de select ficou um pouco menor do que deveria e escondeu parte do texto, sem problema, malandro que é malandro seta um width padrao para ela rsrs... Haa sim, na caixa onde tem <select name="nomequevocêcolocou"> coloca um id. Vai ficar assim: <select name="nomeque..." id="nomedoid" ai vai no css e coloca esse codigo aqui em baixo, lembrando de ajutar a largura para o tamanho que você precisa-->#nomedoid {width: 45px;}Bom galera, é isso aí, espero ter ajudado o pessoal e desculpa o poste gigante! A intenção foi boa rsrs...Como sempre recebo ajuda aqui do fórum, não custa ajudar tambem não é?!