Txto e descrição...
Fico até meio assim de afirmar que é um formulário semântico, mas vi no Tableless.com esse exemplo então fica sendo, hehe.
Código CSS:
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; } select{ border: 1px solid #333; font-size: 13px; margin-bottom: 10px; color: #0E0659; } label { width: 38%; float: left; color: #000; text-align: right; padding-right: 20px; font-weight: bold; }
Trecho HTML do formulário:
<form id="form1" method="post" action=""> <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</label> <input type="password" name="senha" id="senha" size="15" maxlength="12" /> </form>Pois bem, é um típico formulário de login, mas não vou usá-lo dessa maneira. Apenas copiei o exemplo para estudar o CSS, usar o <label> que nunca usei e montar um esqurma "esquerdo-direito" sem recorrer ao amontoamento de DIV's.
Entretanto parece ser muito eficiente, mas como minha aplicação não será essa (login) eu preciso atribuir uma linha de descrição logo abaixo do <label>. Algo como, pode-se ver no fórum mesmo, por exemplo, num novo post, o texto descritivo "Opcional", logo abaixo de Ícone do Post.
Mas qualquer coisa que tento, desalinha o <label> seguinte.
Como proceder?
[]'s
Discussão (6)
Carregando comentários...