Css - Criando formulários de contatos estilizados

Vamos aprender nesse tutorial a criar um formulário em CSS todo estilizado. Bem interessnate esta dica poism podemos mudar toda a estrutura do nosso formulário, trocar cores, fundos, etc...Então vamos lá...


Um formulário de contato típico consta de: três campos de input para texto: nome, e-mail e assunto; um campo textarea para o texto da mensagem; um input tipo botão para envio da mensagem.

O HTML do formulário:

<form name="nomedoform" action="xxxx" 
method="xxxx" >
<table>
<tr> 
<th colspan="2">Formul&aacute;rio 
de contato</th>
</tr>
<tr> 
<td><label>Nome</label></td>
<td><input name="nome" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>*e-mail</label></td>
<td><input name="email" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>Assunto</label></td>
<td><input name="subject" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>*Coment&aacute;rios</label>
</td>
<td><textarea name="comentario" cols="25" 
rows="7" >
</textarea>
</td>
</tr>
<tr> 
<td><input name="submit" type="submit" 
value="Enviar" 
class="botao">
</td>
<td>*Campos de preenchimento obrigat&oacute;rio</td>
</tr>
</table>
</form>

Este é o HTML da tabela mostrada acima. Para efeito de clareza coloquei um cellpadding e uma borda na tabela mostrada e que não constam do HTML. Em consequência se você copiar-colar o HTML acima, não verá as bordas da tabela e elas não interessam para nosso tutorial.

Confira o resto deste tutorial no site do Maujor

Valeu galera...