Formulário semântico
Publicado em:
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.