Projetando formulários tableless

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:

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

O 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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>