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

10 Replies to “Projetando formulários tableless”

  1. 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

    😉

  2. 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?

  3. 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.

  4. @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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *