[TheChessMan]

Construindo formulários semanticamente corretos – parte 1

Olá pessoal, hoje estou aqui para falar de uma das causas de muitas dores de cabeça para os desenvolvedores Web Standards: a construção de formulários.

Você aprende CSS, XHTML, aprende a validar seu código, faz tudo o mais semântico possível e, de repente, chega a hora da página de cadastro de currículo ou daquele "fale conosco" mais elaborado.

Muitos entram em desespero, levantam pra tomar um café, vão até a padaria do outro lado da rua comprar uns chocolates. Já outros resolvem fazer com tabelas, afinal "Quem manda no meu código sou eu, não aqueles caras pirados por semântica!". Os mais dedicados tentam fazer com tableless, mas os problemas são tantos que acabam desistindo.

Acalme-se, seus problemas estão quase acabados!

O layout chegou

Bem, essa hora é cruel, seu designer grita: "Tá pronta a página de cadastro!", deu arrepio né? Sei como é...




Designers são nossos inimigos?

Você olha pra página, faz umas caretas, franze a sobrancelha... mas enfim aceita a situação, afinal de qualquer forma você vai ter que montar isso.

Uma coisa importante que você DEVE dizer para seu designer:

Quote

Ainda não vale a pena querer fazer checkbox e radiobuttons personalizados.

É possível fazer com javascript, mas com códigos nada amigáveis, o melhor a fazer é esperar pelo CSS 3 que promete trazer a nova pseudo-classe :checked que abrirá muitos horizontes na estilização destes elementos.

Hoje o Firefox suporta essa pseudo-classe perfeitamente e seria possível fazer a personalização, mas o IE não a suporta, portanto simplesmente não vale a pena o tempo dispensado.

Veja mais em: http://pdatabase.dyn.../tutorial02.php

Quanto aos selects personalizados eu penso da mesma forma. Com javascript é possível fazer, mas simplesmente não vale a pena.

Opinião própria, isso não quer dizer que você não possa usar, em ambas as situações.


Montando o XHTML

Pois bem, a primeira coisa a fazer em qualquer projeto web, é montar o XHTML, nada de estilização, você faz isso não é?

Porém há um grande impasse entre os desenvolvedores nesse momento, referindo-se a formulários:

Quote

Qual a estrutura XHTML mais semântica para os campos?

Nós sabemos que os elementos para acessibilidade são os label's, fieldset's, legend e seus atributos são tabindex, title, alt e acesskey.

Como? Você não sabia? Então antes de prosseguir dê uma lida neste tutorial do maujor explicando sobre acessibilidade em formulários Vai lá, eu espero

Apesar de tudo isso, existem outros modos de estruturar estes formulários, mesmo usando os elementos para acessibilidade, vou listar os principais:

• Parágrafos com span's
  
• Listas não-ordenadas
  
• Listas ordenadas
  
• Listas de definição
  
• Nenhum dos itens acima, simplesmente estilizando os label's, fieldset's e input's

Ufa.. qual deles você usa? Qual será o melhor? Na próxima parte vamos prosseguir analisando algumas peculiaridades de cada um dos métodos (lembrando que nenhum deles é errado, podem ser adaptados para projetos específicos) e vamos montar, finalmente nosso XHTML.


Até lá pessoal!

//Postado originalmente em: http://www.thechessm...primeira-parte/ (desativado)

Este post foi editado por Micox: 26 setembro 2007 - 10:13

[TheChessMan]

Construindo formulários semanticamente corretos - parte 2


Na primeira parte vimos um pouco sobre algumas peculiaridades referentes ao design de formulários e as formas como os desenvolvedores costumam estruturá-los. Agora vamos analisar cada uma delas com mais detalhes.

Análise dos métodos de estruturação

• Parágrafos com span's – entre todas, esta é a técnica menos usada, pois o código acaba ficando muito grande e confuso, a idéia é colocar cada conjunto label+input dentro de um parágrafo e usar span's envolvendo o texto do label, conseguindo o efeito desejado.
  
• Listas: ordenadas e não-ordenadas – técnica bastante aceita e usada entre os desenvolvedores, vai da concepção de cada um sobre semântica quanto a usar listas não-ordenadas ou ordenadas.
  
• Listas de definição – Outra técnica bastante utilizada, eu inclusive usei por bastante tempo. Colocando o label dentro do "<dt>" e o input dentro do "<dd>". Segue uma idéia semântica de que a informação escrita no input é a definição do texto do label. A desvantagem é o uso excessivo de tags xhtml.
  
• Label', fieldset's e input's – o modo mais simples e provavelmente o mais correto semanticamente, não há tags importunas no código. Após algum tempo passei a utilizar este método exatamente pela simplicidade. As desvantagens são duas: a dificuldade inicial de posicionamento via CSS devido a falta de elementos para se trabalhar e o fato de a degradação do código com CSS desativado ser um tanto confusa para formulários grandes. A primeira é muito fácil de contornar , e a segunda pode ser diminuída com o uso de fieldsets por categorias, como faremos a seguir.

Criando a estrutura XHTML

É hora de por a mão na massa, aqui vou utilizar o quarto método abordado, pois acredito ser o melhor.

Sei que existem opiniões contrárias, sintam-se à vontade para criar suas versões e terei prazer em postá-las aqui.

Abra seu editor preferido e vamos lá:

<form  action="#" method="post">
			 <fieldset>
					   <label>Nome: <input  type="text" /></label>
					   <label>Sobrenome:  <input type="text" /></label>
					   <label>Idade:  <input type="text" /></label>
					   <span>Sexo</span>
					   <label><input  type="radio" />masculino</label>
					   <label><input  type="radio" />feminino</label>
					   <span>Data de Nasc.</span>
					   <select>
								<option>…</option>
					   </select>
					   <select>
								<option>…</option>
					   </select>
					   <select>
								<option>…</option>
					   </select>
					   <label>Signo:  <input type="text" /></label>
			 </fieldset>
  </form>

Se repararmos direito, nosso designer até que não foi tão cruel, ele separou os campos de forma lógica, portanto podemos criar um fieldset para cada "categoria" de informações que o usuário deve preencher.

Notar as tags "span" e os "select" sem label.

Quando temos inputs do tipo rádio, seus rótulos (label) são os valores que o acompanham e não a informação que lhes é atribuída.

