Publicado em 9 de ago.

Formulário em HTML + CSS

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!

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/tnJ8t.jpg&key=81186585901c804aba9fedc625d14c3d50af5ad61d3f5a2eebbb2d9f7dba95a9" alt="tnJ8t.jpg" />

Discussão (23)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

angelorubin· 9 de ago.

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· 9 de ago.

É possível fazer tudo sim :)

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

angelorubin· 9 de ago.

>
É 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· 9 de ago.

Mas tinha outra parte:

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

Joffre Mota· 10 de ago.

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

Obrigado.

crf_h0m3r· 10 de ago.

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· 10 de ago.

Ó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· 10 de ago.

>
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· 10 de ago.

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· 10 de ago.

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· 11 de ago.

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· 11 de ago.

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

Eis o resultado:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/GcBRb.jpg&key=f149120814390fedf75c09862ee52ceadf457d1e52bc2b1852f2f6eb41fba48b" alt="GcBRb.jpg" />

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· 11 de ago.

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

Mas tá mandando bem :)

Fernando Gyn· 11 de ago.

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· 11 de ago.

>
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· 11 de ago.

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· 12 de ago.

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/HKqqU.jpg&key=f1b4a3fcddbc7688abdaa9ee9703d6911294f8497a31ea004e77bf3a3324760e" alt="HKqqU.jpg" />

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· 12 de ago.

Bom dia,

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

Fernando Gyn· 12 de ago.

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.

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.

Joffre Mota· 12 de ago.

Também preferiria usando jQuery, mas como não sei nem JavaScript, vamos por partes!! :)

O TextArea deu certo, obrigado! O código JavaScript, não deu.

A idéia é simples. Igual RadioButton de sistema desktop. Quando você seleciona SIM o NÃO é automaticamente desmarcado. É isso que quero fazer.

No caso, VACA está marcada como padrão. Quero abrir o sistema e quando eu clicar em BOI o radiobutton VACA se desmarca. Entendeu!?

crf_h0m3r· 12 de ago.

Joffre Mota, você tem que colocar os nomes do radiobutton para todas as opções. Veja que eu adicionei o nome="animal" de cada opção.

Exemplo:

<html>
<body>

<fieldset class="textoCentro">
 <legend>Escolha o animal</legend>
 <input type="radio" value="Vaca" id="rdb_Vaca" checked="checked" name="animal" /> Vaca
 <input type="radio" value="Boi" id="rdb_Boi" name="animal" /> Boi
 <input type="radio" value="Bezerro(a)" id="rdb_Bezerro" name="animal" /> Bezerro(a)
 <input type="radio" value="Novilha" id="rdb_Novilha" name="animal" /> Novilha
 </fieldset>

</body>
</html>

Desse jeito, assim que você clicar em outra opção ele vai mudar da que estava por default.

Joffre Mota· 12 de ago.

>
Joffre Mota, você tem que colocar os nomes do radiobutton para todas as opções. Veja que eu adicionei o nome="animal" de cada opção.

Exemplo:

<html>
<body>
<fieldset class="textoCentro">
 <legend>Escolha o animal</legend>
 <input type="radio" value="Vaca" id="rdb_Vaca" checked="checked" name="animal" /> Vaca
 <input type="radio" value="Boi" id="rdb_Boi" name="animal" /> Boi
 <input type="radio" value="Bezerro(a)" id="rdb_Bezerro" name="animal" /> Bezerro(a)
 <input type="radio" value="Novilha" id="rdb_Novilha" name="animal" /> Novilha
 </fieldset>
</body>
</html>

Desse jeito, assim que você clicar em outra opção ele vai mudar da que estava por default.

Obrigado pela resposta.

Fiz o que pediu, e deu o seguinte erro:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/gO2GK.jpg&key=523bba98f76e9f8f659d95d9c134812ace20cf7c10cf3100cfab9ab0427b9779" alt="gO2GK.jpg" />

_Leandro_· 15 de ago.

Outra coisa que poderia ajudar na sua diagramação seria a utilização da tag <label>.

Muitas pessoas e eu inclusive recomendo o uso de listas, para uma boa indentação dos formulários...

Att

Leandro Rodeghiero

maisumpixel.com.br