Como criar formulários HTML sem usar tabelas (tableless)
Veja nesse artigo como criar lindos formulários html sem o uso de tabelas (tableless), usando apenas CSS para estilizar e formatar.
As CSS (folhas de estilo em cascata) tem transformado a maneira com que os websites são projetados já há algum tempo. Elas te ajudam a elevar o nível de seu projeto com formas boas e atraentes.
Nesse artigo iremos ver algumas formas diferentes de se criar lindos formulários utilizando CSS.
Como criar lindos formulários sem usar tabelas
Nesse exemplo veremos como criar um ótimo formulário usando um código limpo de CSS apenas com tags label e input, parecido com a que usávamos na época das tabelas, mas sem utilizá-las agora.
Você pode usar todos os elementos de CSS/HTML para criar o formulário personalizado para seus projetos web.
Vamos à parte prática da brincadeira. Em primeiro lugar iremos precisar criar o HTML do formulário, precisamos criar uma estrutura básica que será nosso formulário final.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Estilizando formulários com CSS - DevMedia</title>
</head>
<body>
<form name="meuForm" method="post" id="formulario">
<div class="box">
<h1>Formulario de Contato :</h1>
<label>
<span>Nome Completo</span>
<input type="text" class="input_text" name="nome" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Assunto</span>
<input type="text" class="input_text" name="assunto" id="subject"/>
</label>
<label>
<span>Mensagem</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Enviar" />
</label>
</div>
</form>
</body>
</html>
Listagem 1. Estrutura HTML
Com nossa estrutura criada podemos ver o quão feio está sem estilização nenhuma. Quando começarmos a aplicar o efeito CSS esse cenário será completamente diferente, iremos poder deixar o formulário da maneira que quisermos, vai depender da necessidade de cada projeto.
Vamos aplicar o código CSS ao nosso formulário e veremos como ficará o resultado final do formulário.
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}Listagem 2. Código CSS
Agora nosso formulário está com uma aparência infinitamente melhor, não está? Olhando para a Figura 2 podemos ver a mágica que a CSS pode fazer em nossos projetos.
Como vemos na Listagem 3, podemos alterar o CSS de acordo com a nossa necessidade e gosto, abaixo vemos uma outra estilização e variação de cores do mesmo formulário.
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#ccc;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
div.box {
margin:0 auto;
width:500px;
background:#176ca6;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#176ca6;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button{
margin:0 0 10px 0;
padding:4px 7px;
background:#660000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}Listagem 3. Outra estilização CSS
Agora nosso formulário está sendo exibido como mostra a Figura 3, com cores diferentes e um fundo mais claro.
Conclusão
Como vimos nesse artigo, é possível criar uma infinita variedade de cores e estilizações em formulários com CSS, o leitor pode ficar à vontade para testar variações de acordo com a necessidade do seu projeto.
Qualquer dúvida pode ficar à vontade para usar os comentários no final desse artigo que irei tentar ajuda-los em suas dúvidas.
Saiba mais: Introdução ao framewok CSS 960 Grid
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo