Formulário em HTML + CSS

Joffre Mota · Agosto 9, 2011

Gostaria de saber se é possível construir o formulário abaixo usando apenas HTML e CSS sem usar tabelas. Ou jQuery, ou qualquer outra ferramenta WEB compatível com Asp.NET MVC!

Se sim, alguém poderia fazer para servir como modelo para meus estudos?

Obrigado!

angelorubin · Agosto 9, 2011

Boa tarde,

Quase tudo que tem neste formulário da para fazer somente com XHTML e CSS.

As coisas não possíveis (em minha opinião) são:

1 - Canto arredondado no botão não é possivel.

2 - A formatação no campo de data.

Creio que seria isso, o resto da para chegar bem próximo do exemplo.

Espero que ajude.

Giovani · Agosto 9, 2011

É possível fazer tudo sim :)

Os cantos arredondados dos botões podem ser feitos com imagens. A máscar por js.

angelorubin · Agosto 9, 2011

É possível fazer tudo sim :)

Os cantos arredondados dos botões podem ser feitos com imagens. A máscar por js.

A minha resposta se guiou por esta parte da pergunta dele Giovani:

"Gostaria de saber se é possível construir o formulário abaixo usando apenas HTML e CSS ....."

Giovani · Agosto 9, 2011

Mas tinha outra parte:

... usando apenas HTML e CSS sem usar tabelas. Ou jQuery, ou qualquer outra...

:D

Joffre Mota · Agosto 10, 2011

Ok!!! E teria como fazer um formulário desse para servir de exemplo e material de estudos?

Obrigado.

crf_h0m3r · Agosto 10, 2011

Jofre, que tal você tentar fazer e a medida que as dúvidas vierem surgindo a gente vai tentando solucioná-las?

Já que o interessado é você, comece primeiro. É errando que se aprende :thumbsup:

Giovani · Agosto 10, 2011

Ótima ideia :joia:

Jofre, que tal você tentar fazer e a medida que as dúvidas vierem surgindo a gente vai tentando solucioná-las?

Joffre Mota · Agosto 10, 2011

Joffre, que tal você tentar fazer e a medida que as dúvidas vierem surgindo a gente vai tentando solucioná-las?

Já que o interessado é você, comece primeiro. É errando que se aprende :thumbsup:

Ótima ideia :joia:

O problema não é fazer os campos e tal. O problema é apenas deixá-los alinhados. Se for para fazer com tabela fica muito fácil, mas como é para usar divs, eu não sei nem como errar. Por isso gostaria de um exemplo.

Giovani · Agosto 10, 2011

form > ( fieldset > label > inputs/selects/radios/checks ) + ( fieldset > label > inputs/selects/radios/checks ) ....

Basicamente isso. Posicione os fieldsets, depois trabalhe os campos dentro deles.

Fernando Gyn · Agosto 10, 2011

Bom recomendo maujor.com

e pode também dar uma olhada nesse vídeo.

http://campus.visie.com.br/default/video/1

bom quando começei me ajudou bastante.

Joffre Mota · Agosto 11, 2011

form > ( fieldset > label > inputs/selects/radios/checks ) + ( fieldset > label > inputs/selects/radios/checks ) .... 
Basicamente isso. Posicione os fieldsets, depois trabalhe os campos dentro deles.

Vou tentar e posto aqui para vocês o resultado! Obrigado pela dica.

---

Bom recomendo maujor.com

e pode também dar uma olhada nesse vídeo.

http://campus.visie.com.br/default/video/1

bom quando começei me ajudou bastante.

Conterrâneo!! Gyn rulz...

O site mais visitado pelo meu browser é o maujor!!! ;D

Vou salvar o link para esse vídeo e darei uma olhada em casa. Obrigado pelas dicas!

---

Joffre Mota · Agosto 11, 2011

Aí, fiz aqui. Devo confessar que ficou uma m***** beleza! Hahahaha

Eis o resultado:

Aqui meu código HTML:

