Semântica de Formulários

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

Eu sei que diversas pessoas já escreveram sobre tópicos como este, em outros lugares. Mas quero concentrar o máximo de informações sobre semântica web e webstandards quanto possível, sem ter que reinventar a roda aqui no Revolução Etc. Pois esta é a minha versão sobre semântica de formulários.

As tags relacionadas aos formulários são <form>, <fieldset>, <legend>, <label> e os controles do tipo <button>, <input>, <select> e <textarea>. Não vou me ater neste artigo sobre os tipos de controles que podem ser utilizados e suas funções, e sim o outro conjunto de tags que podem ser usadas em um formulário.

A tag <form> é necessária para qualquer tipo de entrada de dados que seu site tiver. Há várias maneiras de ser organizar os forms em uma página e cada programador possuiu seus métodos como ter um form por página ou ter vários para vários conjuntos de forms. Não vou me ater a estas coisas.

As principais tags que devem ser observadas aqui são <fieldset>, <legend> e <label>.

Um formulário padrão pode ter esta aparência:


<form id="demonstracao" method="post" action="">
     <fieldset>
         <legend>Título do Form</legend>
         <label for="exemplo">Exemplo</label>
         <input type ="exemplo" size="20" />
         <input type="submit" id="inserir" value="submit" />
    </fieldset>
</form>


<fieldset>

A tag <fieldset> te permite ter o controle sobre um grupo de formulários. Por exemplo, em uma página de currículo em um site você pode dividir todos os campos em conjuntos nomeados por dados pessoais, formação e experiência profissional, por exemplo. Cada conjunto desses poderia ter uma <filedset> diferente e estar dentro do mesmo form. Esta tag cria um box, um quadro, em torno dos objetos que estão inseridos dentro dele. Esta tag é opcional e permite que você tenha um controle maior sobre o conjunto de forms. A aparência do box formado por esta tag, pode ser controlado por CSS e até ser excluído.

<legend>

A tag <legend> cria um título para um conjunto de forms. No exemplo anterior que eu dei para as divisões de um formulário de currículos, como dados pessoais, formação e experiência profissional, estes títulos devem estar dentro da tag <legend>. Assim como em uma tabela existe a tag <caption> para dar um título específico para a tabela, a tag <legend> pode ser utilizada para dar um título para um conjunto de forms.

<label>

A tag <label> deve ser usada sempre para dar um nome a um campo de controle. Em um formulário de contato, por exemplo, igual ao deste site, eu tenho os campos nome, e-mail, assunto e comentário. A ordem lógica de dispor estes dados é colocar o nome do campo e em seguida o próprio campo. A tag <label> deve ser usada sempre para inserir estes nomes de campos, sejam eles seguidos por <input>, <textarea>, <select> etc. Das três tags apresentadas acima, esta é a única que, se você utilizar algum tipo de formulário de entrada de dados no seu site, você não ficará sem a oportunidade de usar.

Se você não quiser agrupar um conjunto de forms usando <filedset> é porvável que talvez você não use a tag <legend>. Mas se existir pelo menos um único form no seu site, como um campo de busca, você deverá usar <label> na busca.

Artigos relacionados:

• Semântica de Títulos
• Introdução a Semântica Web
• Semântica de tabelas
• hCard
• Semântica de listagens
• A Revolução do CSS
• Button Replacement

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!