Os formulários na web são de extrema importância, pois é principalmente através deles que nossos usuários interagem com os websites ou sistemas. Portanto, um formulário deve combinar um visual agradável e intuitivo com uma boa usabilidade e acessibilidade. Pretendo demonstrar aqui um exemplo de formulário simples que seja bem construído levando em conta estes pontos-chave citados.
Eis aqui o formulário que iremos montar:
Também tem um exemplo dele funcionando aqui. Como podem ver, trata-se de um formulário muito simples, mas que pode nos servir de exemplo neste tutorial. Antes de começarmos, aqui vão algumas dicas que podem ser interessantes para quando você for montar um formulário:
1 - Mantenha-o com o menor número de campos possível
Não existe nada pior do que se deparar com um formulário gigante com inúmeros campos a serem preenchidos. Muitos usuários desistem de preencher um formulário muito grande. Para evitar isto você pode unir campos, por exemplo, em vez de colocar um campo para nome e outro pra sobrenome, una estes dois campos em um só e deixe expresso “Nome Completo”. Caso mesmo após resumido o formulário ainda pareça grande de mais, experimente dividí-lo em mais de uma página, isto pode ajudar.
2 - Peça para seu designer não exagerar nos efeitos visuais
Infelizmente os browsers ainda não têm uma boa flexibilidade quando a questão é personalização de campos de formulário. Inputs do tipo text/textarea e buttons podem ser bastante personalizados, mas alguns outros como selects e checkboxes exigem muitas “gambiarras” para uma simples personalização. O designer deve sempre estar ciente de tais limitações antes de montar o layout do formulário.
3 - KISS
Não, não é para beijar ninguém, nem ouvir as músicas da banda enquanto desenvolve. Keep It Simple, Stupid! Esta é uma dica tão simples quanto o que ela propõe: quanto mais simples for o formulário, seu design, sua usabilidade, melhor.
Let’s get It started!
Antes que alguém pergunte, eu utilizei para este formulário o Adobe Fireworks para criação do design, TextMate para edição dos códigos e o framework jQuery na parte de javascript.
Vamos começar nosso formulário pelo HTML. Aqui vai o código HTML para se fazer o formulário, e em seguida sua explicação:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>Formulário Simples - www.screencaster.com.br</title>
<link rel=”stylesheet” href=”css/screen.css” type=”text/css” media=”screen”>
</head>
<body id=”form”><form id=”formulario” action=”" method=”post”>
<fieldset>
<h2>Informe seus dados abaixo</h2><label for=”nome” class=”i_normal”>
<span>Nome</span>
<input type=”text” name=”nome” value=”" id=”nome”>
</label><label for=”email” class=”i_grande”>
<span>E-mail</span>
<input type=”text” name=”email” value=”" id=”email”>
</label><label for=”website” class=”i_grande”>
<span>Website</span>
<input type=”text” name=”website” value=”" id=”website”>
</label><label for=”telefone” class=”i_medio”>
<span>Telefone</span>
<input type=”text” name=”telefone” value=”" id=”telefone”>
</label><label for=”uf” class=”i_mini”>
<span>UF</span>
<input type=”text” name=”uf” value=”" id=”uf”>
</label><button type=”submit”>Enviar<span></span></button>
</fieldset>
</form></body>
</html>
E precisa explicar alguma coisa? A marcação do formulário é extremamente simples. Talvez alguns de vocês possam estranhar a tag “button”. Pois é, trata-se de uma tag específica para fazer, errr… botões. Funciona semelhante ao input type=”submit”, mas não envia valores como campo de formulário, e podemos inserir qualquer elemento html inline dentro dela. Notem aquele span alí dentro; ele vai ser útil para criar um efeito com javascript depois, apenas deixem ele alí por enquanto. Estas classes que coloquei nos labels servem para identificar qual será o tamanho do campo dentro deles, pois, como podem ver no design, os campos têm tamanhos diferentes.
Agora vamos ao CSS, que tem alguns truques interessantes:
* {
margin:0;
padding:0;
list-style:none;
}form fieldset {
border:none;
background-color:#eee;
width:698px;
height:240px;
}form fieldset h2 {
text-indent:-9000em;
overflow:hidden;
display:block;
background:url(imagens/header.png) no-repeat;
width:698px;
height:60px;
}form fieldset label {
display:table;
width:100%;
}form fieldset label span {
float:left;
text-align:right;
width:80px;
font:14px ‘Trebuchet MS’, Arial, Helvetica, sans-serif;
}form fieldset label input {
float:left;
height:28px;
border:none;
padding:8px 22px 0 17px;
margin:-5px 0 0 0;
}form fieldset label.i_normal input {
width:305px;
background:url(imagens/input_normal.png) no-repeat 0 4px;
}form fieldset label.i_medio input {
width:280px;
background:url(imagens/input_medio.png) no-repeat 0 4px;
}form fieldset label.i_grande input {
width:450px;
background:url(imagens/input_grande.png) no-repeat 0 4px;
}form fieldset label.i_mini input {
width:100px;
background:url(imagens/input_mini.png) no-repeat 0 4px;
}form fieldset label input:focus {
background-position:0 -36px;
}form fieldset button {
width:67px;
height:25px;
background:url(imagens/botao.png) no-repeat 0 0;
border:none;
text-indent:-9000em;
overflow:hidden;
cursor:pointer;
float:right;
margin:-33px 165px 0 0;
position:relative;
}form fieldset button span {
width:67px;
height:25px;
background:url(imagens/botao_bright.png) no-repeat 0 0;
position:absolute;
top:-7px;
left:-3px;
display:block;
display:none;
}
Vamos rever cada parte do código para que eu possa explicar mais facilmente:
* {
margin:0;
padding:0;
list-style:none;
}
Aqui não tem muito segredo, apenas estamos zerando algumas propriedades padrão dos elementos, para que não nos atrapalhem. Aquele list-style alí nem seria necessário no nosso exemplo, mas também não vai atrapalhar em nada.
form fieldset {
border:none;
background-color:#eee;
width:698px;
height:240px;
}
Aqui estamos formatando o fieldset que colocamos dentro do form. O elemento fieldset é utilizado para agrupar campos de um formulário. Estas propriedades eu poderia ter definido no próprio form, mas como nosso form tem apenas um fieldset preferi colocar no fieldset mesmo.
form fieldset h2 {
text-indent:-9000em;
overflow:hidden;
background:url(imagens/header.png) no-repeat;
width:698px;
height:60px;
}
Aqui formatamos aquele título do formulário. Tive de utilizar um h2 em vez da tag legend porque a tag legend tem algumas limitações. As duas primeiras linhas servem para esconder o texto que está no elemento. Em seguida, definimos o background e a largura/altura do elemento que são as mesmas da imagem.
form fieldset label {
display:table;
width:100%;
}
Aqui estamos personalizando nosso label. O label precisa ter display:table porque ele conterá elementos com float. Desta forma, ele se expande para conter os elementos com float. A largura de 100% é para garantir que o label ocupará toda a extensão do fieldset.
form fieldset label span {
float:left;
text-align:right;
width:80px;
font:14px ‘Trebuchet MS’, Arial, Helvetica, sans-serif;
}form fieldset label input {
float:left;
height:28px;
border:none;
padding:8px 22px 0 17px;
margin:-5px 0 0 0;
}
Primeiro, formatamos o texto do span. Também mandamos ele flutuar à esquerda, definimos uma largura e mandamos o texto alinhar à direita, para dar aquela impressão de que o formulário é “ajeitadinho”. O input também flutua à esquerda, com uma altura de 28px. Tiramos a borda pois na imagem que usaremos de fundo a borda já está inclusa. Aqui vale uma observação: os valores de margin/padding não são definidos, eu tive que experimentar e ir tentando até acertar os valores certos. Muitas vezes as pessoas me perguntam “de onde você tirou estes números?”, na verdade às vezes é necessário ir tentando “no chute” até acertar. Também vale lembrar que valores negativos são perfeitamente válidos no CSS, não é gambiarra não.
form fieldset label.i_normal input {
width:305px;
background:url(imagens/input_normal.png) no-repeat 0 4px;
}form fieldset label.i_medio input {
width:280px;
background:url(imagens/input_medio.png) no-repeat 0 4px;
}form fieldset label.i_grande input {
width:450px;
background:url(imagens/input_grande.png) no-repeat 0 4px;
}form fieldset label.i_mini input {
width:100px;
background:url(imagens/input_mini.png) no-repeat 0 4px;
}
Aqui definimos a imagem de fundo dos inputs, de acordo com seus tamanhos, bem como suas larguras. Notem que foram fatiadas 4 imagens diferentes: input_normal, input_medio, input_grande e input_mini.
form fieldset button {
width:67px;
height:25px;
background:url(imagens/botao.png) no-repeat 0 0;
border:none;
cursor:pointer;
float:right;
margin:-33px 165px 0 0;
}
O button aqui não tem muito segredo, basta colocar a imagem de fundo e definir os tamanhos.
form fieldset button span {
width:67px;
height:25px;
background:url(imagens/botao_bright.png) no-repeat 0 0;
display:block;
margin:-2px 0 0 -3px;
_margin:0;
}
No span, colocamos de fundo uma outra imagem que exportei, que contém o botão um pouco mais claro. Utilizaremos transparências no javascript depois para criar um efeito de “pisca” no botão. Tem um hackzinho alí, mas não é nada de outro mundo 
Agora vamos partir para o javascript, onde iremos solucionar algumas incompatibilidades do nosso formulário com o Internet Explorer (pra variar) e também criar o efeito do botão.
Primeiramente, observe este trecho de código, que deve ser acrescentado ao CSS:
input:focus, input.focado {
background-position:0 -36px!important;
}
Aqui deslocamos o background para mostrar aquele input com o glow ao redor. Para que você entenda melhor, olhe a imagem input_(qualquercoisa).png:
Perceba que a imagem contém o input nos seus dois estados. Quando o usuário foca no input, “puxamos” a imagem para cima para aparecer o glow. Esta técnica é chamada de CSS Sprite. No entanto, nosso querido IE não aceita a pseudo-classe focus, então temos que utilizar javascript para tal.
Irei utilizar a biblioteca jQuery para facilitar nosso javascript. Vamos criar um arquivo js também para colocar nosso código, e acrescentar os dois no head do documento html:
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/form.js” type=”text/javascript”></script>
Agora vamos editar nosso script form.js:
$(function(){
$(”form input”).focus(function(){
$(this).addClass(”focado”);
});
$(”form input”).blur(function(){
$(this).removeClass(”focado”);
});
})
Não vou me aprofundar na explicação do javascript porque este não é o foco do nosso tutorial. Apenas saiba que tudo o que estiver dentro de $(function(){….}) será executado quando o documento tiver sido carregado. Este trecho corrige o problema do focus.
Para animar nosso botão, podemos contar-lhe uma piada, elogiar suas belas qualidades de botão, ou deixar nosso js assim:
$(function(){
$(”form input”).focus(function(){
$(this).addClass(”focado”);
});
$(”form input”).blur(function(){
$(this).removeClass(”focado”);
});
blinkButton();
})
blinkButton = function() {
$(”form button span”).animate({’opacity’ : 1}, ’slow’, function(){
$(this).animate({’opacity’ : 0}, ’slow’, function(){
blinkButton();
});
})
}
A função blinkButton dá um efeito de fade no span que está no button, dando a impressão de que o botão está piscando. Note que, ao final da animação a função chama a si mesma, reiniciando a animação e criando uma espécie de loop infinito.
Por hoje é só pessoal! Espero que possam ter aprendido sobre formulários com este nosso tutorial. Estou disponibilizando um zip com todos os arquivos para que vocês possam baixar e revisar qualquer coisa que não tenham entendido. O exemplo foi testado apenas no Firefox 3 e Internet Explorer 6 (emulado). A animação do botão não funcionou aqui no meu IE6 emulado via Wine, mas acho que num PC deverá funcionar.
Até mais!
Postado em: 27/06/2008 @ 11:06 por Guilherme Rambo. Você pode comentar ou enviar um trackback para este post.
joao escreveu:
28/06/2008 @ 02:06:21Fiz vários formulários ultimamente e estou sempre lendo sobre como fazê-los, montar o html corretamente para facilitar na hora de estilizar com css. Seu tutorial entrou para minha lista.
Parabéns pelo tutorial!
Odeio a tag “legend”… ah se não fosse importante…
UsandoKATIERO escreveu:
29/06/2008 @ 03:06:17Muito bom, eu não gosto muito de formulários com vários campos, é desnecessário mesmo. O que acho inútil também é fazer formulários com os cantos arredondados, apesar de ser relativamente simples utilizando imagens, não é algo legal.
Ótimo post, parabéns, acredito que a parte dos formulários é a que acho mais “chata” digamos assim do html. Mas é html, e gosto de uma forma geral, então não tem geito.
UsandoRafael Ranzolin Pedroso escreveu:
14/08/2008 @ 09:08:47Cara gostei muito do tutorial, mas reparei que no IE o botão fica bugado(pelomenos no ie7), e os campos se eu escrevo muita coisa ele começa a desaparecer :O
mas ta muito bom o tuto vlw ;>
UsandoRicardo Cirio escreveu:
16/09/2008 @ 20:09:10Ótimo formulário, adorei, mas só tenho um dúvida:
gostaria de botar este formulário em um site,
mas como irei ver o que as pessoas escreveram nele?
Tem como tipo encaminhar os dados da pessoa pra uma pasta e depois eu vou no FTP e faço o download dessa pasta e acesso os arquivos? (só um exemplo)
Se houver como gostaria de saber, muito obrigado.
Usando