Criando formulário com css

[André Severino 3]

Boa tarde pessoal, estou tentando criar um formulário, mas o label(Senha, Nova Senha, Confirme sua senha), está desalinhado, ele não fica no meio certo, igual no ie8/ff4/ie9, apenas no ie7 fica na base.

 

Abaixo uma imagem para mostrar o problema.

Imagem

 

css.css

#form-senha{width:280px; margin-top:24px;}
#form-senha fieldset{border:none;}
#form-senha fieldset label{display:block; text-align:right;}
#form-senha fieldset label span{font-weight:bold;}
#form-senha fieldset label input{width:150px; height:18px; padding:2px; margin-bottom:8px; margin-left:4px;}

[_Leandro_ 0]

Posta ai teu html e css pra gente poder testar...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[Andreh Moura 0]

Talvez falte um line-height na sua label. Coloque um valor igual a altura do campo.

 

De qualquer forma posta o html pra gente entender melhor.

[André Severino 3]

Olá pessoal, desculpe, acabei esquecendo de colocar o .html, então segue abaixo o .html e o css.

 

.html

<form name="form-senha" id="form-senha" method="post" action="">
 <fieldset>
   <label><span>Senha atual:</span> <input type="password" name="senha1" id="senha1" /> </label>
   <label><span>Nova senha:</span> <input type="password" name="senha2" id="senha2" /> </label>
   <label><span>Confirmar senha:</span> <input type="password" name="senha3" id="senha3" /> </label>
 </fieldset>
</form>

 

.css

#form-senha{width:280px; margin-top:24px;}
#form-senha fieldset{border:none;}
#form-senha fieldset label{display:block; text-align:right;}
#form-senha fieldset label span{font-weight:bold;}
#form-senha fieldset label input{width:150px; height:18px; padding:2px; margin-bottom:8px; margin-left:4px;}

 

Já tentei inserir um line-height, mas também não consegui :thumbsup:

[Kaue Machado 0]

Olá pessoal, desculpe, acabei esquecendo de colocar o .html, então segue abaixo o .html e o css.

 

.html

<form name="form-senha" id="form-senha" method="post" action="">
 <fieldset>
   <label><span>Senha atual:</span> <input type="password" name="senha1" id="senha1" /> </label>
   <label><span>Nova senha:</span> <input type="password" name="senha2" id="senha2" /> </label>
   <label><span>Confirmar senha:</span> <input type="password" name="senha3" id="senha3" /> </label>
 </fieldset>
</form>

 

.css

#form-senha{width:280px; margin-top:24px;}
#form-senha fieldset{border:none;}
#form-senha fieldset label{display:block; text-align:right;}
#form-senha fieldset label span{font-weight:bold;}
#form-senha fieldset label input{width:150px; height:18px; padding:2px; margin-bottom:8px; margin-left:4px;}

 

Já tentei inserir um line-height, mas também não consegui :thumbsup:

você tentou inserir line-height: 18px; no estilo do input? e não deu certo?

[André Severino 3]

Sim na verdade ele até estar com o line-height no input é que esqueci de atualizar, mas o line-height no input seta as conf. apenas dentro do input e não fora, queria acertar o span/label ali, pq não fica no meio certinho. :(

[_Leandro_ 0]

Cara, seguinte....

Para o span "pegar" alguns valores ele precisa ter a propriedade "display:block;"

 

Porém acho bem melhor para conseguir mais controle sobre a visualização do form utilizar uma lista... segue exemplo com teu código alterado.

 

HTML

<form name="form-senha" id="form-senha" method="post" action="">
 <fieldset>
 <ul class="form">
<li><label for="senha1">Senha atual:</label><input type="password" name="senha1" id="senha1" /></li>
   <li><label for="senha2">Nova senha:</label><input type="password" name="senha2" id="senha2" /></li>
   <li><label for="senha3">Confirmar senha:</label> <input type="password" name="senha3" id="senha3" /></li>
 </ul>
 </fieldset>
</form>

 

CSS

.form li{list-style:none;padding:2px 0;width:600px;}
.form label{display:block;float:left;text-align:right;width:120px;margin-right:5px;cursor:pointer;}
.form input{padding:2px;}

 

Faz uns testes ai...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[André Severino 3]

Boa noite Leandro, obrigado pela ajuda mais uma vez, entendo o que você disse, mas se eu utilizar a lista não ordenada dentro de meu form/fieldset, isso não seria semântico ?

[_Leandro_ 0]

De fato esta é uma questão que pode causar uma boa discussão, porém aqui na empresa todos concordam que a melhor solução para a customização de um formulário crossbrowser é com a utilização de listas...

 

Eu particularmente não vejo problema visto que um formuário pode sim ser considerado uma lista de itens não?

 

1 - nome

2 - cpf

3 - endereço

4 - etc...

 

Até mais

Leandro Rodeghiero

http://www.maisumpixel.com.br

[André D. Molin 15]

É tudo questão de como é feito. Eu por exemplo já penei muito com formulários, tinha que fazer hacks para arrumar problemas no IE e etc.

Depois de muita luta com formulários fui fazendo testes para ver o que funciona melhor em todos os navegadores. Então eu cheguei numa marcação que não necessita de nenhum hack (nem no HTML nem no CSS).

Vou te dar um exemplo de um freela que fiz esses dias (ele está incompleto, não repara rs).

 

Veja => http://viveironoroeste.com.br/pre-orcamento

 

Ele funciona perfeitamente, totalmente alinhado, no IE7+, Firefox, Safari, Chrome, Opera. E como disse, não usei nenhum hackzinho sequer.

A marcação do formulário basicamente é essa:

 

<form method="post" action="http://viveironoroeste.com.br/pre-orcamento/enviar" id="pre-orc-form">
   <fieldset>
       <legend><span>Dados Pessoais</span></legend>

       <div>
           <label for="company"><span>(*)</span> Empresa:</label>
           <input type="text" name="company" id="company" class="required" />
           <span>Digite o nome da empresa.</span>
       </div>

       <div>
           <label for="contact"><span>(*)</span> Contato:</label>
           <input type="text" name="contact" id="contact" class="required" />
           <span></span>
       </div>

       <div>
           <label for="phone"><span>(*)</span> Telefone:</label>
           <input type="text" name="phone" id="phone" class="required" />
           <span>Digite o seu telefone/celular.</span>
       </div>

       <div>
           <label for="email">E-mail:</label>
           <input type="text" name="email" id="email" />
       </div>

       <div>
           <label for="obs">Observações:</label>
           <textarea name="obs" id="obs"></textarea>
       </div>
   </fieldset>
</form>

 

É vem simples, veja que separo cada linha com uma DIV, e dentro da DIV tem o label, o input.

E o CSS do formulário é esse:

 

.pg-orc form { margin-top: 30px; }

   .pg-orc form fieldset >  div { padding: 10px 0; }
       .pg-orc form fieldset > div > span { color: #990000; margin-left: 10px; display: none; }

       .pg-orc form label {
           display: inline-block;
           float: left;
           width: 120px;
           font: bold 1.3em Arial;
           color: #8B763F;
           padding-top: 4px;
       }

           .pg-orc form label span { font: normal .8em Arial; }

       .pg-orc form input[type='text'],
       .pg-orc form textarea {
           font: 1.2em Arial;
           color: #8B763F;
           background: #FAF9F4;
           border: 1px solid #8A960E;
           padding: 6px 5px;
       }

       .pg-orc form input[type='text'] { width: 230px; height: 15px; }

       .pg-orc form textarea {
           width: 400px; max-width: 400px;
           height: 150px;
           font: 1.3em/17px Arial;
       }

 

Espero que tenha ajudado.

[_Leandro_ 0]

Minha opinião pessoal, já que falaram de semântica acima...

 

Fazer com ul li me parece mais coerente e portanto semântico do que separar tudo em divs e spans.....

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[Andreh Moura 0]

Se valer minha opinião, também concordo com a utilização de listas.

Vejo um formulário como uma lista de campos. Sempre utilizei e nunca tive problema entre os navegadores.

 

;)

[Giovani 104]

Semanticamente falando pode-se usar table então, alguns formulários não passam de dados tabulares :D

Essa questão de formulários é meio complicada mas interessante de discutir, pois parece que cada um dá o seu jeitinho pro problema.

 

Já vi soluções como a do André, com div's, como a do _Leandro_ com listas e assim vai!