none
Formulário utilizando DIV's RRS feed

  • Pergunta

  • 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#

    sexta-feira, 30 de março de 2012 12:40

Respostas

  • 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

    • Marcado como Resposta Harley Araujo terça-feira, 3 de abril de 2012 13:55
    sexta-feira, 30 de março de 2012 12:50
  • 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

    • Marcado como Resposta Harley Araujo terça-feira, 3 de abril de 2012 13:55
    sexta-feira, 30 de março de 2012 12:55

Todas as Respostas

  • 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

    sexta-feira, 30 de março de 2012 12:46
  • 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

    • Marcado como Resposta Harley Araujo terça-feira, 3 de abril de 2012 13:55
    sexta-feira, 30 de março de 2012 12:50
  • Olá,

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

    sexta-feira, 30 de março de 2012 12:51
  • 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

    • Marcado como Resposta Harley Araujo terça-feira, 3 de abril de 2012 13:55
    sexta-feira, 30 de março de 2012 12:55