Construindo um Formulario sem uso de tabelas

[FelipeMorais 0]

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 é?!

[Hunter_ 0]

http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

 

Particularmente, eu disse PARTICULARMENTE, IMHO, não acho semântico montar um formulário com listas, para se montar um formulário você já tem as tags específicas, legend, label, fieldset... ok, ai você vai dizer, podemos intrepretar um form como uma lista de itens a serem preenchidos, não concordo, acho não semântico montar forms assim, prefiro trabalhar semânticamente com as tags específicas, xiita? posso até ser, mas melhor trabalhar do jeito certo, do jeito simples. Apenas minha opinião. Mas fica o tutorial ai, otima iniciativa de retribuir a ajuda que você ja recebeu

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[FelipeMorais 0]

Concordo que não é o correto Hunter_ ! Disso não ha o que comentar!Acontece que queria um formulário de um jeito e não conseguia colocar.Só com listas, como todo código.. eu pretendo melhora-lo em breve e coloca-lo da forma correta!Fiz esse tutorial só para aqueles que precisam de um formuilário como esse terem onde se basear, já que não encontrei nada parecido na internet!Não é para ser tomado como exemplo, mas para quem precisa fazer um desses, é bem rápido e fácil... Já ví muita gente desistindo de aplicar o css no projeto por não conseguir montar certos detalhes.Como disse, e tinha até esquecido de colocar essa posição no tópico:Não é para ser levado como exemplo, e sim uma dica, um "quebra-galho".

[Angellis 0]

E listas ordenadas? Seria semântico?

[Hunter_ 0]

também não, existem as tags específicas para estrutura de formulários

[FelipeMorais 0]

Semântico? Não, na minha opinião!

 

Mas funcionou como eu queria e não achei outra forma de fazê-lo!

Se alguem pudesse postar um tutorial melhor e estando semanticamente correto seria bom...

Como não achei nada postei esse, pois achei que alguem, em algum dia, em algum lugar do mundo iria querer fazer um formulário e, como eu, só iria encontrar aqueles de um campo em cada linha!

Dessa forma como está descrito pode-se colocar mais de um campo por linha, com o nome acima do campo.

 

Como os dois únicos posts foram críticas, vou deixar aqui um exemplo de como fica o formulário.

Se alguem puder postar um tutorial mais correto e com o mesmo resultado. Que o faça!

http://www.rolexgames.com/field.htm

 

 

 

Só mais uma coisa.. O problema são as listas??

Ficou melhor agora?

<form method="post" action="libs/inserir.php?reg=responsaveis"><fieldset><legend>Dados do Pai</legend><input name="pid" type="hidden" value="<?php echo $pid; ?>"><input name="matricula" type="hidden" value="<?php echo $matricula; ?>"><br />	<label>Nome:</label>		<input name="pai_nome" type="text" size="35">	<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 />	<label>Cidade</label>	<input name="pai_cidade" type="text" size="40">	<label>Estado</label>		<select name="pai_estado">			<option value="rj">RJ</option>			<option value="sp">SP</option>		</select>	<label>E-Mail</label>		<input name="pai_email" type="text" size="20"><br /></form></fieldset>

Quando criticarem, corrijam...

Aff tentei ajudar mas só recebi critica!

Tinha usado listas pois como falei fui fazendo aos poucos, nos erros e acertos. Só agora me liguei poderia usar quebra de linha!

Aprendi tambem que aqui so se pode fazer perguntas... Quando tenta-se ensinar algo, só aparecem pessoas para criticar. Ora!

[Giovani 104]

FelipeMorais,

 

Tudo bem?

Relaxa cara, vamos por parte! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

você fez uma coisa muito boa. Fez um tuto para o pessoal montar seus próprios formulários, é claro, é só as pessoas pesquisarem, mas ai isso é outro papo.....

PARABÉNS pela iniciativa, muito show!!!

 

O Hunter tá certo em relação a semântica? Está.....mas usando as palavras dele, cada um opta em ser [ou não] xiita.

 

Posso citar outro exemplo, vem um cara e faz um formulário com tabelas, os mais puristas em css vão dizer que está errado, mas e aí??? Se o cara fez certinho, separou o css corretamente, se atendeu a necessidade dele, tá beleza!!!

 

Então sem estresse...você fez um ótimo trabalho postando aqui!!!!

 

Novamente, parabéns pela iniciativa!!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

[]´s

[FelipeMorais 0]

gio! , como respondi as criticas não poderia deixar de responder um elogio!Fiz esse tutoria imaginando que pessoas mais experientes iriam aos poucos corrijindo-do. Como pode ver, as Tags input não estão fechadas, inicialmente estava em listas e outras coisas coisas que por ventura podem ser modificadas adequando o formulário aos padrões corretos.Poxa se o problema é a lista, tire-a e coloque quebra de linha.Era esse tipo de comentários que esperava... Afinal, os que não estão aqui para aprender, estão para ensinar, estou certo?Obrigado pelo elogio, de verdade!

[Giovani 104]

FelipeMorais,

 

Estamos TODOS aqui aprendendo!!!

E te digo uma coisa, com toda a certeza, muita gente ainda vai utilizar o "seu" formulário!!!!

 

[]´s

[Hunter_ 0]

Comecei meu post aqui escrevendo

http://forum.imasters.com.br/public/style_emoticons/default/devil.gifParticularmente, eu disse PARTICULARMENTE, IMHO ......

Não tava querendo chatear você amiguinho http://forum.imasters.com.br/public/style_emoticons/default/joia.gif , agora se você faz uma coisa esperando apenas "aplausos" meu caro, so te digo uma coisa ... não é por ai http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif relaxe, você é novo e aprende a controlar esse geniozinho explosivo http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Para ficar melhor peço a algum moderador que retire meus post nesse tópico http://forum.imasters.com.br/public/style_emoticons/default/clap.gif Ah e pra quem quiser ler sobre formulários acessíveis :Ciro Feitosa - Formulários Acessíveisnada como uma boa googlada ;) ahruahruahuah té +!![]'s Hunter_

[FelipeMorais 0]

Meu caro... não quero promover uma discussão, mas as pessoas entram aqui a procura de respostas e não de uma frase "Procure no Google!"Não esperava aplauso, reconhecimento ou coisa parecida... Esperava que pessoas que se acham boas o suficiente para criticar o trabalho dos outros pudessem ajudar a melhora-lo ao invez de praticamente falarem pra copiar um código pronto!Hunter, nada contra você ou sua opiniao, só acho que você poderia ter postado melhoria ao código ao invez de só ficar criticando!Acho que ja me fiz entender, portanto, não responderei mais a comentários que só venham a criticar!Abraço a todos!

[Hunter_ 0]

Ok, se não encarou minhas criticas bem... q se dane... na boa, sobre melhorias no código, veja q citei as tags para se usar nos formulários, apenas tentei ajudar, desculpa se ofendi vosso ego http://forum.imasters.com.br/public/style_emoticons/default/joia.gif calmae filho ;)