Projetando formulários tableless
Tue 11 Sep 2007
-
Categorias
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):
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
Bio
Meu nome é Alexandre Magno, sou analista de sistemas e trabalho atualmente na Globo.com, com especialidade na construção de interfaces Web para os diversos produtos das Organizações Globo. Tenho experiência em várias tecnologias Web, dentre elas HTML/CSS/Javascript, Wordpress e Ruby on Rails, além de ser um evangelista jQuery.
Comentários
Alexandre vc esqueceu da tag fieldset para formulários ela é muito importante pois agrupa determinados dados dos formulários como dados pessoais, endereço etc.
outra coisa q eu notei foi q vc fecha a tag label logo após o nome, eu prefiro fechar depois do input pq ele entende atraves do for para qual name ele ta englobando ex:
c tiver dois radios ele trava a seleção dele isso é muito útil
Sexo:
Masculino
Feminino
Aê Daniel, esse é do livro do O’reilly, mas você tem plena razão… vou fazer um post mais atual, por que esse eu apenas traduzi, valeu!!!
Daniel, o uso dos elementos dentro do elemento LABEL só é necessário se você não declarar explícitamente o elemento a que o LABEL se refere. Se você utilizar o atributo FOR do LABEL, o elemento referido deve estar fora do LABEL.
Alexandre, não faltou o elemento BR?
Bem, ao aplicar display block no label, ele dispensa o br, pois o label passa a comportar como um elemento de bloco…
E justamente só é possível fazer as quebras de linha e este alinhamento se o label for usado somente para marcar o texto e não os elementos de formulário…
Me parece que o width em label no IE não funciona, já tentei um tempo atrás, e não tinha dado certo
@candido: Ele não funciona por padrão por que é um elemento inline, tente colocar display:block para ele aceitar dimensões. Espero que ajude, abraços.
Moçada, eu gostaria de saber de vocês como faço um formulário com tableless, mas é dos grandes. No formulário atual, usando table eu tenho 4 colunas para poder exibir os dados, isso porque se eu colocar cada campo em uma linha fica gigante a rolagem. Alguém ai já criou formulários com tantos campos? Geralmente os formulários que usao são para entrada de dados em sistemas. Estou padronizando agora e aplicando as técnicas mais atuais.
ola…
como ficaria se que quisesse alguns campos na mesma linha?
@rodolfo: Para campos na mesma linha você teria que criar uma div que funcionaria como uma linha que iria abranger todo o conteúdo que fosse permanecer na mesma linha. Em termos de usabilidade, campos em mesma linha só quando for realmente necessário. Abraços e boa sorte.