No caso da data de nascimento, temos um problema: a separação de campos dia/mês/ano. Infelizmente não vejo outra solução senão essa de deixar os campos sem rótulo. Uma solução real? Talvez transformar os três selects em apenas um input e colocar um exemplo de formatação ao lado como (dd/mm/aa), para o usuário saber a forma como deve digitar. Só que meu designer não deixou fazer isso :-( vai ter que ser assim mesmo.

Agora adicionamos uma nova categoria, chamada 'dados postais':

<fieldset>
					 <legend>Dados  postais</legend>
					 <label>Endere&ccedil;o:<input  type="text" /></label>
					 <label>N&ordm;:<input  type="text" /></label>
					 <label>Bairro:<input  type="text" /></label>
					 <label>Cidade:<input  type="text" /></label>
					 <label>Estado:<select><option>…</option></select></label>
					 <label>CEP:<input  type="text" /></label>
				   </fieldset>

E então adicionamos outras duas categorias com os respectivos campos:

<fieldset>
					   <legend>Dados  familiares</legend>
					   <label>Nome do pai:<input  type="text" /></label>
					   <label>Nome da  m&atilde;e:<input type="text" /></label>
					   <label>Nome do  irm&atilde;o:<input type="text" /></label>
					   <label>Nome do  cachorro:<input type="text" /></label>
			 </fieldset>
			 <fieldset>
					   <legend>Informações  adicionais</legend>
  <label>Experi&ecirc;ncia Profissional:<textarea rows="" cols=""></textarea></label>
					   <label>Habilidades:<textarea  rows="" cols=""></textarea></label>
					   <label>Pratos  preferidos:<textarea rows=""  cols=""></textarea></label>
			 </fieldset>

Notar os atributos "cols" e "rows" nas textareas, o xhtml 1.1 ainda exige estes atributos, apesar de implicarem na apresentação do documento, um dos motivos pode ser a forma como as textareas são apresentadas em alguns navegadores, onde praticamente não há espaço para o usuário digitar, quando não definidos valores para estes dois atributos.

Neste momento nos deparamos com os "checkboxes em massa", isso pode ser assustador em um primeiro momento, mas o princípio é o mesmo, usar as categorias de conteúdo para separação em fieldset's. Decidi separar em duas categorias: "Turnos" e "Interesses", pensei em fazer uma única chamada "Informações adicionais 2", mas não me pareceu muito clara a navegação desta forma.

<fieldset>
					  <legend>Turnos:</legend>
					   <label><input  type="checkbox" name="turno"  />manh&atilde;</label>
					   <label><input  type="checkbox" name="turno" />tarde</label>
					   <label><input  type="checkbox" name="turno" />noite</label>
			 </fieldset>
			 <fieldset>
					   <legend>Interesses:</legend>
					   <label><input  type="checkbox" name="interesse"  />inform&aacute;tica</label>
					   <label><input  type="checkbox" name="interesse"  />nata&ccedil;&atilde;o</label>
					   <label><input  type="checkbox" name="interesse" />xadrez</label>
					   <label><input  type="checkbox" name="interesse" />bingo</label>
					   <label><input  type="checkbox" name="interesse" />livros</label>
					   <label><input  type="checkbox" name="interesse" />games</label>
					   <label><input  type="checkbox" name="interesse" />viagens</label>
					   <label><input  type="checkbox" name="interesse"  />tecnologia</label>
					   <label><input  type="checkbox" name="interesse"  />sobrenatural</label>
				   </fieldset>

E por fim adicionamos o campo para anexos, você ainda vai ler sobre ele neste tutorial (:

<fieldset>
 <legend>Arquivo em anexo</legend>
 <label>Anexar arquivo:<input type=”file” /></label>
 </fieldset>

E aí está, nossa estrutura xhtml está pronta, a única coisa que falta é adicionar alguns elementos relativos à acessibilidade, entre eles temos o tabindex, title e acesskey. Já viram que os legend's estão aí não é?

Alguém pode perguntar: "Mas como o usuário vai saber que existe o acesskey?"

Eu respondo: "Preste atenção no title!", este é um recurso que eu acho interessante como um elemento a mais para usuário.

Outro detalhe sobre as acesskey's é o fato de haver um número grande de campos e não sobrarem letras para colocar nos valores.

Para resolver isso eu geralmente coloco acesskey's apenas nos campos obrigatórios, caso todos sejam obrigatórios, apenas nos campos mais importantes. É uma forma de desenvolvimento, talvez não totalmente satisfatória, mas aceitável.

Veja esta página com o xhtml completo.

Ela não está com uma aparência muito agradável, mas este é o conteúdo que vai ser exibido caso o browser não suporte CSS ou for um leitor de tela, apesar da aparência, é perfeitamente acessível para qualquer um utilizar.

Na terceira e última parte, vamos finalmente estilizar nossos elementos com CSS, posicioná-los e deixá-los da forma como nosso designer pediu. Até lá!

//Postado originalmente em: http://www.thechessm...orretos-parte-2 (desativado)

[TheChessMan]

Construindo Formulários Semanticamente Corretos - Parte Final

Finalmente chegamos na tão esperada parte onde iremos estilizar nosso formulário, na segunda parte vimos diferentes formas de construir nosso xhtml e criamos então da forma mais simples possível, seguindo todos os conceitos de acessibilidade em formulários.

Vale lembrar que não existe nenhuma fórmula mágica para estilização destes elementos, então se você espera não ter que pensar/trabalhar na hora de construir formulários, está no site (e talvez até no emprego) errado.

Você pode conferir o que temos até agora nesta página.

Antes de começar podemos fazer uma pequena análise de algumas características básicas:

• O texto é alinhado à direita em relação ao lado esquerdo da tela
  
• Existe uma certa padronização quanto às larguras dos campos de texto.

Feito isso já podemos fazer algumas coisas relacionadas à estrutura geral, e a aparência em si dos campos:

/*zerando as margens dos elementos*/
 *{
	 margin:0;
	 padding:0;
 }
 form{
	 width:740px;
	 padding:15px;
	 /*largura total = 740+15+15*/
 }
 fieldset{
	 border:none;
	 margin-bottom:25px;
 }
 /*os 'legend' são itens de acessibilidade, não precisam ser
 mostrados, ao menos não em nosso caso*/
 legend{
	 display:none;
 }
 label, span{
	 color:#f00;
	 font:1.3em Arial, Helvetica, sans-serif;
 }
 input, textarea, select{
	 border:1px solid #00F;
 }
 /*o ie coloca bordas nos inputs do tipo radio e checkbox, então
 precisamos de um pequeno concerto*/
 input.radio {
	 border:none;
 }

Adicione a classe "radio" nos inputs do primeiro fieldset, para os checkboxes lá em baixo, espere mais um pouco, vamos por partes, certo?

Veja que após acrescentar estas linhas nosso formulário já ganhou um aspecto muito melhor, o resto é simplesmente questão de posicionamento.

Para as larguras de campos há um grande problema semântico: Não se deve criar nomes de classes referentes à aparência dos elementos na tela, mas o problema dos input's é: "E então que nomes eu dou para as classes de forma a identificá-las mais tarde?"

Eu abro uma exceção à regra nesses casos, crio classes com os nomes "maior", "médio", "menor", realmente não encontrei uma alternativa que facilitasse.

Apenas uma ressalva: já vi pessoas criando os nomes de classe assim: "input432px", "input220px", "input45px".

Isso é loucura, além de ser totalmente não-semântico, você vai é ter um nó no cérebro se um dia precisar mudar alguma coisa.

Continuando, podemos ver que na maioria dos fieldsets temos os campos um abaixo do outro, acrescentando mais um pouco de código, vamos ter o efeito que precisamos (já fazendo o alinhamento à direita):

label, span{
	 color:#f00;
	 font:1.3em Arial, Helvetica, sans-serif;
	 display:block;
	 text-align:right;
 }

Posicionado do modo correto, agora vamos cuidar dos tamanhos dos inputs, como comentei, defino os nomes de classe como "grande", "medio", "pequeno" ainda defini uma intermediária "médio-maior", eu sei que não é semântico, mas foi o método que considerei melhor:

/* tamanhos */
 .grande{
	 width:500px;
 }
 .medio-maior{
	 width:430px;
 }
 .medio{
	 width:185px;
 }
 .pequeno{
	 width:30px;
 }

E então fazemos algumas pequenas correções para os campos select, que devido à barra de seleção lateral, ficam com larguras diferentes:

/* correção de tamanhos para os selects */
 select.pequeno{/*dia e ano de nascimento*/
	 width:40px;
 }
 select.pequeno-maior{/*mês de nascimento*/
	 width:100px;
 }
 select.medio{/*estado*/
	 width:189px;
 }

Bem, agora precisamos colocar estas classes nos devidos elementos:

• A classe "grande" deve ser colocada em todos os inputs do fieldset "Dados familiares" e nas textarea. Isso nos indica que sequer precisamos desta classe, só precisamos colocar uma classe em cada um desses fieldsets e então definir as larguras, assim:

fieldset.dados-familiares input, fieldset.info-add textarea
 {
	 width:500px;
 }

E deletamos a classe "grande"

.grande{
	 width:500px;
 }

• A classe "medio" deve ser colocada em todos os inputs que ocupam metade da largura do formulário, incluindo o select do estado. Ex.: Nome, Idade, Bairro, Cidade etc.
  
• A classe "pequeno" vai nos selects do dia de nascimento, do ano de nascimento e ainda no input "Nº" no fieldset de endereços.
  
• A classe "pequeno-maior" vai no select de mes de nascimento
  
• Finalmente, a classe "medio-maior" vai no input de endereço

Ufa, já tivemos um grande avanço não acham? Nosso formulário já está bem apresentável pelo menos Agora só falta o posicionamento em si.

Para isso pode-se usar floats para os label (e encarar todos os bugs que podem acontecer no IE) ou usar um método um pouco mais "chato" baseado em display inline e margens direita e esquerda, que é o que vamos usar aqui.

Primeiramente vamos transformar os label's (e span's) que precisamos em elementos "inline", quais são eles? Todos os que devem ficar lado a lado. Falando nisso, vamos aproveitar a dar uma classe para cada fieldset, vamos usar cada uma delas agora:

/*labels que precisam ser inline*/
 fieldset.interesses label,
 fieldset.turnos label,
 fieldset.info-pessoal label,
 fieldset.info-pessoal span,
 fieldset.dados-postais label,
 fieldset.dados-postais span{
	 display:inline;
 }

Parece que estamos regredindo? Não se preocupe, é assim mesmo, agora o que precisamos é dar as devidas margens para posicionar os label, também dando classes para os mesmos, utilizando inclusive os seus próprios textos para nomes dessas classes:

/*posições - labels inline*/
 /*fieldset de informações pessoais*/
 label.nome{
	 margin-left:177px;
	 margin-right:12px;
 }
 label.idade{
	 margin-left:179px;
	 margin-right:12px;
 }
 label.masculino{
	 margin-right:37px;
 }
 span.data-de-nascimento{
	 margin-left:99px;
 }
 label.signo{
	 margin-left:11px;
 }
 label.signo input{
	 width:239px;
 }
 /* fieldset de dados postais */
 label.endereco{
	 margin-left:141px;
	 margin-right:6px;
 }
 label.bairro{
	 margin-left:174px;
 }
 /*pequeno ajuste de largura-alinhamento*/
 label.cidade input, label.cep input{
	 width:237px;
 }
 label.estado{
	 margin-left:165px;
	 margin-right:21px;
 }

E aí está! Todos os campos alinhados e no lugar! Só falta uma pequena correção para o IE, via comentários condicionais:

<!--[if IE]>
	 <style type="text/css">
	 label.masculino{margin-right:25px;}
	 </style&gt;
<![endif]-->

Vamos partir agora para o fieldset de "info-add", vemos que está bem posicionado, mas o texto deve ficar no início de cada textarea e não embaixo, alguém poderia pensar em colocar um span envolvendo este texto e posicioná-lo, e admito que eu também pensei isso, mas não será possível fazê-lo apenas com CSS?

Vamos pensar nessa separação como duas colunas distintas, primeiro eu empurro os textareas para a direita com float:right, então vemos os respectivos labels perdendo as margens entre eles e subindo, logo damos de volta esta margem com a diferença de não influenciar nos textarea, que estão com float, entender melhor? Assim:

fieldset.info-add label textarea{
	 float:right;
 }
 fieldset.info-add label{
	 margin-bottom:80px;
 }

E já temos quase tudo alinhado, só falta uma pequena margem negativa no textarea:

fieldset.info-add label textarea{
	 float:right;
	 [b]margin-top:-20px;[/b]
 }

Tudo bem alinhado aí? Aqui também está certo, com o único problema de o texto estar em cima do textarea.

O que precisamos fazer agora é posicioná-lo para a esquerda, mas como fazer para apenas o texto se mexer? Veja:

fieldset.info-add label{
	 margin-bottom:80px;
	 [b]position:relative;[/b]
	 [b]right:502px;[/b]
 }
 fieldset.info-add label textarea{
	 float:right;
	 margin-top:-20px;
	 [b]position:relative;[/b]
	 [b]left:502px;[/b]
 }

O que fizemos? Colocamos o label inteiro 502 pixels para a esquerda e depois somente o textarea 502 pixels para a direita, fácil né?

Vamos apenas corrigir uma falha visual do IE, que deixou muita margem entre os label:

<!--[if IE]>
	 <style type="text/css">
		 fieldset.info-add{margin-bottom:-65px;}
		 fieldset.info-add label{margin-bottom:65px;}
	 </style>
<![endif]-->

Mais um detalhe: percebeu como o IE deixa a barra de rolagem no textarea mesmo sem precisar? O problema é que o padrão do IE é diferente do Firefox neste caso, vamos torná-los iguais:

textarea{
	 overflow:auto;
 }

Vamos lá que falta pouco! Passando para os checkboxes, podemos usar o mesmo procedimento que fizemos com os label's inline lá de cima, colocando as devidas classes e não esquecendo de retirar a borda que fica no IE:

fieldset.turnos label{
	 float:right;
	 margin-right:70px;
 }
 fieldset.turnos input{
	 border:none;
	 /*para alinhar verticalmente*/
	 position:relative;
	 top:-3px;
	 margin-right:5px;
 }

E outra correção para o IE, que deixa os checkboxes alinhados por padrão (lembre-se de colocar essas correções dentro do mesmo 'if' condicional):

<!--[if IE]>
	 <style type="text/css">
	 fieldset.turnos input{position:static;}
	 </style>
<![endif]-->

Agora note uma coisa: Onde está a palavra "Turnos" em nosso XHTML? Exato, agora é hora de usarmos o legend oculto para auxiliar, portanto não há necessidade de mexer em nosso XHTML! Primeiramente colocamos as mesmas propriedades de label e span neste legend:

label, span, [b]fieldset.turnos legend[/b]{
	 display:block;
	 text-align:right;
	 color:#f00;
	 font:1.3em Arial, Helvetica, sans-serif;
 }

E então posicionamos no lugar certo:

fieldset.turnos legend{
	 text-align:left;
	 padding-left:168px;
	 margin-bottom:-25px;
 }

Já no IE foi necessário posicionar de outra forma:

<!--[if IE]>
	 <style type="text/css">
	 fieldset.turnos legend{
			 position:relative;
			 top:23px;
			 padding-left:160px;
			 margin-bottom:0;
	 }
	 </style>
<![endif]--&gt;

Mais um último fôlego pois estamos quase terminando!
No último fieldset vamos usar mais uma vez o legend como identificador e posicionar os labels com float e margens, assim como fizemos acima:

label, span, fieldset.turnos legend,
 [b]fieldset.interesses legend[/b]{
	 display:block;
	 text-align:right;
	 color:#f00;
	 font:1.3em Arial, Helvetica, sans-serif;
 }
 fieldset.interesses legend{
	 text-align:left;
	 padding-left:132px;
	 margin-bottom:-25px;
 }
 fieldset.interesses label{
	 float:left;margin-right:18px;
 }
 fieldset.interesses input{
	 border:none;
	 margin-right:5px;
	 margin-bottom:3px;
 }

E novamente ajustes para o IE:

<!--[if IE]>
	 <style type="text/css">
		 fieldset.interesses input{
		 margin-bottom:0;
	 }
		 fieldset.interesses legend{
		 padding-left:124px;
	 }
	 </style>
<![endif]-->

E então o posicionamento via margens como já conhecemos:

label.natacao{
	 position:relative;
	 left:-5px;
	 /*como o valor é negativo, não podemos
	 usar margem.
	 */
 }
 label.informatica, label.bingo, label.viagens{
	 margin-left:320px;
 }
 label.xadrez{
	 margin-left:20px;
 }
 label.livros{
	 margin-left:48px;
 }
 label.games{
	 margin-left:51px;
 }
 label.tecnologia{
	 margin-left:25px;
 }
 label.sobrenatural{
	 position:relative;
	 left:5px;
 }

E mais correções para IE:

<!--[if IE]>
	 <style type="text/css">
		 label.informatica, label.bingo, label.viagens{
			 margin-left:299px;
		 }
	 </style>
<![endif]-->

Agora a única coisa que falta é o campo de anexos. Há algo a falar sobre ele, este tipo de campo é o que mais costuma mudar em cada browser, sua aparência é extremamente diferente entre Firefox, IE, Opera e Safari por exemplo.

Para ter uma idéia, o Firefox sequer aceita aumentar a largura dele (aumenta sim, mas apenas o background, não a posição do botão). Sua estilização foi abordada neste tutorial de Peter-Paul Koch, mas apesar de tudo o resultado final não é de todo satisfatório e prefiro continuar com a estilização padrão que eles aceitam.

Aqui apenas adicionei isto:

fieldset.dados-familiares input,
 fieldset.info-add textarea,
 [b]fieldset.anexos input[/b]{
	 width:500px;
 }

E pronto! Estamos com nosso formulário 100% pronto! Você pode ver o resultado final completo nesta página.

Sei que deu trabalho, mas espero que tenham gostado e consigam adaptar em seus projetos, pessoal!