29 de maio de 2007
10Formulários sem tabelas
Se você é um cara antenado, já deve saber que não é correto utilizar tabelas para layouts de páginas HTML. Tabelas devem ser usadas apenas para seu propósito original: tabulação de dados. Para todo o restante, como alinhamento de textos, imagens e qualquer outro elemento em uma página, existem as folhas de estilo.
Aprenda a montar corretamente um formulário web utilizando CSS, evitando o uso de tabelas para o alinhamento de textos e campos.
Vamos começar falando de tags HTML esquecidas na grande maioria dos formulários encontrados na web, são elas: fieldset, legend e label. Observe o form abaixo:
| Login: | |
| Usuário: | |
| Senha: | |
<form>
<table>
<tr>
<td colspan="2">Login:</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td>Usuário:</td>
<td><input type="text" name="usuario"/></td>
</tr>
<tr>
<td>Senha:</td>
<td><input type="password" name="senha"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="enviar"/></td>
</tr>
</table>
</form>
Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms, eliminando o uso da tabela:
<form> <fieldset> <legend>Login:</legend> <label for="usuario">Usuário:</label> <input type="text" name="usuario" id="usuario"/><br /> <label for="senha">Senha:</label> <input type="password" id="senha" name="senha"/><br /> </fieldset> <input type="submit" value="enviar"/> </form>
A tag label vem acompanhada do parâmetro “for” (para) contendo o “id” do campo a que se refere (precisa ser o “id” e não o “name”). Note que alguns tipos de input já vem com uma label embutida, como os botões. Neste caso você declara a label no parâmetro value, diretamente na tag.
Fieldset indica um grupo de campos associados a um mesmo tema. No nosse exemplo, o fieldset login possui os campos usuário e senha. Finalizando, legend está para fieldset como label está para input, ou seja, é um rótulo do conjunto de campos.
O código ficou bem mais simples, mas ainda falta alinhar o texto com os campos, como no formulário com tabelas. Nada que um pouco de CSS não resolva:
label, input {
display: block;
float: left;
}
label {
text-align: right;
width: 35px;
padding-right: 20px;
padding-bottom: 10px;
}
fieldset {
border: solid 1px #000;
}
br {
clear: left;
}
Observe as possibilidades de formatação com a utilização de CSS e das tags fieldset, legend e label. O formulário fica muito mais organizado e pode ter uma apresentação muito mais agradável, basta caprichar nas bordas e espaçamentos. Hora de conferir um pouco mais sobre algumas das propriedades CSS utilizadas neste exemplo:
display: block - Como o próprio nome sugere, exibe o elemento como um bloco, permitindo maior flexibilidade na hora de alinhá-lo com outros elementos na página.
float: left - A propriedade float move um elemento para a esquerda ou direita de seu elemento “pai”. Por exemplo, um elemento com a propriedade float:left é interpretado como um bloco e é sempre alinhado à esquerda (até encontrar um outro elemento com float ou clear). Caso você esteja iniciando agora na montagem de páginas com CSS, fique ligado nesta propriedade, pois ela será muito utilizada para criação de colunas, posicionamento de imagens etc.
clear: left - No nosso caso, a tag br com a propriedade clear: left impede com que elementos com float: left sejam alinhados à sua esquerda. Funciona, basicamente, como o início de uma nova linha no que se refere a elementos flutuantes.
Legal, não? Neste link você encontra alguns exemplos avançados de formulários CSS. Espero que tenham gostado e até a próxima!
10 leitores comentaram este artigo
29/03/2008
14:32
Diego Charles escreveu:
Muito bom, realmente, o código fica mais legivél, falta apenas comparar os tamanhos dos dois formulários (+ CSS) em casos de muitos campos, e o tempo de renderização, mas pelo menos em estrutura, ficou ótimno. Parabéns.
Responder
12/02/2010
09:42
Alexandre escreveu:
O internet explorer desanima projetas sites em tableless!!! Nada funciona direito nessa m$#@ de Internet Explorer.
Responder
12/07/2009
16:08
Fabio escreveu:
Excelente artigo.
Você também pode criar com extrutura de lista utilizando as tags e .
Responder
23/09/2009
15:14
Mayco Deivid escreveu:
Olá Davi!
Como vai essa força?
Tudo bem?
Aqui na Ilha de São Francisco do Sul - SC graças a Deus está tudo bem! :D
Mais uma vez me sinto na obrigação de parabenizá-lo pelo seu blog, pelos tópicos e por sua grande pré-disposição em ajudar e ao mesmo tempo em expor-se. Parabéns!
Gostei muito desse tópico também, eu já conhecia HTML, mas com certeza sempre há detalhes que deixa alguma questão em aberto.
Seguindo esta estrutura sugerida aqui por você, tenho uma duvida de como aplicar corretamente a tag "label" aos "input type='radio'".
Nesse caso eles tem o mesmo atributo "name" e "id", entretanto cada um tem um "label" diferente.
Gostaría de saber também se é indiferente a tag "label" ser apresentada antes ou depois da tag "input".
Segue o código abaixo referente a estas dúvidas e desde agora agradeço por sua atenção e prestimosidade.
Categorias
Criar
Editar
Excluir
Nome para nova categoria:
Responder
23/09/2009
15:43
Mayco Deivid escreveu:
Aproveitando a oportunidade e talvez abusando um pouco de sua cordialidade, tenho mais uma dúvida.
Quando utilizamos tags como "input", "br", "hr", ... tags que não tem tag de fechamento.
Por exemplo a tab "br" em nosso código ficaría: sinal de menor "br" "espaço" "barra" e sinal de maior. Está correto?
Deve haver o "espaço" entre "br" e a "barra"?
Qual a maneira mais elegante para proceder nesses cassos?
Se quiseres organizar meus comentários sinta-se desde agora a vontade e me desculpe por qualquer inconveniente.
Responder
24/09/2009
08:09
Davi Ferreira escreveu:
Fala Mayco! Valeu o comentário! Foi mal o lance do código, mas a atualização do Wordpress deve ter feito alguma coisa... depois dou uma olhada.
Esse lance do espaço antes da barra no br não tem um padrão, usa como você preferir. Eu costumo deixar o espaço pra ficar mais legível.
Sobre o ID nos inputs do tipo radio: o name deve ser o mesmo, mas o ID nunca. ID tem que ser sempre único.
<label><input type="radio" name="categoria" id="categoria-1" value="1" /> Categoria 1</label>
<label><input type="radio" name="categoria" id="categoria-2" value="2" /> Categoria 2</label>
Como você pode ver tambem, outro jeito de solucionar isso, nesse caso nem precisa do ID, é envolvendo o input com a label.
Qualquer dúvida é só perguntar!
Responder
30/09/2009
17:16
Mayco Deivid escreveu:
Olá Davi!
Falando em CSS, formulários, ...
Gostaría de saber sobre a tag "input" do tipo "file".
Quando utilizamos esta tag em nossos formulários para fazer o upload de um arquivo, ela apresenta um "rótulo" padrão para o botão que é utilizado para localizar o arquivo na maquina do cliente...
Ex.: Procurar..., Arquivo..., e pior se o browser não for em português pode aparecer por exemplo em inglês Open file...
A questão é, tem como alterar esse "rótulo" padrão que aparece, seja através de CSS, alguma tag especial HTML ou mesmo de alguma outra maneira?
Agradeço desde agora por sua atenção.
Muito obrigado.
Responder
16/11/2009
11:00
marcelo escreveu:
não funciona no IE8
q acontece
Responder
01/12/2009
13:57
Alexandre Broggio escreveu:
Muito interessante o post vlw
Responder
18/02/2010
11:52
Perroni escreveu:
Olá formulário sem tabelas mas com um varias divs?
Assim ... Quase sempre coloco mais do que um campo por linha
E a cabo tendo de recorrer a uma folha de stilo pronta que tenho na firma ficando assim:
Acredito que esta não é a forma correta de se escrever um formulario por acaso você tem alguma dica de como escrever um formulario sem tabelas mas que não use divs em excesso?
Responder
Deixe seu comentário