Formulário Nos Padrões

Olá pessoal, sei que não sou nenhum "expert" em webstandards, mas venho aqui deixar uma contribuição para quem está iniciando.

Esse tutorial mostrará como desenvolver um formulário semanticamente correto. Sempre vejo em sites que muitos utilizam tabelas para estrutar o formulário, mas todos nós sabemos (ou deveriam saber) que tabelas são utilizadas para exibir dados tabulados.

Vamo lá então...

1º, montando o XHTML da página...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <title>Formulário semanticamente correto</title>
 </head>
 
 <body>
 <form action="" method="post">
	 <label for="nome" id="lnome">
	 <span class="campo">Nome</span> <input type="text" name="nome" id="nome" />
	 </label>
	 
	 <label for="email" id="lemail">
	 <span class="campo">E-mail</span> <input type="text" name="email" id="email" />
	 </label>
	 
	 <label for="cidade" id="lcidade">
	 <span class="campo">Cidade</span> <input type="text" name="cidade" id="cidade" />
	 </label>
	 
	 <label for="estado" id="lestado">
	 <span class="campo">Estado</span>
	 <select name="estado" id="estado">
		 <option>ES</option>
	 </select>
	 </label>
	 
	 <label for="assunto" id="lassunto">
	 <span class="campo">Assunto</span> <input type="text" name="assunto" id="assunto" />
	 </label>
	 
	 <label for="mensagem" id="lmensagem">
	 <span class="campo">Mensagem</span> <textarea name="mensagem" id="mensagem"></textarea>
	 </label>
	 
	 <button type="submit" id="enviar">Enviar</button>
 </form>
 </body>
 </html>

* Para quem ainda não conhece a tag <label>, é utlizada em elementos de formulário, proporcionando uma maior facilidade de acesso a esses elementos. Com o parâmetro "for='nome_do_elemento'" fazemos com que o <label> fique "clicável", assim podemos por acessar ou marcar o elemento. Só não deve ser usada em elementos do tipo botão.

A visualização inicial do formulário será essa:
Imagem

Agora vamos ao CSS:

<style type="text/css">
 /* ZERANDO ATRIBUTOS EM TODOS OS SELETORES */
 * {
	 margin: 0;
	 padding: 0;
 }
 
 /* FORMATANDO A FONTE, TAMANHO E COR PADRÃO */
 body {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px;
	 color: #333;
	 margin: 50px 0 0 50px; /* SÓ PARA NÃO FICAR COLADO NAS MARGENS DA PÁGINA */
 }
 
 /* LABEL */
 label {
	 display: block; /* DEIXANDO UM ACIMA DO OUTRO */
	 margin: 5px 0 5px 0; /* ESPAÇO ACIMA E ABAIXO */
 }
 
 /* FORMATANDO OS IDENTIFICADORES DOS CAMPOS */
 label span {
	 display: block;
	 width: 80px;
	 margin-top: 2px;
	 float: left;
 }
 
 /* FORMATANDO INPUT, SELECT E TEXTAREA */
 input, textarea, select {
	 color: #336699;
	 width: 200px;
	 border: solid 1px #006699;
 }
 
 /* SELECT COM LARGURA AUTOMÁTICA */
 select {
	 width: auto;
 }
 
 textarea {
	 height: 100px;
	 overflow: auto; /* BARRA DE ROLAGEM AUTOMÁTICA */
 }
 
 /* FORMATAÇÃO DO BOTÃO */
 button {
	 background: #0099CC;
	 color: #FFF;
	 font-weight: bold;
	 margin-top: 10px;
	 border: none;
 }
 </style>

Caso alguém comente, não utilizei <fieldset> porque acho que para esse tipo de formulário(pequeno e sem grupos) não seja necessário. E também não utilizei <legend> porque não gosto mesmo