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á:

tableless_form

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

Tags:, , ,

Categorias : CSS, Tableless, html

Comentários

Nenhum comentário ainda.


Deixe um comentário

(obrigatório)

(obrigatório)