Olá! Tuesday, 11 de December de 2018.



Dicas CódigoFonte.net
Saturday, 17 de April de 2004

CSS em Formularios

::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
* Campos de preenchimento obrigatório

::O HTML do formulário::
Formulário de contato
* 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
* 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&aacute;rio estilizado
Formul&aacute;rio de contato
* Campos de preenchimento obrigat&oacute;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


Comentários do artigo [Novo comentário]

Pescadores - 09 de August de 2009 - 15:35
mas no final das contas, ao enviar o comentario vai para qual e-mail?
Maico J silva - 14 de October de 2009 - 11:03
mas no final das contas, ao enviar o comentario vai para qual e-mail? [2]
Fabio Chaves Alves da Fonseca - 26 de October de 2009 - 13:29
Amigo,
para qual e-mail será enviado, hein!

Abração!
Felipe C. - 01 de July de 2010 - 15:22
Uê, ele esqueceu desse PEQUENO detalhe.

<input type=hidden name="recipient" value="[email protected]">
<input type=hidden name="subject" value="Nome cabeçalho">
<input type=hidden name="redirect" value="http://meusite.com.br/obrigado.htm"/>
Gabriel - 27 de October de 2010 - 10:17
ponho onde isto
<input type=hidden name="recipient" value="[email protected]"> <input type=hidden name="subject" value="Nome cabeçalho"> <input type=hidden name="redirect" value="http://meusite.com.br/obrigado.htm"/>
João Marcello Pessanha Peixoto - 25 de May de 2011 - 14:15
Verdade, faltou o e-mail. Estou querendo aplicar o código mais preciso desta informação.
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010