Tableless
Tableless: Formulário sem tabela
Publicado em: 01/09/2008 |
Tableless |
Visualizações: 1.471 |
0 Comentário(s)
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
Tipos de Sistemas de Informação na empresa Formulário flash + php Formulário de envio de Email - Dreamweaver + PHP Validação de Formulário em Javascript Colocando um formulário de contato em seu site, usando o mail() do php
Redação Oficina da Net
A Redação do Oficina da Net é composta por todos os integrantes da equipe do portal. Estamos abertos.
» Site do colunista
Todas as matérias de Redação Oficina da Net
- Identidade Visual: O que não fazer na criação de um logotipo
Nesse artigo nós veremos o que não deve ser feito na hora de criar um logotipo, . - Conceito Básico Sobre a Matemática
Programadores e desenvolvedores, agora já os internautas. Eu não sei o que dizer. - Miniaturas de Sites com Websnapr
Nesse artigo veremos como criar miniaturas de sites usando apenas um link, ao in. - Palestras, o que aproveitar delas?
Ir a palestras ou assisti-las em seu computador ou qualquer outro dispositivo o . - Curso de Visual Basic - Aula 6 - Criando um visualizador de imagens
Nesta sexta vídeo aula, iremos aprender como criar um visualizador de imagens co.
- O que é Tableless?
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para d. - O uso da div
Usando div sensatamente! - Validação de Código
Validar seu código (X)HTML na W3C. - Criando Menu Vertical em Tableless
Aprenda a criar menus com o uso de listas - 3 MOTIVOS PARA DEIXAR O SEU SITE ACESSÍVEL
As vantagens de possuir um site nas recomendações da W3C
Seja o primeiro a comentar!