Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guilherme Rambo

Formulários na web: Experiência Rica

Por , em Desenvolvimento frontend

Recommended Posts

Guilherme Rambo    4

Guilherme Rambo
Postado

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:

 

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

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:

 

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();
		});
	})
}
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 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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

a animação do botão apareceu aqui no meu IE6, porem ficou uma borda amarela em volta do campo de email e no FF2 o botão fica andando (de leve mas dá para perceber).

 

Fora isso ficou muito bonito, apesar de eu não gostar de Jquery.

Animação estilo Safari ficou muito boa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Animação estilo Safari ficou muito boa.

Estilo Mac ^^

 

Vou ver se consigo tempo pra corrigir estes probleminhas nos browsers.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Progress    2

Progress
Postado

Ótimo tópico #INSIDE#, realmente os formulários são muito importantes, e esses "efeitos/animações" neles o deixam com o visual melhor!!

 

Ainda de brinde vem uma baita explicação dessas :lol:

 

Valew, gostei! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

muito bom o matérial #INSIDE#, parabéns!

Compartilhar este post

Link para o post
Compartilhar em outros sites

nknk    3

nknk
Postado

label e fieldset são realmente importantes? pq eu praticamente nunca usei essas tags

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

label e fieldset são realmente importantes? pq eu praticamente nunca usei essas tags

Sim eles são sim, o LABEL se refere ao campo input, então se criarmos um input e quisermos um texto INDICATIVO devemos usar o label.

Se acaso não ouver TEXTO, apenas o INPUT devemos usar o INPUT como a propria indicação dentro do LABEL.

 

O fieldset é para dividir varios Inputs.

Tipo assim:

<fieldset>
<legend>Dados pessoais</legend>
<input name="nome" value="">
<input name="end" value="">
<input name="num" value="">
<input name="idade" value="">
</fieldset>

<fieldset>
<legend>Senha/ login</legend>
<input name="login" value="">
<input name="senha" value="">
</fieldset>

O <fieldset> ajuda muito com o CSS tambem com problemas que as TAGs input=RADIO e select podem causar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito