Tableless: Formulário sem tabela

Está matéria mostra como desenvolver um formulário sem a utilização de tabelas. O form é desenvolvido com CSS usando a tag label

Publicado em: 1 de setembro de 2008  |  Leituras: 12.904  |  Canal: CSS  |  Autor: Redação Oficina da Net
Está matéria mostra 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:
<form>

<label for="user">Nome</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Mensagem:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Termos?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>



O código CSS:
<style type="text/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;
}
</style>


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. Qualquer dúvida comente abaixo, ou acesse www.ajudaweb.com

Resposta em até 24 horas! (grátis)Dúvidas?

Compartilhe
Share orkut
delicious
Gostei

Nossa url encurtada:
Autor da matéria
Redação Oficina da Net

A Redação do Oficina da Net é composta por todos os integrantes da equipe do portal. Estamos abertos a indicações de matérias, entre em contato conosco solicitando sua dúvida, ou acesse nosso fórum.