[Resolvido] Formulário com DIV

[FabianoSouza 5]

Qual "a técnica" que vocês usam para criar formulários com DIV??

To tentando criar um form com duas "colunas", a da esquerda contendo nomes dos campos e a da direita com as caixas de texto para preenchimento.

 

O duro e fazer este layout apenas com DIV

 

Nome : _______________

Tel: _______________

Cidade:_______________

Estado:_______________

 

Fazendo isso

<div class="rotulo">Nome</div><div class="campo">|_____________|</div>

 

<div class="rotulo">Tel:</div><div class="campo">|_____________|</div>

 

Trunca tudo a partir da segunda linha...numa tabela seria facinho...hehehe

 

Help!

[Hoch 1]

Cara, eu aprendi a fazer desta maneira que você quer, no meu curso técnico, mas na hora de testar no IE e no Chrome, eles ficavam desalinhados, o nome com o campo de texto, mas se você quiser fazer assim, o modo é:

 

Criar uma div para os nomes e criar uma div para os campos.

Dentro de cada div, coloque uma lista, como no exemplo em seguida.

E alinhe-os com o css para cada div

 

Exemplo:

<div id="nomes">
<ul>
<li>Nome:</li>
<li>Rg:</li>
<li>CPF:</li>
<li>Idade:</li>
<li>Telefone:</li>
<li>Endereço:</li>
<li>Complemento:</li>
<li>Bairro:</li>
<li>Cidade:</li>
<li>CEP:</li>
<li>Sexo:</li>
<li>Login:</li>
<li>Senha:</li>
<li>Verificar:</li>
</ul>
</div>
<div id="campos">
<ul>
<li>
<!--Aqui vai o li com cada input -->
</ul>
</div>

CSS
#nomes {
   float: left;
   width: 90px;
}
#campos{
   float: left;
}
#campos ul {
   display: block;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 16px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: left;
   width: 100%;
}
#nomes ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: right;
   width: 100%;
}

 

Mas o método que eu faço para criar um formulário é utilizando os <label> e Inputs, alinhando eles por css apenas...

Mas cada Layout é um layout!

 

Abraço!

 

Espero que ajude.

[FabianoSouza 5]

Interessante. Mas tem um detalhe. Se o controle for maior do que uma simples caixa de texto (um textarea, por exemplo) já complica todo o ainhamento que fizer no CSS.

 

Bolei uma maneira com base na sua sugestão.

 

Coloco o nome do campo e o input na mesma linha da LI e aplico o estilo "inline" na LI e defino a largura das divs rotulo e campos.

 

 

<ul>

<li ><div class=rotulo>Nome</div><div class="campo"><input type="text"></div></li>

</ul>

 

Considerações.

Prós:

 

Funciona perfeitamente em todos os navegadores (inclusive no modo de compatibilidade do IE). Não desalinha em nada.

 

Contra:

Tem que fazer ajustes finos "na mão". Tipo, se uma linha tiver um textarea tenho que aumentar a altura da DIV rotulo e campo diretamente no código (o ideal seria o CSS arrumar isso automaticamente, to vendo se consigo fazer isso)

Os ajustes específicos geram mais código HTML (mais trampo e menos performance da página)

 

Bom, acho que cou usar isso até achar algo melhor.

 

Obrigado pela contribuição!

[Henrique Barcelos 290]

Não, não... Cadê a semântica do código? Um formulário não é uma lista não-ordenada, logo, não devemos utilizar essas tags para construí-lo.

 

Veja:

:seta: http://henriquebarcelos.in/blog/2011/12/03/construindo-um-formulario-semantico-em-html

[FabianoSouza 5]

Salve Henrique!

 

Sim, você está certo. Mas como não estava conseguindo fazer da forma que queria, acabei "invetando" algo.

 

Olhei seu link...form de profissa.

 

Obrigado pela dica.

 

 

Ah, fala uma coisa. Dúvida de pricipiante hehe.

 

É natural que o form apareça truncado quando em desenvolvimento?

To usando o Drewaweaver como plataforma e no modo design ele fica meio desconfigurado.

 

Obrigado.

[Rodrigo Zanotta 0]

Salve Henrique!

 

Sim, você está certo. Mas como não estava conseguindo fazer da forma que queria, acabei "invetando" algo.

 

Olhei seu link...form de profissa.

 

Obrigado pela dica.

 

 

Ah, fala uma coisa. Dúvida de pricipiante hehe.

 

É natural que o form apareça truncado quando em desenvolvimento?

To usando o Drewaweaver como plataforma e no modo design ele fica meio desconfigurado.

 

Obrigado.

 

Cara, ignore o modo design do Dreamweaver. Vá salvando e testando diretamente nos navegadores.