Semântica de Formulários

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.

  • Fred

    Legal…..

    mas cade aquele negocio q ficava do lado esquerdo da página para aumentar o texto? :(

  • Maudy

    Use CTRL + (tecla MAIS) do seu Firefox.

  • Evandro Pastor

    Muito bacana essa matéria, estou acompanhando toda a série. Mas estou com um problema: não consigo organizar o layout do formulário com css. Eu tento usar as tags label e input pra tentar organizar mas só pioro as coisas.

  • Rafael Dourado

    Okay, entendi tudo. Mas como eu faço no caso de um grupo de checkboxes? Por exemplo, dentro de um Fieldset com Legend "Dados Pessoais" eu tenho dois RadioButtons chamados Masculino e Feminino e antes deles o texto "Sexo:". Para masculino e feminino eu uso Label apontando para os respectivos campos, mas e em "Sexo:"? , , ?

  • Bruno Lourenç

    Cara vc tem um erro em: ( < input type ="exemplo" )

    O que vc acha dessa semântica?

    Título do Form

    Exemplo

    Exemplo 2

  • jeferson Silva

    Muito Legal as tag de seu site gostei muito e tambem aprendi muito

  • Matheus de Oliveira

    Ops…

    Por favor, exclua o comentário acima, esqueci que não dá pra por tags, então vou trocar as tags por []:

    Em:

    [input type ="exemplo" size="20" /]

    Você não quis dizer:

    [input type="text" id="exemplo" size="20" /]

    ??

    Ótima explicação, você é fera…abços

  • danielle

    acho qe houve um erro nesse trecho:

    Exemplo

    na realidade o atributo tyte="text" e deve conter um atributo id="exemplo" onde o valor deve ser igual ao que estiver dentro do for.

  • Pingback: » Tableless, o termo maldito ? | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.()

  • http://meadiciona.com/lezgal Almino Melo

    No livro Use a Cabeça XHTML com CSS é recomendada o uso de tabelas para formulários simples como esse, de comentário. O que você pensa sobre isso?

  • Danielle

    Na minha opinião, está errado, seee vc quiser trabalhar com padrões Web.