Como criar formulários HTML sem usar tabelas (tableless)

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (10)  (0)

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.

Listagem 1: Estrutura HTML

<!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>

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.

 Formulário sem estilização

Figura 1: Formulário sem estilização

Vamos aplicar o código CSS ao nosso formulário e veremos como ficará o resultado final do formulário.

Listagem 2: Código CSS

*{ 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;
}

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.

 Resultado final desse exemplo

Figura 2: Resultado final desse exemplo

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.

Listagem 3: Outra estilização CSS

*{ 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;
}

Agora nosso formulário está sendo exibido como mostra a Figura 3, com cores diferentes e um fundo mais claro.

Diferente estilização de formulário

Figura 3: Diferente estilização de formulário

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.

Espero que tenham gostando e até o próximo artigo.

Leia também

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?