Formulário semântico

Gustavo Paes, 11/01/2011

Odeio criar formulário. É algo que não me agrada. Cada navegador renderiza de um jeitos os campos de texto, radios, checkbox hora aparece mais pra cima, hora mais pra baixo e os selects que são impossíveis de se customizar.

Mas o assunto desse post não é esse. Embora criar formulários seja chato, não quer dizer que seja difícil. Formulários semânticos então, são mais fáceis até.

Já vi formulários montados dentro de tabelas — faz tempo que não vejo, dentro de listas (ul, li) e dentro de uma lista de definições (dl, dd e dt). Nenhuma das formas estão corretas.

Você pode pensar que um formulário é uma lista de campos. Ok, mas a lista deve ser usada quando você já tem os dados e não quando vai recebê-los. O mesmo vai para a lista de definições. Não faz sentido você dizer que Nome é um input. O robozinho do Google vai ficar confuso.

Antes de criarmos o formulário semântico, vamos aprender sobre as tags existentes para criar formulários. Fora as tags que criam botões, selects, radios e outros tipos de entrada existem duas tags fundamentais: fieldset e label.

Relacionando dados com fieldset

O fieldset pode ser usado uma, duas ou mais vezes dentro de um formulário. Em geral é usado uma vez só, mas se seu formulário for complexo você pode achar melhor dividir as informações. Para isso, use mais de um fieldset acompanhado da tag legend.

A tag legend é apenas visual e coloca um título no início do fieldset.

Definindo o label

A tag label deve envolver um campo e um título equivalentes. Por exemplo, o texto Nome completo e o input para o nome devem ficar dentro de um label.

O mais importante do label é o atributo for. Ele indica qual campo do formulário deve ganhar o foco quando o texto for clicado.

Veja aqui um formulário semântico usando as duas tags acima e uma customização básica em CSS.