Adicionar a Meu favorito

Saturday, 17 de April de 2004

::Objetivo::
Mostrar como personalizar um formulário de contato com uso de 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
	* Campos de preenchimento obrigatório

::O HTML do formulário::

Formulário de contato
Nome
*e-mail
Assunto
*Comentários
	* Campos de preenchimento obrigatório

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	... ... ... ... ... ... ... ... ... ...
	* 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:

E escrevo a seguinte regra CSS:
#todoform {
background:#4f4f4f; /* uma 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; /* uma 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:#ff9900; /* 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 15px arial, verdana, helvetica, sans-serif; /*
letras em negrito com 15px e familia arial, verd....*/
border-bottom:1px solid #ff9900; /*
uma borda inferior solida de 1px na cor laranja */
}

::Estilizando os tres campos input::
A regra CSS para os campos é esta:
#todoform input {
background:#b5b5b5; /* a cor do fundo dos três
campos */
border:1px dashed #ff9900; /* uma borda de 1px tracejada
e na cor laranja para o campo */
}

::Estilizando a textarea::
A regra CSS para o campo da mensagem é esta:
#todoform textarea {
background:#b5b5b5; /* a cor do fundo do campo */
border:1px dashed #ff9900; /* uma borda de 1px tracejada
e na cor laranja para o campo */
scrollbar-arrow-color:#ffffff; /* a partir daqui a
estilização da barra de scroll do campo da mensagem */
scrollbar-3dlight-color:#b5b5b5;
scrollbar-highlight-color:#b5b5b5;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#b5b5b5;
scrollbar-darkshadow-color:#b5b5b5;
scrollbar-track-color:#b5b5b5;
}

::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:2px solid #ffffff; /* uma borda de 2px solida e 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.

Formulário de contato
Nome
*e-mail
Assunto
*Comentários
	* Campos de preenchimento obrigatório

::Tutoriais de apoio::
Se você encontrar dificuldade em entender algum assunto de estilização mostrado neste tutorial, indico abaixo tutoriais de apoio por assunto:

Estilizar fundo - TUTORIAL
Estilizar bordas -TUTORIAL
Estilizar fontes - TUTORIAL
Estilizar scrollbar - TUTORIAL

Maurício Samy Silva
www.maujor.com
Um site dedicado as CSS

Outros artigos

Assine o Feed desta categoria

• Modificando o cursor com CSS - 25/03/2004
• Uma visão geral das CSS - 05/03/2004
• CSS - Folhas de estilo em cascata - 16/02/2004
• Sintaxe das regras CSS - 15/02/2004
• Ver mais...

Comentários do artigo [Novo comentário]