<div class="pagFull">
   <div class="conteudo">
       <fieldset>
           <center>
               <input type="radio" value="Vaca" id="rdb_Vaca" checked="checked"/> Vaca
               <input type="radio" value="Boi" id="rdb_Boi" /> Boi
               <input type="radio" value="Bezerro(a)" id="rdb_Bezerro" /> Bezerro(a)
               <input type="radio" value="Novilha" id="rdb_Novilha" /> Novilha
           </center>
       </fieldset>
       <div class="conteudoEsq">
           <fieldset class="fieldset_1">
               <p>
                   Código: <input type="text" class="txtDisabilitado" id="txt_Codigo" size="1" readonly="readonly" />
                   Dt Nasc: <input type="text" id="txt_DtNasc" size="11"/>
               </p>
               <p>
                   Nome do animal: <input type="text" id="txt_Nome" size="30"/>
               </p>
               <p>
                   <%--Esse valor vai ser puxado do banco de dados--%>                    
                   Nome da mãe: <select id="cbb_NomeMae" size="1">
                                   <option value="#" />
                                   <option value="#" /> NOME DA MÃE DO ANIMAL
                                </select>
               </p>
           </fieldset>
       </div>
       <div class="conteudoDir">
           <fieldset class="fieldset_1">
               <p>
                   Status: <select id="cbb_Status" size="1">
                               <option value="#"/>
                               <option value="#"/>ATIVO
                               <option value="#"/>INATIVO
                               <option value="#"/>MORTO
                           </select>
               </p> 
               <p>
                   <%--Esse valor vai ser puxado do banco de dados--%>
                   Raça: <select id="cbb_Raca" size="1">
                           <option value="#" />
                           <option value="#" />RAÇA 1
                           <option value="#" />RAÇA 2
                           <option value="#" />RAÇA 3
                         </select>
               </p>
               <p>
                   <%--Esse valor vai ser puxado do banco de dados--%>
                   Localização: <select id="cbb_Localizacao" size="1">
                                   <option value="#" />
                                   <option value="#" />LOCAL 1
                                   <option value="#" />LOCAL 2
                                   <option value="#" />LOCAL 3
                                </select>
               </p>
           </fieldset>

       </div>
       <fieldset>

           Animal Comprado? <input type="radio" checked="checked"/> Não <input type="radio" /> Sim
           <center>
               <p>
                   Dt Compra: <input type="text" size="11" id="txt_DtCompra" />
                   <%--Esse valor vai ser puxado do banco de dados--%>
                   Nome do Vendedor: <select id="cbb_NomeVendedor" size="1"><option value="#" /><option value="#" />NOME COMPLETO DO VENDEDOR</select>
                   Vlr da Compra: <input type="text" size="3" id="txt_VlrCompra" />
               </p>
           </center>
       </fieldset>
       <fieldset>
           <div class="conteudoEsqFS">
               <fieldset>
                   Dt. Pariu <input type="text" size="11" />
               </fieldset>
           </div>
           <div class="conteudoDirFS">
               <fieldset>
                         <input type="radio" id="rdb_Femea" checked="checked" /> Fêmea
                         <input type="radio" id="rdb_Macho" /> Macho
               </fieldset>
           </div>
       </fieldset>

       <fieldset>
           Descrição do animal:
               <center>
                   <p><input type="text" size="50" /></p>
               </center>
       </fieldset>

       <fieldset>
           <center>
               <input type="button" id="btn_Salvar" value="SALVAR"/>
               <input type="button" id="btn_Alterar" value="ALTERAR" />
               <input type="button" id="btn_Limpar" value="LIMPAR" />
               <input type="button" id="btn_Excluir" value="EXCLUIR" />
               <input type="button" id="btn_Sair" value="SAIR" />
           </center>
       </fieldset>

   </div>
</div>

E aqui o CSS utilizado:

.pagFull
{
   margin: auto;
   width: 1200px;
   /*height: 800px;*/
   height: auto;
   margin-bottom: 50px;
   background-color: #FFFFFF;
}

.conteudo
{
   width: 800px;
   margin-left: 200px;
}

.conteudoEsq
{
   width: 400px;
   float: left;
   /*background-color: Black;*/
   margin: auto;
}

.conteudoDir
{
   width: 400px;
   float: right;
   /*background-color:Blue;*/
   margin: auto;
}

.fieldset_1
{
   height: 110px;
}

.conteudoEsqFS
{
   width: 394px;
   float: left;
   /*background-color: Black;*/
   margin: auto;
}

.conteudoDirFS
{
   width: 394px;
   float: right;
   /*background-color:Blue;*/
   margin: auto;
}

.txtDesabilitado
{
   background-color:#F8F8F8;
}

Apesar de ter ficado relativamente alinhado da forma que eu quero, ainda não está exatamente do jeito que eu quero, pois usei 2 fieldset para alinhar alguns campos quando no formulário desktop eu só usei um. Também falta alinhar as combobox (não faço idéia de como arrumar isso). Não consegui colocar a quantidade de linhas que eu quero no TextBox da descrição... dentre vários outros detalhes.

Não consegui também nomear os fieldsets. Tento usar a tag 'legend' mas não permite por estar dentro de div.

Vale ressaltar que estou trabalhando com Asp.NET e o WebForm criado está dentro de uma MasterPage. Portanto, o que eu mostrar aqui é apenas o body.

