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:
O código CSS:
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

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?
Autor da matéria
Últimas matérias escritas pelo autor:
|
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. |
Últimas matérias escritas pelo autor:
30/08 - Dicas de segurança para smartphones co...
27/08 - Eleições: redes sociais dão mostras de...
23/08 - 5 dicas para aumentar a proteção no e-...
12/08 - Web Analytics - Só números não bastam
09/08 - Google Android OS
09/08 - Business Intelligence: é estratégia ou...
06/08 - Os desafios de recursos humanos nas em...
05/08 - Neutralidade da rede o que é?
02/08 - Nota Fiscal Eletrônica: cumpra a lei e...
29/07 - Saiba como ter segurança na internet d...
26/07 - Cloud Computing redesenha modelo de ne...
26/07 - O sucesso depende de manter foco?
07/07 - Usabilidade de interfaces para EAD
07/07 - Dicas para deixar o Firefox mais rápid...
27/08 - Eleições: redes sociais dão mostras de...
23/08 - 5 dicas para aumentar a proteção no e-...
12/08 - Web Analytics - Só números não bastam
09/08 - Google Android OS
09/08 - Business Intelligence: é estratégia ou...
06/08 - Os desafios de recursos humanos nas em...
05/08 - Neutralidade da rede o que é?
02/08 - Nota Fiscal Eletrônica: cumpra a lei e...
29/07 - Saiba como ter segurança na internet d...
26/07 - Cloud Computing redesenha modelo de ne...
26/07 - O sucesso depende de manter foco?
07/07 - Usabilidade de interfaces para EAD
07/07 - Dicas para deixar o Firefox mais rápid...
Matérias relacionadas
Últimas matérias
Últimas notícias







CSS - Aprenda como criar estilos
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao Linux