Trabalhando com Formulários e CSS

Na ArqHP rolou alguns e-mails perguntando sobre como criar formulários usando CSS. Depois de vários outros e-mail de elucidação, pediram para quem já tivesse feito algo do gênero que publicasse o mesmo. Pois bem, aqui está!

Confesso que não sei se este método que eu uso é 100% correto, mas ele derivou de vários outros forms que andei pesquisando. Uso esse método há um tempo e nunca tive problemas, renderiza corretamente em vários browsers e valida no validator do W3C em XHTML 1.0 Strict.

Fiquem à vontade para copiar o código abaixo, utilizar e modificar do jeito que quiserem. Se alguém tiver alguma sugestão, dica, melhoria, comentário ou seja lá o que for... entre em contato: gustavocardoso [em] gmail.com

UPDATE 1: Criei um hack no CSS, pois se eu não colocasse um margin-bottom pra tag LEGEND ela ficava grudada com o primeiro label, no Internet Explorer. Por isso tive que acrescentar um margin-bottom de 15px nessa tag e fiz o hack para zerar o valor da margin-bottom nos demais browsers, que renderizaram tudo normalmente. Pode ter jeito melhor de resolver isso, se alguém tiver sugestões é só escrever!

UPDATE 2: Aproveitei essa brincadeira pra fazer uns testes com CSS Media Types. Dei uma mexida e além do css media screen, fiz o css media handheld (testado aqui com meu emulador de Pocket PC 2003 funcionou) e estou mexendo agora no css media print. Nunca tinha mexido com os Media Types antes e to achando muito divertido tudo isso.

UPDATE 2.1: Percebi agora, pelo menos no CSS Media Type handheld, que ele não chega a substituir por inteiro o css, ao que me parece ele dá uma mesclada com o css media type screen. Tive alguns conflitos, mas como disse to começando e ver isso agora, nada que uma estudada mais a fundo não me ajude a resolver isso.

Código do Formulário:

    
    <div id="login">
                    
        <form id="logincad" method="post" action="">
        
            <fieldset>
            
            <legend>Login</legend>
            
            <label for="nome">Nome</label>
            <input type="text" name="nome" id="nome" size="40" />
            
            <br />
            
            <label for="cidade">Cidade</label>
            <input type="text" name="cidade" id="cidade" size="25" />
            
            <br />
            
            <label for="estado">Estado</label>
            <select name="estado" id="estado">
                <option selected="selected">Selecione</option>
                <option value="AC">AC</option>
                <option value="AL">AL</option>
                <option value="AP">AP</option>
                <option value="AM">AM</option>
                <option value="BA">BA</option>
                <option value="CE">CE</option>
                <option value="DF">DF</option>
                <option value="ES">ES</option>
                <option value="GO">GO</option>
                <option value="MA">MA</option>
                <option value="MT">MT</option>
                <option value="MS">MS</option>
                <option value="MG">MG</option>
                <option value="PA">PA</option>
                <option value="PB">PB</option>
                <option value="PR">PR</option>
                <option value="PE">PE</option>
                <option value="PI">PI</option>
                <option value="RJ">RJ</option>
                <option value="RN">RN</option>
                <option value="RO">RO</option>
                <option value="RR">RR</option>
                <option value="RS">RS</option>
                <option value="SC">SC</option>
                <option value="SP">SP</option>
                <option value="SE">SE</option>
                <option value="TO">TO</option>                
            </select>                
            
            <br />
            
            <label for="email">E-mail</label>
            <input type="text" name="email" id="email" size="40" />
            
            <br />
            
            <label for="senha">Senha <span>(12 caracteres)</span></label>
            <input type="password" name="senha" id="senha" size="15" maxlength="12" />
            
            <br />
            
            <input type="submit" name="cadastrar" id="cadastrar" value="Enviar" />
            
            </fieldset>
            
        </form>
            
    </div>
    
    

Código CSS:

    
        #login form{
	        font-size: 10pt;
        }
        
        #login fieldset{
	        padding: 20px;
	        border: 1px solid #ccc;
            width: 70%;
        }
        
        #login legend{
	        font-weight: bold;
	        color: #c03;
	        font-size: 11pt;
	        letter-spacing: 1px;
        }
        
        
        /* HACK PARA CORRIGIR O MARGIN-BOTTOM*/
        html>body #login legend{
        	margin-bottom: 0px;
        }
        
        #login input{
	        border-top: 1px solid #333;
	        border-left: 1px solid #333;
	        border-bottom: 1px solid #ccc;
	        border-right: 1px solid #ccc;
	        font-size: 13px;
	        margin-bottom: 10px;
	        color: #0E0659;
        }
        
        #login select{
	        border: 1px solid #333;
	        font-size: 13px;
	        margin-bottom: 10px;
	        color: #0E0659;
        }
        
        #login label{
	        display: block;
	        width: 140px;
	        float: left;
	        color: #000;
	        border-bottom: 1px solid #f1f1f1;
        }
        
        #login span{
	        color: #999;
	        font-size: 12px;
        }
        
        #login .botao{
	        font-size: 13px;
	        background: #f1f1f1;
	        margin: 15px 0px 0px 0px;
        }
    

O Resultado:

Dois Criação

GVisit