Semântica de Formulários

Por: Henrique Costa PereiraSaturday 10 September 2005 às 13:10

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.

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!

Tags: Artigos e Estudos Semântica Web Web Standards

9 Comentários para “Semântica de Formulários”

# 1° Fred Saturday 10 September 2005 às 10:10 PM GMT

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

# 2° Maudy Monday 12 September 2005 às 11:12 AM GMT

Use CTRL + (tecla MAIS) do seu Firefox.

# 3° Evandro Pastor Thursday 29 December 2005 às 05:29 PM GMT

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.

# 4° Rafael Dourado Tuesday 10 January 2006 às 06:10 PM GMT

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:”? , , ?

# 5° Bruno Lourenço Thursday 31 August 2006 às 03:31 PM GMT

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

O que vc acha dessa semântica?

Título do Form

Exemplo

Exemplo 2

# 6° jeferson Silva Tuesday 8 May 2007 às 04:8 PM GMT

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

# 7° Matheus de Oliveira Sunday 16 September 2007 às 03:16 PM GMT

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

# 8° danielle Monday 17 September 2007 às 04:17 PM GMT

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.

Avisos
Os itens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:


Assine por feed

assinantes Assine o feed do Revolução Etc

Sobre o Revolução Etc

Foto do autor Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Livros que vão colocar minhocas na sua cabeça:

  • SEO Otimização de Sites - Paulo Teixeira
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Design para Internet: Projetando a Experiência Perfeita - Felipe Memoria
  • Sopro no Corpo: Vive-se de Sonhos - Marco Antônio de Queiroz (MAQ)
  • 250 Segredos para Web Designers - MOLLY E. HOLZSCHLAG
  • O design do dia a dia - DONALD A. NORMAN
  • Ser e o Nada - Jean-Paul Sartre
  • Apocalípticos e Integrados - Umberto Eco
  • Ergodesign e Arquitetura de Informação - LUIZ AGNER
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Criando Páginas Web com CSS - ANDY BUDD, CAMERON MOLL, SIMON COLLISON
  • Mobile Web Design - Cameron Moll
  • Sigam-me no Twitter

Me encontre

Lugares onde digitalmente eu costumo estar presente.

Anúncios

Blogroll:

Alguns sites interessantes e blogs de amigos que eu leio com frequência. Em ordem alfabética.

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo:

Som que faz a minha cabeça!

Procurando inspiração? Esta é uma breve lista do que eu ouço!

  • Diana Krall - The Very Best Of
  • U2 - How to dismantle an atomic bom
  • U2 - 18 singles
  • The Essential - Bob Dylan
  • Bob Dylan - Modern Times
  • Miles Davis - Cool & Collected
  • Miles Davis - Prestige Profiles Vol 1
  • Pink Floyd - The Division Bell
  • Pink Floyd - The wall
  • Pink Floyd - Delicate Sound Of Thunder
  • John Coltrane - The Best of John Coltrane
  • The beatles - The Beatles 1