Tableless: Formulário sem tabela

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 01/09/2008
Área: Tableless
Visualizações: 4.919
Comentário(s): 1

imprimir envie por e-mail compartilhe
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



imprimir envie por e-mail Clique aqui e comente compartilhe   RSS twitter
veja mais
03/07/2009Informática com olhar sistêmico
27/06/2009Os Movimentos Sociais da Era da Informação
25/06/2009A era da informação e os movimentos sociais
23/06/2009Curso Básico de C# - Parte 12 - TextBox
23/06/2009A era da Informação
22/06/2009Enviando um e-mail pelo site com resposta automática e arquivo an.
21/06/2009Qualidade: A kind of magic
18/06/2009Plataforma de Gerenciamento de EAD - Parte 02 - Os Recursos da Pl.
comentários
Preencha o formulário para comentar:
Fechar [x] Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Felipe (hennet)  - Publicado em: 20/05/2009 - 00:53

É sempre uma boa saída, ainda estou iniciando no Tableless e toda vez que vejo algo que acho que fica fácil na tabela como um simples formulário procuro ir por meio de Tableless mesmo :D

Nice post!

 

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 solicita.

Todas as matérias de Redação Oficina da Net

Tags
» form
» css
Seguir o Oficina da Net
RSS

RSS

RSS
Matérias relacionadas

© 2005 - 2009 - Oficina da Net - v 4.5 - O material aqui exposto está licenciado pela Creative Commons, e pode ser utilizado mediante citação de fonte. Resolução adequada: 1024x768px.
Desenvolvido por: Desenvolve Web - Desenvolvimento de blogs, intranets, sites e portais


Links que apoiamos: Ache Concursos  |  Concursos 2009  |  Concursos Bahia  |  Hospedagem  |  Hospedagem de sites  |  Ícones