Formulário utilizando DIV's

Question

Bom dia pessoal,

Antigamente utilizava tabelas para criação dos formulários web. Agora estou utilizado somente div's só que surgiu uma dúvida.

Tenho um formulário com muitos campos a serem preenchidos e preciso que o componentes fiquem tipo um matriz de 4x4, ou seja,

4 componentes lado a lado na 1 linha e mais 4 componentes embaixo na 2 linha...

Como posso fazer isso utilizando DIV's de modo limpo para o código?

VS2010, ASP.NET, C#

Answer 1

Bom Dia,

Vc poderia fazer assim:

<fieldset>
 <legend>Meu Formulário</legend>
 <div class="linha">
  <ul>
   <li>Valor 1:<br><input type="text"/></li>
   <li>Valor 2:<br><input type="text"/></li>
   <li>Valor 3:<br><input type="text"/></li>
   <li>Valor 4:<br><input type="text"/></li>
  </ul>
 </div>

  <div class="linha">
  <ul>
   <li><span>Valor 1:</span><br><input type="text"/></li>
   <li>Valor 2:<br><input type="text"/></li>
   <li>Valor 3:<br><input type="text"/></li>
   <li>Valor 4:<br><input type="text"/></li>
  </ul>
 </div>
</fieldset>

E com o css, vc formata as "li" para ficarem lado, então cada "linha" do seu form, vc teria 4 valores, e caso vc precisa de uma formatação diferente para o "Valor 1:" vc poderia colocá-lo dentro de um "<span>Valor 1:</span>"

Espero ter ajudado.

Abcs

Answer 2

Você pode criar uma classe de Div`s com o mesmo tamanho e colocar no css como flutuar a esquerda "float: left", deste jeito:

html:

<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>
<div class="fields"><!--controle aqui--></div>

css:

.fields{
  width: 200px;
  height: 20px;
  float: left;
  margin-left: 15px;
  margin-top:10px;
}

espero ter ajudado

abraços

---

"Faça as coisas da forma mais simples possível. Mas não mais simples do que isto" - Albert Einstein

Answer 3

Olá,

Como faço a formatação para ficarem lado a lado?

Answer 4

BOm Dia,

No meu caso, prefiro dentro da DIV, usar uma estrutuar de lista.

Naquele meu exemplo, vc poderia usar a css da seguinte forma:

fieldset{
  width: 600px;
}

.linha{
 width: 600px;
 float: left;
}

.linha ul li
{
 width: 150px;
 float: left;
 line-style: none;//pra garantir que nos IE não apareca as "bolinhas"
}

.linha ul li span
{
 font-weight: 700;//negrito
}

Espero ter ajudado

Abcs