Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Formulários na web: Experiência rica
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.screencaster.com.br/wp-content/uploads/design.png&key=a2574924adbe5b7d28815d298ae94b79620ca871e07debe70033e1ac7da560e2" alt="Imagem Postada" />
Veja aqui um exemplo dele funcionando. 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;
}* {
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;
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 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;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;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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.screencaster.com.br/wp-content/uploads/input_medio.png&key=62f1784d190b1199a6b7403a11bdaff660f44fefb1f8ea56d2fd0cb7b1472b33" alt="Imagem Postada" />
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, deixaremos o 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();
});
})Por hoje é só pessoal! Espero que possam ter aprendido sobre formulários com este nosso tutorial. Estou disponibilizando um zip no meu blog 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!
Carregando comentários...