Thiago Vitorino

As tags de um formulário

Vamos abordar apenas as tags relacionadas aos formulários neste final de artigo. Técnicas javascript não fazem parte do assunto. Vamos focar apenas em XHTML 1.0 Strict + CSS.
Para isso criaremos um demonstrativo contendo toda variedade de tags de normalmente achadas em formulários: input, select, option, optgroup, textarea, label, fieldset e legend

Pequeno Pupilo: Pra que tudo isso vitorino-sensei?

A idéia é disponibilizar um modelo de formulário versátil, cujos componentes você poderá separar e utilizar na criação de uma grande variedade de formulários com rapidez.

Criando o XHTML demonstrativo

Esse é apenas um exemplo, mas vamos separar nossos campos por categorias bem definidas por fieldsets e organizar nosso formulário com uma lista de definição, como vimos na parte 1 de nosso artigo.
Por exemplo:

<form method="post" action="#" class="vForm" >
<fieldset>
<legend>Pessoal</legend>
<dl>
	
  <dt><label for="id_nome">Nome</label></dt>
  <dd><input type="text" id="id_nome" name="nome" /></dd>
		
  <dt><label for="id_email">E-mail</label></dt>
  <dd><input type="text" id="id_email" name="email" /></dd>
		
  <dt><label for="id_login">Login</label></dt>
  <dd><input type="text" id="id_login" name="login" /></dd>
		
  <dt><label for="id_pass">Senha</label></dt>
  <dd><input type="password" id="id_pass" name="pass" /></dd>
	
</dl>
</fieldset>
</form>

A propriedade "class=vForm", dentro da tag form nos ajudará a formatar esse formulário, sem tocar nos demais formulários do site.

Formulário demonstrativo completo

Para não esticar muito a página, aqui está o formulário demonstrativo completo, validado e sem formatação css:
strict_form_002_no_css.html

Aplicando o estilo CSS

Onde estão as tags "< title >Exemplo de Formulário</ title >" e "</ head >", vamos inserir nossa formatação CSS.
No final desse artigo disponibilizarei um arquivo CSS separado, com nosso progresso:

<title>Exemplo de Formulário</title>
<style type="text/css" media="all">
</style>
</head>

Originally posted by Pequeno Pupilo:

Beleza vamos botar a mão na massa!

Pequenos preparativos e começando o formato de nosso formulário

Removendo todas as bordas, margens, espaçamentos internos e outlines de todos os elementos, para não ter dificuldades com as variações entre navegadores.

<title>Exemplo de Formulário</title>
<style type="text/css" media="all">
*
{
	border:0px;
	margin:0px;
	padding:0px;
	outline:0px;
}
</style>
</head>

Continuando a escrever o código CSS dentro da tag Style, vamos criar a formatação de tudo dentro do formulário de classe .vForm, com comentários no próprio código:

/* padrão do formulário */
form.vForm 
{
	text-align:left;
	width:480px;
	background:#D5E9EE;
}

/* definindo os detalhes do fieldset */
form.vForm fieldset
{
	
	border-top:1px #aaa solid;
	padding:10px 0px;
	margin:5px 0px;
	
}

/* legenda do fieldset */
form.vForm legend
{
	
	margin:0px 10px 0px 10px;
	padding:0px 10px;
	font-weight:bold;
}

/* o padrão de todos os inputs */
form.vForm input
{
	border-left:1px solid #444;
	border-top:1px solid #555;
	border-right:1px solid #ccc;
	border-bottom:1px solid #bbb;
	width:280px;
}

/* para o uso de um input menor, como o Estado */
form.vForm input.menor
{
	width:30px;
}

/* para o uso de um input maior, sem alcansar o tamanho máximo */
form.vForm input.grande
{
	width:240px;
	margin-right:5px;
}

/* para o uso de um input de tamanho médio */
form.vForm input.medio
{
	width:180px;
	margin-right:5px;
}

/* Radios e Checkboxes */
form.vForm input.radio, form.vForm input.checkbox
{
	clear:both;
	width:15px;	
	margin:3px 3px;
	float:left;
	border:0px;
}

/* variação dos labels para radios e checkboxes */
form.vForm label.radio, form.vForm label.checkbox
{
	margin:3px 3px;
	float:left;
	width:270px;
}

/* formatação especial para os inputs do tipo botão */
form.vForm input.button
{
	
	width:100px;
	margin:0px 5px;
	color:#fff;
	background:#A9AE4D;
	border-left:1px solid #bbb;
	border-top:1px solid #ccc;
	border-right:1px solid #666;
	border-bottom:1px solid #555;
	cursor:pointer;
}

/* tag select no padrão dos inputs */
form.vForm select
{
	width:280px;
	border-left:1px solid #444;
	border-top:1px solid #555;
	border-right:1px solid #ccc;
	border-bottom:1px solid #bbb;
}

/* categorias de options */
form.vForm optgroup
{
	font-style:italic;
	font-size:1.1em;
}

/* tag option para a tag select */
form.vForm option
{
	color:#000;
	font-style:normal;
	font-size:1.0em;
}

/* padrão das textareas, seguindo o padrão input */
form.vForm textarea
{
	width:280px;
	height:130px;
	border-left:1px solid #444;
	border-top:1px solid #555;
	border-right:1px solid #ccc;
	border-bottom:1px solid #bbb;
}

/* criando o alinhamento horizontal entre labels e forms */
form.vForm dl dt
{
	clear:both;
	float:left;
	text-align:right;
	width:160px;
	margin:7px 5px;
}


/* criando uma opção de comentários especiais para labels */
form.vForm dl dt em
{
	display:block;
	color:#777;
	font-size:0.8em;
}

/* criando opção de comentário na coluna da direita também */
form.vForm dl dd em
{
	color:#777;
	font-size:0.8em;
}

/* terminado o alinhamento "lado-a-lado" com a tag de definição */
form.vForm dl dd
{
	float:left;
	text-align:left;
	width:300px;
	margin:7px 5px;
}

/* Limpando os floats */
.clear
{ clear:both; }

Resultados

O resultado final, bem como os arquivos usados nesse tutorial estão aqui, para visualização e download:
strict_form_002_css_aolado.html
aolado.css
vForm strict com css - Thiago Vitorino.zip

Espero que tenham gostado!
Grande abraço!