Webpoint

Problema

Você quer incluir campos de formulários e nomes nas linhas sem usar tabela HTML, com isso assegurando um puro layout CSS usando somente as marcações de formulário

Solução

Primeiro use rótulos em conjunção com campos de formulários na marcação (veja Figura 5-10):

 
<form action="login.php" method="post">
<label for="uname">Username</label>
<input name="uname" id="uname" type="text" />
<label for="pname">Password</label>
<input name="uname" id="uname" type="text" />
 
<label for="pname">Remember you?</label>
<input name="recall" id="recall" type="checkbox"
class="checkbox"  />
<input name="Submit" value="Submit" type="submit"
class="buttonSubmit" />
</form>
 

Figura 5-10. O formulário sem estilo aplicado:

Então escolha as propriedades display e label para block, flutue os elementos do rótulo para a esquerda, e justifique o texto à direita (veja Figura 5-11):

input {display: block;width: 175px;
 
float: left;
 
margin-bottom: 10px;
 
}
 
label {
 
display: block;
 
text-align: right;
 
float: left;
 
width: 75px;
 
padding-right: 20px;
 
}
 
.checkbox {
 
width: 1em;
 
}
 
br {
 
clear: left;
 
}
 
.buttonSubmit {
 
width: 75px;
 
margin-left: 95px;
 
}

Figura 5-11. O design do formulário organizado com estilo

Discussão

Os elementos input e label foram escolhidos para display:block, que os exibe como elementos block-level. Isto torna possível escolher a largura para o texto no rótulo. Ao invés de permanecer no topo do elemento de entrada, os rótulos são deslocados (ou flutuados) para a esquerda. E pelo fato de todos os rótulos terem a mesma largura, a aparência é uniforme através do formulário.

A tab br cria uma quebra de linha entre os elementos label e form escolhidos, e limpa o deslocamento do elemento anterior. Isto previne outros elementos (aqueles que aparecem depois do campo de entrada combinado com o nome) de deslocar também.

Veja também

As especificações HTML 4.1 para o elemento label em http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL; As especificações CSS 2.1 para a propriedade float em http://www.w3.org/TR/CSS21/visuren.html#propdef-float; As especificações CSS 2.1 para a propriedade clear em http://www.w3.org/TR/CSS21/visuren.html#propdef-clear.

Fonte: CSS Cookbook