Pág. 1 Tutorial CSS + Estilizar um formulario de

Document Sample
Pág. 1 Tutorial CSS + Estilizar um formulario de Powered By Docstoc
					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 &aacute;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 &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>

   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 &aacute; 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 &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>
   </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

				
DOCUMENT INFO
Shared By:
Stats:
views:1060
posted:2/1/2010
language:Unknown
pages:5