:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 13 - Estilizando formulários

A estilização de formulários em páginas Web, não se constitue em uma grande prioridade. Os formulários normalmente são deixados como são - e por várias boas razões.

  1. As convenções padrão usadas para formulários, funcionam muito bem.
  2. Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.
  3. Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores.

Vamos examinar cada um destes aspectos com mais detalhes.

'As convenções padrão usadas para formulários, funcionam muito bem.'

Talvez. Ainda encontra-se uma grande quantidade de formulários mal projetados, tanto para mídia impressa quanto para a Web.

Basicamente eu detesto preencher formulários e conheço muitas pessoas que também detestam.

Contudo os formulários se constituem em um meio eficaz de se coletar informações facilitando seu processamento. Então, o que há de errado com o design dos formulários?

A primeira questão diz respeito a um formulário de aparência complicada. Isto intimida o usuário e faz com que ele 'entre em modo defensivo'.

A seguir vem as perguntas que aparentemente são irrelevantes ou indiscretas. Por que eles querem saber o dia do meu aniversário?

O aspecto complicado do formulário é um problema de layout. Você pode 'descomplicar' ou tornar simples um formulário projetando-o de uma forma clara e ordenada. A atenção inicial deve ser dispensada a ordenação dos textos e clareza do layout.

Há que se considerar ainda o tamanho e posicionamento dos textos dos rótulos e também de notas explicativas. Os textos devem ser posicionados acima, abaixo ou à direita dos boxes. Se você preferir colocar os rótulos à esquerda, use align: right; para evitar que um espaçamento maior entre o texto e o box traga complexidade ao layout, dificultando a identificação. Tente também evitar o uso de diferentes tamanhos de boxes input e não preencha espaços vazios, simplesmente porque eles existem. Se um box para código postal é menor que os demais destinados ao endereço, deixe-o menor mas, não use o espaço que sobrou para colocar outro box, simplesmente porque há o espaço.

Em uma página Web você não precisa economizar espaços. Racionalize o tamanho de seus boxes de input. Alinhe-os verticalmente. Projete-os claros e ordenados.

Um formulário complexo

O formulário acima parece complicado. Ele tem dois eixos verticais e o movimento dos olhos para a leitura não flui naturalmente, tendo que pular na vertical e na horizontal para localizar o box seguinte.

Um formulário simples

Um projeto mais simples com um só eixo vertical propicia um movimento natural de leitura.

Ao contrário de um formulário impresso, na Web os formulários podem ter alguma parte fora da visão do usuário pois a área de apresentação está limitada à janela do navegador. Assim, um formulário muito longo em uma página pode requerer seguidas rolagens de tela, o que se torna inconveniente. Neste caso é preferível dividir o formulário em múltiplas páginas - com o cuidado de facilitar a eventual volta às partes do formulário, caso o usuário necessite alterar algo já informado.

'Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.'

Sim, você não deve 'queimar a cuca' com o design de formulários. Um box de input para texto deve comunicar ao usuário a sua função, assim como um pop-up ou um botão de submit. Não há muito a acresentar a um fundo branco com texto em preto - até porque alguns navegadores não permitem nada mais, além disto!

É uma má idéia confundir um box de input com um texto comum, ele terá que ser diferenciado e comunicar seu propósito.

Os elementos que você pode estilizar são input, textarea e select mas esteja ciente de que ao estilizar um campo de input não só o campo será estilizado como também os outros inputs como radio boxes, check boxes e os botões Submit (Enviar) e Clear (Limpar).

É seguro estilizar font-family e font-size. text-color pode ser estilizado se você assim preferir. Com background-color deve-se ser mais criterioso. Estilizar o fundo com uma cor em tonalidade mais suave do que a da página, dará ao campo um aspecto menos agressivo.

Ao alterar a borda de um box para input de texto estaremos afetando também a borda do botão submit e ele poderá ficar parecido com um box de texto se você não tomar suas precauções. Para evitar isto você deverá criar e estilizar uma div que englobe o box de texto, tal como mostrado para #typein logo abaixo...


#typein { }
#typein input { 
	color: #633; 
	font-size: 10px; 
	background-color: #ebebd9; 
	padding: 3px; 
	border: double 3px orange 
	}

Se você quiser estilizar uma textarea de maneira semelhante ao box de texto, faça assim...


#typein input, #typein textarea { 
	color: #633;font-size: 10px; 
	background-color: #ebebd9; 
	padding: 3px; border: double 3px orange; 
	}

Select (popups) são apresentados de modo diferente de acordo com o navegador ou plataforma em que são visualizados. Definir para eles um tamanho e uma família de fontes é o máximo que devemos fazer. A aparência que eles assumem quando são clicados está fora do seu controle.

'Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores. '

Isto é melhor demonstrado através de alguns screenshots.

A mesma estilização renderizada em Explorer (Win), Mozilla, Safari (Mac) e Opera mostra as variações de apresentação. Mais considerações sobre diferenças entre navegadores, veremos mais adiante.

A questão fundamental é que não estamos tentando criar uma obra prima com formulários. Estamos sim, tentanto fazê-los fáceis de usar sem serem intimidadores e com uma apresentação bem intuitiva.

Aperfeiçoar a experiência do usuário com auxílio de scripts de validação é uma outra história que não abordarei agora.

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

Criado em: 2005-04-14