[Resolvido] Formulário com ou sem tabelas?

[brcontainer 16]

Use FIELDSET para separar os inputs, pois foi para isso que ele foi criado ;)

[Aprendiz CSS 3]

Esta forma tem algumas incompatibilidades com browsers. A outra ainda proporciona um melhor controle sobre o visual dos elementos.

 

[]'s

Nunca soube de nada de compatibilidade,

 

poderia dar um exemplo??

 

 

 

Porque não fazer:

<label for="campo"><input id="campo" /></label> ?

A pergunta é porque usar assim

você pode fazer de forma diferente, talvez melhor semanticamente colocando o input fora do label, eu acho isso mais semantico, não dizendo que o seu esta errado!

 

Use FIELDSET para separar os inputs, pois foi para isso que ele foi criado ;)

Concordo, mas a discussão não é essa!

 

 

 

 

eu faço dessa forma e tenho total controle

 

<div>
	 <label for="campo">Campo</label>
	 <input id="campo" />
</div>

se eu fizer assim

<label for="campo">Campo</label>
	 <input id="campo" />

Ainda consigo ter controle total, apenas terei que adicionar classes para deixa-los da forma que eu quero!

 

a pergunta final é

 

qual a forma mais semantica de usar??

 

abraço

[Rasp 3]

Falae aprendiz!

Cara... caso você utilizando campos fora da div... você pode personalizar os mesmos formatando input e caso seja necessário diferenciar algum você utiliza uma classe ou o proprio id... isto você pode ver no exemplo do INSIDE e no link do maujor... nenhum desses exemplos apresenta class, ou seja, você não é obrigado a utiliza-lo para formatar todos os campos, existem outros recursos além do class e id.

 

Por favor se eu estiver errado me corrijam!

 

Abs

 

 

 

Um exemplo:

<form method="post" id="form" name="form" action="">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" class="campotexto" value="" />
<label for="senha">Senha</label>
<input type="password" name="senha" id="senha" class="campotexto" value="" />
</form>


.campotexto {
height: 22px;
float: left;
clear: both;
border: 1px solid #333;
background: #ccc url(images/degrade.jpg) repeat-x top;
}

input#nome { width: 200px; }

input#senha { width: 100px; }

Então no exemplo eu estou dizendo que a class campotexto deve formatar os campos, e abaixo digo que o input com id nome deve ter 200 de comprimento e o senha 100... é algo +/- assim... claro que você pode e deve desenvolver melhor teu css de acordo com a aplicação.

Espero ajudar abs.

[William Bruno 1501]

A própria documentação w3c, tb indica a segunda forma, que eu usei:

http://www.w3.org/TR/html401/interact/forms.html#h-17.9

 

Falamos sobre compatiblidade, pois os navegadores mais novos, já aceitam essa forma:

<label>nome: <input /></label> E os antigos não reconhecem que o nome deve ser uma área clicável, para dar o foco no input.

Por isso o uso do ID dentro do input, e do FOR no label.(convencional, mas assim como <li href=""> será algo que entrará em vigor, mas não deixaremos de usar: <li><a href=""> tão cedo..)

 

E a forma que eu apresentei, contempla essas 2 formas.

<label for="campo"><input id="campo" /></label>

Além doque <label> é um elemento próprio de formulário, e possui por si só valor semântico. Na leitura que recomendei sobre DIV e SPAN, o autor coloca o seguinte dilema:

Em outras palavras, <div> e <span> não possuem significado (são vazios em si) até que você dê um a eles. Por isso que a velha discussão de que um site tableless (que usa divs no lugar tabelas para estruturar um site) pode ser tão vazio semânticamente quanto um site estruturado com a tag font.

[Aprendiz CSS 3]

Falae aprendiz!

Cara... caso você utilizando campos fora da div... você pode personalizar os mesmos formatando input e caso seja necessário diferenciar algum você utiliza uma classe ou o proprio id... isto você pode ver no exemplo do INSIDE e no link do maujor... nenhum desses exemplos apresenta class, ou seja, você não é obrigado a utiliza-lo para formatar todos os campos, existem outros recursos além do class e id.

 

Por favor se eu estiver errado me corrijam!

 

Abs

 

 

 

Um exemplo:

<form method="post" id="form" name="form" action="">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" class="campotexto" value="" />
<label for="senha">Senha</label>
<input type="password" name="senha" id="senha" class="campotexto" value="" />
</form>


.campotexto {
height: 22px;
float: left;
clear: both;
border: 1px solid #333;
background: #ccc url(images/degrade.jpg) repeat-x top;
}

input#nome { width: 200px; }

input#senha { width: 100px; }

Então no exemplo eu estou dizendo que a class campotexto deve formatar os campos, e abaixo digo que o input com id nome deve ter 200 de comprimento e o senha 100... é algo +/- assim... claro que você pode e deve desenvolver melhor teu css de acordo com a aplicação.

Espero ajudar abs.

Eu sei disso cara!!!

Apenas quiz demostrar a minha opinião sobre o assunto...

 

 

 

A própria documentação w3c, tb indica a segunda forma, que eu usei:

http://www.w3.org/TR/html401/interact/forms.html#h-17.9

 

Falamos sobre compatiblidade, pois os navegadores mais novos, já aceitam essa forma:

<label>nome: <input /></label> E os antigos não reconhecem que o nome deve ser uma área clicável, para dar o foco no input.

Por isso o uso do ID dentro do input, e do FOR no label.(convencional, mas assim como <li href=""> será algo que entrará em vigor, mas não deixaremos de usar: <li><a href=""> tão cedo..)

 

E a forma que eu apresentei, contempla essas 2 formas.

<label for="campo"><input id="campo" /></label>

Além doque <label> é um elemento próprio de formulário, e possui por si só valor semântico. Na leitura que recomendei sobre DIV e SPAN, o autor coloca o seguinte dilema:

Em outras palavras, <div> e <span> não possuem significado (são vazios em si) até que você dê um a eles. Por isso que a velha discussão de que um site tableless (que usa divs no lugar tabelas para estruturar um site) pode ser tão vazio semânticamente quanto um site estruturado com a tag font.

Eu li o que me passou e concordo com o dilema citado

 

só não gosto muito disso

<label for="campo"><input id="campo" /></label>

mas acho que é isso...

 

a única coisa que me chateia!

 

é que o pessoal não usa a busco do forum!

 

pois ler tudo aqui que foi dito é uma excelente fonte de conhecimento

 

uma pena!

 

abraço

[Giovani 104]

O que mais me chateia é quando pedimos para pesquisar (pois sabemos que já tem a resposta no fórum) e a pessoal fica irritada, pensando que não queremos ajudar.

 

a única coisa que me chateia!

 

é que o pessoal não usa a busco do forum!

 

pois ler tudo aqui que foi dito é uma excelente fonte de conhecimento

[brcontainer 16]

só não gosto muito disso

tambem não gosto dessa maneira, pois acredito que o FOR ja seja para acessar IDs, se fizer o input dentro do label não terá a necessecidade de usar o for e id, dae vêem o motivo do uso de FOR e ID

para quando usamos eles separadamente.

Eu pessoalmente prefiro usar assim:

 

<labe for="id">LABEL</label>
<input id="id" />

e no caso com UL e LI e prefiro usar fieldset, não que ul e li seja errado mas eu raramente necessito dividir os inputs pois faço de uma maneira que eles se alinham "perfeitamente", somente uso o fieldset quando tenho necessidade de usar SELECT ou INPUT=RADIO que geremente são interpretados diferentes dos outros elementos.

 

podem percebem que eu tenho um tamanho fixo para os labels e para os inputs como no meu tutorial:

http://forum.imasters.com.br/index.php?showtopic=279679

 

assim todos ficam alinhados pois o uso do float alinhado a um elemento pai faz ter a mesma medida.

 

E conforme o W3C ambas formas são corretas, portanto acredito que seja uma maneira opcional escolha a que você se adaptar melhor ;)

[William Bruno 1501]

se fizer o input dentro do label não terá a necessecidade de usar o for e id, dae vêem o motivo do uso de FOR e ID

para quando usamos eles separadamente.

Navegadores antigos não reconhecem a área clicável, se você apenas colocar o input dentro do label.

Por isso eu apresentei a forma com as 2 coisas. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Eu por mim, nem gosto de fazer formulário http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Mas teste o seguinte no IE6

<label>Campo: <input type="text" /></label>
<label for="campo2">Campo2: <input type="text" id="campo2" /></label>
<label for="campo3">Campo3: </label>
	<input type="text" id="campo3" />

Verá que a primeira forma, simplesmente não funciona.

você tenta clicar em "Campo", e o input não recebe o foco. Atentem ao que eu disse, é a terceira vez que tento apresentar, os motivos de usar de certa forma, e não de outra.

Por isso indico a segunda forma que apresentei no "Campo2".

[brcontainer 16]

Realmente no IE6 nem sinal de vida hehehe, então AGORA é "lei" hehehe, tanto ao usar input dentro do label ou fora deveremos usar FOR e IDs(lembrando que no futuro possivelmente IDs serão os substitutos dos NAMEs ;) )

 

eu to vivendo e aprendendo =D

Valew William