Get documents about "Pág. 1 Tutorial CSS + Estilizar um formulario de
Document Sample
Tutorial CSS + Estilizar um formulario de contato Pág. 1
CSS Site do Maujor
Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML,
XHTML, Padrões Web, por Maurício Samy Silva
:: Estilizando um formulário de contato ::
Objetivo
Mostrar como personalizar um formulário de contato com uso de CSS.
Nota de esclarecimento sobre atualização deste tutorial
Escrevi este tutorial em dezembro de 2003 atendendo a pedidos de meus visitantes. Àquela época todos os pedidos citavam um
formulário construido com tabela e por isso o tutorial foi assim escrito.
Felizmente, decorridos um pouco mais de dois anos, as técnicas CSS ganharam força junto aos desenvolvedores brasileiros,
crescendo a cada dia os que aderem às Web Standards.
Assim, mais uma vez atendendo vários pedidos dos meus leitores, desenvolvi uma página web contendo este mesmo formulário,
sem uso de tabela, o que vale frisar é o semanticamente correto.
Este link levará você a uma página com o formulário posicionado com CSS.
Um formulário padrão
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.
Vamos admitir nosso formulário "dentro" de uma tabela, com duas colunas e seis linhas, tudo conforme mostrado abaixo:
Formulário de contato
Nome
*e+mail
Assunto
*Mensagem
Enviar * Campos de preenchimento obrigatório
O HTML do formulário
<form name=" nomedoform" action ="xxxx"
method=" xxxx" >
<table>
<tr>
<th colspan=" 2">Formul ário
de contato </th >
</tr >
<tr>
http://www.maujor.com/tutorial/formContato.php Ter 08 Dez 2009 09:10:22 BRST
Tutorial CSS + Estilizar um formulario de contato Pág. 2
<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 á 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 ó ;rio< /td>
</tr >
</table>
</form>
Nota: 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.
O formulário estilizado
Abaixo o formulário pronto, com as regras CSS aplicadas. Mostro o formulário desde já, para que você tenha uma noção
antecipada do final e com isto facilitar o entendimento do tutorial a medida que for lendo.
Formulário de contato
Nome
*e+mail
Assunto
...
...
...
*Comentários ...
...
...
...
...
Enviar * Campos de preenchimento obrigatório
Estilizando a "caixa" que contém o formulário
A "caixa" que contém o formulário é a Tabela.
Para estilizar a tabela vamos atribuir+lhe uma id e escrever regras CSS para esta id. Escolhi o nome da id todoform
Acresento no HTML: <table id="todoform">
E escrevo a seguinte regra CSS:
http://www.maujor.com/tutorial/formContato.php Ter 08 Dez 2009 09:10:22 BRST
Tutorial CSS + Estilizar um formulario de contato Pág. 3
E escrevo a seguinte regra CSS:
#todoform {
background:# 4f4f4 f;
/* cor escura para o fundo do formulário */
font:12px arial, verdana, helvetica, sans+serif ;
/* o tamanho e o tipo da fonte no formulário */
border+top :8px solid # cfcfcf;
/* borda superior de 8px solida na cor cinza clara
no formulário */
border+left: 8px solid #cfcfcf;
/* a borda esquerda do formulário */
border+right :8px solid #696969 ;
/* a borda direita do formulário * /
border+bottom :8px solid #696969 ;
* a borda inferior do formulário * /
border+collapse: collapse;
/* retira as bordas duplas nas células da tabela */
color:#ff 9900; /* a cor laranja para as letras */
}
Estilizando o título
O título: "Formulário de contato" está contido dentro da tag th da Tabela.
A regra CSS para o título é esta:
#todoform th {
background:# 000000;
/* a cor preta para o fundo do título * /
padding: 3px;
/* um afastamento de 3px * /
font: bold 15 px arial , verdana , helvetica, sans+serif;
/* letras em negrito com 15 px e familia arial, verd. ...*/
border+bottom :1px solid #ff 9900;
/* uma borda inferior solida de 1px na cor laranja * /
}
Estilizando os tres campos input
A regra CSS para os campos é esta:
#todoform input {
background:# b5b5b 5;
/* a cor do fundo dos três campos */
border:1 px dashed #ff9900;
/* uma borda de 1 px tracejada e na cor laranja para
o campo */
}
Estilizando a textarea
A regra CSS para o campo da mensagem é esta:
#todoform textarea {
background: #b5b5 b5;
http://www.maujor.com/tutorial/formContato.php Ter 08 Dez 2009 09:10:22 BRST
Tutorial CSS + Estilizar um formulario de contato Pág. 4
#todoform textarea {
background: #b5b5 b5;
/* a cor do fundo do campo */
border:1 px dashed #ff9900;
/* uma borda de 1 px tracejada e na cor
laranja para o campo */
}
Estilizando o botão enviar
A regra CSS para o botão é esta:
#todoform input .botao {
background:# 000000;
/* a cor do fundo do botão */
color:#ffffff ; /* a cor das letras Enviar * /
border:2 px solid #ffffff;
/* uma borda de 2 px solida branca no botão*/
}
Um toque final
E, para que os campos não fiquem tão colados nos nomes dos campos acresentamos um espaçamento de 3px nas células
A regra CSS para o espaçamento é esta:
#todoform td {
padding: 3px;
}
O código pronto
E, a seguir o código completo de uma página com o formulário estilizado, para você copiar+colar, ESTUDAR e adaptar para suas
necessidades..
<html>
<head>
<title>Formul á rio estilizado</title >
<meta http+equiv ="Content +Type" content ="text/html;
charset= iso+8859+ 1"><style type="text/css ">
#todoform {
background:# 4f4f4 f;
font:12px arial, verdana, helvetica, sans+serif ;
border+top :8px solid # cfcfcf;
border+left: 8px solid #cfcfcf;
border+right :8px solid #696969 ;
border+bottom :8px solid #696969 ;
border+collapse: collapse;
color:#ff 9900;
}
#todoform th {
background:# 000000;
padding: 3px;
font: bold 15 px arial , verdana , helvetica, sans+serif;
border+bottom :1px solid #ff 9900;
}
#todoform td {
padding: 3px;
}
#todoform input {
background:# b5b5b 5;
border:1 px dashed #ff9900;
}
#todoform textarea {
http://www.maujor.com/tutorial/formContato.php Ter 08 Dez 2009 09:10:22 BRST
Tutorial CSS + Estilizar um formulario de contato Pág. 5
#todoform textarea {
border:1 px dashed #ff9900;
background:# b5b5b 5;
}
#todoform input. botao {
background:# 000000;
color:#ffffff ;
border:2 px solid #ffffff;
}
</style>
</head>
<body>
<form name=" nomedoform" action ="" method="" >
<table id ="todoform">
<tr>
<th colspan=" 2">Formul á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ó ;rio </td>
</tr >
</table>
</form>
</body>
</html>
Tutoriais de apoio
Se você encontrar dificuldade em entender algum assunto de estilização mostrado neste tutorial, indico abaixo tutoriais de apoio por
assunto:
Tutorial + estilizar fundo
Tutorial + estilizar bordas
Tutorial + estilizar fontes
Retweet this post
Última modificação: 2007/09/5 15:32:54 GMT
http://www.maujor.com/tutorial/formContato.php Ter 08 Dez 2009 09:10:22 BRST
