Tableless: Formulário sem tabela
Por
Giuliano Rodrigues de Souza em 1 de setembro de 2009
Mostrarei como desenvolver um formulário sem a utilização de tabelas. O form é desenvolvido com CSS usando a tag <label>. O resultado do form será:

O código HTML
<label for="user">Nome</label> <input name="user" type="text" /> <br /> <label for="emailaddress">Email:</label> <input name="emailaddress" type="text" /> <br /> <label for="comments">Mensagem:</label> <textarea name="comments"></textarea> <br /> <label for="terms">Termos?</label> <input class="boxes" name="terms" type="checkbox" /> <br /> <input id="submitbutton" name="submitbutton" type="submit" value="Enviar" />
O código CSS:
<!-- label{ float: left; width: 120px; font-weight: bold; } input, textarea{ width: 180px; margin-bottom: 5px; } textarea{ width: 250px; height: 150px; } .boxes{ width: 1em; } #submitbutton{ margin-left: 120px; margin-top: 5px; width: 90px; } br{ clear: left; } -->
A mágica de tudo é o float:left no label, que com seus 120px de largura faz com que sobre espaço lateral para os campos ficarem ao lado.
Veja também
- Curso de Introdução ao CSS em 10 vídeo-aulas
- Melhorando a tipografia de interfaces web com o Google Font Directory
- Variantes do efeito Lightbox para imagens, videos, HTML e sites externos.
Tags:CSS, formulário, html, Tableless

Comentários
Nenhum comentário ainda.