Giovani · Agosto 11, 2011

Você sabe que não precisa destas div s todas, certo? Pode adicionar estilos nos fieldset's.

Mas tá mandando bem :)

Fernando Gyn · Agosto 11, 2011

Esta mandando muito bem acredito que poderia tirar esses

<center>
</center>

tipo onde precisa centralizar tenta usar

text-align:center;

bom quanto a combos você pode deixar o nó acima como

position:relative

e os combos como absolute.

depois que você ver o vídeo vai entender.

Joffre Mota · Agosto 11, 2011

Você sabe que não precisa destas div s todas, certo? Pode adicionar estilos nos fieldset's.

Mas tá mandando bem :)

Diminuí as divs. Tirei uns 4 pares de divs do meu código! ;D

Esta mandando muito bem acredito que poderia tirar esses
<center>
</center>
tipo onde precisa centralizar tenta usar
text-align:center;
bom quanto a combos você pode deixar o nó acima como
position:relative
e os combos como absolute.

depois que você ver o vídeo vai entender.

Removi as tags 'center' do meu código e atribuí os text-align usando o css.

Agora não consegui resolver a falta de alinhamento das combobox. E não consegui ainda colocar título nos fieldset.

Dicas?!

Fernando Gyn · Agosto 11, 2011

dentro do fielset coloca a tag legend

<legend>seu texto</legend>

essa legend deve ficar dentro do fieldset.

quanto aos combos tenta

select{
position:relative;
right:0;
}

Joffre Mota · Agosto 12, 2011

Bom dia povo.

@Fernando Gyn, fiz o que você falou, acrescentei as 'legend' que antes não estavam dando certo (não sei porque), e também fiz a alteração colocando 'position:relative' e 'right:0' nas combo, mas não adiantou. Não dá nenhuma alteração, em compensação, quando coloco 'position:absolute' ou 'fixed', as combos são jogadas para a direita da página, saindo até do fieldset e das divs. Oo

E tenho outras dúvidas. Para habilitar/desabilitar determinados campos uso javascript?! Por exemplo para permitir que apenas um radiobutton seja clicado. Ou quando um radiobutton é clicado, determinados campos se desabilitam e outras habilitam, e por aí vai... No meu caso, quero clicar no RadioButton "VACA" do topo da página e desabilitar a escolha do sexo que é específica dos bezerros. Quero também, no fieldset "Animal Comprado" deixar tudo desabilitado, a não ser que eu clique em SIM (daí tudo é habilitado). :)

Também está faltando aumentar a textbox da descrição (ao final da página).

Valeu pela ajuda até agora. Te pago uma cerveja (ou coca, se não beber) qualquer dia desses! ;D

Agora meu formulário está assim:

Meu HTML está assim:

    <div class="pagFull">
       <div class="conteudo">
           <fieldset class="textoCentro">
               <legend>Escolha o animal</legend>
                   <input type="radio" value="Vaca" id="rdb_Vaca" checked="checked"/> Vaca
                   <input type="radio" value="Boi" id="rdb_Boi" /> Boi
                   <input type="radio" value="Bezerro(a)" id="rdb_Bezerro" /> Bezerro(a)
                   <input type="radio" value="Novilha" id="rdb_Novilha" /> Novilha
           </fieldset>
           <div class="conteudoEsq">
               <fieldset class="fieldset_1">
                   <legend>Informações específicas</legend>
                   <p>
                       Código: <input type="text" class="txtDesabilitado" id="txt_Codigo" size="1" disabled="disabled" />
                       Dt Nasc: <input type="text" id="txt_DtNasc" size="11"/>
                   </p>
                   <p>
                       Nome do animal: <input type="text" id="txt_Nome" size="30"/>
                   </p>
                   <p>
                       <%--Esse valor vai ser puxado do banco de dados--%>                    
                       Nome da mãe: <select id="cbb_NomeMae" size="1">
                                       <option value="#" />
                                       <option value="#" /> NOME DA MÃE DO ANIMAL
                                       </select>
                   </p>
               </fieldset>
           </div>
           <div class="conteudoDir">
               <fieldset class="fieldset_1">
                   <legend>Detalhes</legend>
                   <p>
                       Status: <select id="cbb_Status" size="1" class="combo">
                                   <option value="#"/>
                                   <option value="#"/>ATIVO
                                   <option value="#"/>INATIVO
                                   <option value="#"/>MORTO
                               </select>
                   </p> 
                   <p>
                       <%--Esse valor vai ser puxado do banco de dados--%>
                       Raça: <select id="cbb_Raca" size="1" class="combo">
                               <option value="#" />
                               <option value="#" />RAÇA 1
                               <option value="#" />RAÇA 2
                               <option value="#" />RAÇA 3
                               </select>
                   </p>
                   <p>
                       <%--Esse valor vai ser puxado do banco de dados--%>
                       Localização: <select id="cbb_Localizacao" size="1" class="combo">
                                       <option value="#" />
                                       <option value="#" />LOCAL 1
                                       <option value="#" />LOCAL 2
                                       <option value="#" />LOCAL 3
                                       </select>
                   </p>
               </fieldset>

           </div>
           <fieldset>
               <legend>Animal comprado?</legend>
                   <input type="radio" checked="checked"/> Não <input type="radio" /> Sim
                   <p class="textoCentro">
                       Dt Compra: <input class="txtDesabilitado" type="text" size="11" id="txt_DtCompra" disabled="disabled" />
                       <%--Esse valor vai ser puxado do banco de dados--%>
                       Nome do Vendedor: <select class="txtDesabilitado" id="cbb_NomeVendedor" size="1" disabled="disabled"><option value="#" /><option value="#" />NOME COMPLETO DO VENDEDOR</select>
                       Vlr da Compra: <input class="txtDesabilitado" type="text" size="3" id="txt_VlrCompra" disabled="disabled" />
                   </p>
           </fieldset>
           <fieldset class="textoCentro">
               <legend>Informações específicas</legend>
                   <fieldset class="conteudoEsqFS">
                       <legend>Vaca</legend>
                       Dt. Pariu <input type="text" size="11" />
                   </fieldset>
                   <fieldset class="conteudoDirFS">
                       <legend>Bezerro(a)</legend>
                               <input type="radio" id="rdb_Femea" checked="checked" /> Fêmea
                               <input type="radio" id="rdb_Macho" /> Macho
                   </fieldset>
           </fieldset>

           <fieldset>
               <legend>Descrição do animal</legend>
                       <p class="textoCentro"><input type="text" size="50" /></p>
           </fieldset>

           <fieldset class="textoCentro">
               <legend>Ações</legend>
                   <input type="button" id="btn_Salvar" value="SALVAR" onclick="SalvarAnimal"/>
                   <input type="button" id="btn_Alterar" value="ALTERAR" />
                   <input type="button" id="btn_Limpar" value="LIMPAR" />
                   <input type="button" id="btn_Excluir" value="EXCLUIR" />
                   <input type="button" id="btn_Sair" value="SAIR" />
           </fieldset>

       </div>
   </div>

Meu CSS está assim:

.fieldset_1
{
   height: 130px;
}

.conteudoEsqFS
{
   width: 380px;
   float: left;
   /*background-color: Black;*/
   margin: auto;
   margin-bottom:1px;
}

.conteudoDirFS
{
   width: 380px;
   float: right;
   /*background-color:Blue;*/
   margin: auto;
   margin-bottom:1px;
}

.txtDesabilitado
{
   background-color:#F8F8F8;
}

.textoCentro
{
   text-align: center;
}

.combo
{
   position: relative;
   right: 0px;
}

angelorubin · Agosto 12, 2011

Bom dia,

Eu utilizaria ainda <label> e também e me livraria dos <p> e <div>.

Fernando Gyn · Agosto 12, 2011

E tenho outras dúvidas. Para habilitar/desabilitar determinados campos uso javascript?! Por exemplo para permitir que apenas um radiobutton seja clicado. Ou quando um radiobutton é clicado, determinados campos se desabilitam e outras habilitam, e por aí vai... No meu caso, quero clicar no RadioButton "VACA" do topo da página e desabilitar a escolha do sexo que é específica dos bezerros. Quero também, no fieldset "Animal Comprado" deixar tudo desabilitado, a não ser que eu clique em SIM (daí tudo é habilitado).

bom não sei como funciona seu sistema,

mas selecionar apenas um radiobutton deixa ele com mesmo nome.

quanto aos campos habilitado e trabalhar mesmo como javascript do tipo.

<script type="text/javascript">
var campo = document.getElementById("campo");
if(campo.checked==true && campo.value=="vaca"){
 document.getElementById("campo").disable= "disabled";
}
</script>

mas nem leva isso como regra e prefiro usando jquery.

Também está faltando aumentar a textbox da descrição (ao final da página).

quanto a descrição porque não utiliza textarea.

<textarea cols="quantidade de colunas" rows="quantidade de linhas"></textarea>

Valeu pela ajuda até agora. Te pago uma cerveja (ou coca, se não beber) qualquer dia desses! ;D

sem essa estamos aqui para ajudarmos uns aos outros.

Arquivado

Formulário em HTML + CSS

Recommended Posts

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Gyn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Gyn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Gyn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Joffre Mota 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Gyn 0