Estilizando formulários

helldanger1 · Mai 19, 2009

Este é um artigo que lhe servirá de guia para criar formulários totalmente acessíveis usando XHTML e folhas de estilo em cascata (css) para lhe dar formato.
Por Héctor A. Pinto F

Uma das perguntas mais freqüentes quando se fala de design sob CSS é como podem se estilizar os formulários já que em muitas ocasiões é a parte de um site que não fica de acordo com o estilo do resto dos elementos. Por isto, nesta minha primeira colaboração para CSS Boulevar decidi que seria boa idéia escrever a respeito.

Na verdade a estilização de formulários é mais simples do que parece, entretanto, necessitam-se de um par de truques para adquirir a aparência que queremos, a qual ainda está limitada por certas características que nem todos os navegadores atuais suportam.

Para começar, o primeiro que temos que fazer é fazer o desenho de como vamos querer que seja visto nosso formulário. Desde este ponto teremos que levar em conta muitas considerações que vermos mais adiante e que para este caso não foi levado em conta de propósito por se tratar de um exemplo no qual há que ressaltar estas limitações.

helldanger1 · Mai 19, 2009

A Marcação

O código (X)HTML deste exemplo não tem muito mistério, unicamente trata-se de um formulário com 4 campos, algo típico de um sistema de comentários, fica algo como o seguinte:

<form name="formulario" id="formulario" method="">
<label for="nombre">Nome:</label> <input type="text" id="nome" class="campo" />
<label for="email">E-mail:</label> <input type="text" id="email" class="campo" />
<label for="url">URL:</label> <input type="text" id="url" class="campo" />
<label for="comentario">Comentario:</label> <textarea id="comentario" class="campo"></textarea> <br />
<input type="submit" id="boton_enviar" name="enviar" value="Enviar" /> </form>

A única coisa que há que ressaltar é a falta de definição do tamanho dos campos de texto, isto será feito através das CSS, portanto não será necessário defini-los nesse momento.

Estilizando

Aplicar estilos a formulários não é diferente de fazer com qualquer outro elemento, para começar, unicamente vamos agregar cor ao fundo da página para ver como esta nosso formulário inicialmente neste primeiro passo.
body { background: #A0CE00; }

Como podemos ver nosso formulário está desordenado e não se vê nada bem. O primeiro que vamos fazer é organiza-lo, para facilitar depois o resto do processo. Vamos desmembrar as etiquetas como block para que simulem as mudanças de linha além de definir um pouco o estilo geral do formulário.

form { padding: 50px; background: #84AA00; width: 250px; }
label { font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #FFF; display: block; }
.campo { margin-bottom: 20px; }

Assim é como se vê nosso formulário atualmente, já está organizado, porém continua simples e o seguinte passo será muda-lo.

A primeira parte importante para estilizar as caixas de texto é esconder o que temos por default, isto vai nos permitir mais liberdade já que na verdade o truque se trata exatamente de substituir as caixas com uma imagem. Para que as caixas se escondam, sem perder funcionalidade vamos fundi-las com a cor de fundo mudando tanto as bordas como o fundo.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; }
#comentario { width: 294px; height: 193px; }

Neste terceiro exemplo, nosso formulário parece não existir, entretanto se movemos um pouco o cursor vemos que continua estando aí.

Agora sim chegou a parte divertida, a seguinte tarefa será adicionar as imagens como fundo, um simples background-image bastará para conseguir o efeito.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; background-image: url(f1.jpg); background-repeat: no-repeat; padding: 2px; color: #669966; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
#comentario { width: 254px; height: 193px; background-image: url(f2.jpg); background-repeat: no-repeat; }

Adicionamos o atributo padding para que o texto não fique totalmente grudado na imagem além de mudar a cor, tamanho e fonte do texto como detalhes.

O único que nos falta é o botão de enviar, o processo é o mesmo, o extra neste caso é a indentação do texto no caso em que não quisermos que este seja visto.

#botao_enviar { width: 88px; height: 27px; margin-left: 80px; background: #84AA00; border: 1px Solid #84AA00; background-image: url(boton.jpg); text-indent: -9999px; }

helldanger1 · Mai 19, 2009

Extras

Basicamente o formulário está pronto, vamos agregar um pequeno efeito para que se veja ainda melhor. Fiz duas imagens extras sem sombreado que se utilizam quando o usuário passa o cursor sobre a caixa de texto.

.campo:hover { background-image: url(f3.jpg); }
#comentario:hover { background-image: url(f4.jpg); }

Se estiver utilizando um bom navegador, o efeito é visto sem problema algum pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial.

exemplo finalizado, podem combina-lo com outros efeitos como a decoração do drop-down menu para conseguir formulários que sejam bem vistos.

Como mencionei ao princípio, ainda encontramos muitos problemas ao estilizar formulários, neste exemplo, podemos ver que as barras de scroll na área de texto podem chegar a ser mal vistas e infelizmente, estas não são estilizáveis mais que em IE. Entretanto, com um pouco de imaginação e uns simples hacks podemos conseguir efeitos para que os formulários fiquem de acordo com o estilo do site.

Estilizando formulários

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP