Davi Ferreira blog! » Formulários sem tabelas http://www.daviferreira.com/blog/2007/05/29/formularios-css.

html

Formulários sem tabelas

comentários (6)publicado por Davi Ferreira . 29/05/2007 . 17:31

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:

texto sem formatação imprimir ?

01. <form>
02. <table>
03. <tr>
04. <td colspan="2">Login:</td>
05. </tr>
06. <tr>
07. <td colspan="2"><hr /></td>
08. </tr>
09. <tr>
10. <td>Usuário:</td>
11. <td><input type="text" name="usuario"/></td>
12. </tr>
13. <tr>
14. <td>Senha:</td>
15. <td><input type="password" name="senha"/></td>
16. </tr>
17. <tr>
18. <td colspan="2"><input type="submit" value="enviar"/></td>
19. </tr>
20. </table>
21. </form>

Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms, eliminando o uso da
tabela:

Login:
Usuário:
Senha:

texto sem formatação imprimir ?

01. <form>
02. <fieldset>
03. <legend>Login:</legend>
04. <label for="usuario">Usuário:</label>

1 de 3 30/09/2009 00:03
Davi Ferreira blog! » Formulários sem tabelas http://www.daviferreira.com/blog/2007/05/29/formularios-css.html

04. <label for="usuario">Usuário:</label>

05. <input type="text" name="usuario" id="usuario"/><br />
06. <label for="senha">Senha:</label>
07. <input type="password" id="senha" name="senha"/><br />
08. </fieldset>
09. <input type="submit" value="enviar"/>
10. </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:

texto sem formatação imprimir ?

01. label, input {

02. display: block;
03. float: left;
04. }
05.
06. label {
07. text‐align: right;
08. width: 35px;
09. padding‐right: 20px;
10. padding‐bottom: 10px;
11. }
12.
13. fieldset {
14. border: solid 1px #000;
15. }
16.
17. br {
18. clear: left;
19. }

Login:
Usuário:
Senha:

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

2 de 3 30/09/2009 00:03
Davi Ferreira blog! » Formulários sem tabelas http://www.daviferreira.com/blog/2007/05/29/formularios-css.html

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!

3 de 3 30/09/2009 00:03