CSS em Formularios

Marcadores:


 
::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::
  2. <form name="nomedoform" action="xxxx"
  3. method="xxxx" >
  4. <table>
  5. <tr>
  6. <th colspan="2">Formul&amp;aacute;rio de contato
  7. </th>
  8. </tr>
  9. <tr>
  10. <td><label for="nome">Nome</label></td>
  11. <td><input name="nome" type=text size="33"
  12. maxlength="1000"></td>
  13. </tr>
  14. <tr>
  15. <td><label for="email">*e-mail</label></td>
  16. <td><input name="email" type=text size="33"
  17. maxlength="1000"></td>
  18. </tr>
  19. <tr>
  20. <td><label for="assunto">Assunto</label></td>
  21. <td><input name="subject" type=text size="33"
  22. maxlength="1000"></td>
  23. </tr>
  24. <tr>
  25. <td><label for="comentario">*Coment&amp;aacute;rios</label></td>
  26. <td><textarea name="comentario" cols="25"
  27. rows="7" ></textarea></td>
  28. </tr>
  29. <tr>
  30. <td><input name="submit" type="submit"
  31. value="Enviar" class="botao"></td>
  32. <td>* Campos de preenchimento obrigat&amp;oacute;rio</td>
  33. </tr>
  34. </table>
  35. </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
* 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:
  1. <table id="todoform">


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:
  1. #todoform input.botao {
  2.       background:#000000; /* a cor do fundo do bot&atilde;o
  3.       */
  4.       color:#ffffff; /* a cor das letras Enviar */
  5.       border:2px solid #ffffff; /* uma borda de 2px
  6.       solida e branca no bot&atilde;o*/
  7.       }


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

  1. <html>
  2. <head>
  3. <title>Formul&amp;aacute;rio estilizado</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <style type="text/css">
  6. #todoform {
  7. background:#4f4f4f;
  8. font:12px arial, verdana, helvetica, sans-serif;
  9. border-top:8px solid #cfcfcf;
  10. border-left:8px solid #cfcfcf;
  11. border-right:8px solid #696969;
  12. border-bottom:8px solid #696969;
  13. border-collapse:collapse;
  14. color:#ff9900;
  15. }
  16. #todoform th {
  17. background:#000000;
  18. padding:3px;
  19. font: bold 15px arial, verdana, helvetica, sans-serif;
  20. border-bottom:1px solid #ff9900;
  21. }
  22. #todoform td {
  23. padding:3px;
  24. }
  25. #todoform input {
  26. background:#b5b5b5;
  27. border:1px dashed #ff9900;
  28. }
  29. #todoform textarea {
  30. border:1px dashed #ff9900;
  31. background:#b5b5b5;
  32. scrollbar-arrow-color:#ffffff;
  33. scrollbar-3dlight-color:#b5b5b5;
  34. scrollbar-highlight-color:#b5b5b5;
  35. scrollbar-face-color:#000000;
  36. scrollbar-shadow-color:#b5b5b5;
  37. scrollbar-darkshadow-color:#b5b5b5;
  38. scrollbar-track-color:#b5b5b5;
  39. }
  40. #todoform input.botao {
  41. background:#000000;
  42. color:#ffffff;
  43. border:2px solid #ffffff;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <form name="nomedoform" action="" method="" >
  49. <table id="todoform">
  50. <tr>
  51. <th colspan="2">Formul&amp;aacute;rio de contato</th>
  52. </tr>
  53. <tr>
  54. <td><label for="nome">Nome</label></td>
  55. <td><input name="nome" type=text  size="33" maxlength="1000"></td>
  56. </tr>
  57. <tr>
  58. <td><label for="email">*e-mail</label> </td>
  59. <td><input name="email" type=text size="33" maxlength="1000"> </td>
  60. </tr>
  61. <tr>
  62. <td><label for="assunto">Assunto</label> </td>
  63. <td><input name="subject" type=text size="33" maxlength="1000"> </td>
  64. </tr>
  65. <tr>
  66. <td><label for="comentario">*Coment&amp;aacute;rios</label> </td>
  67. <td><textarea name="comentario" cols="25" rows="7" ></textarea> </td>
  68. </tr>
  69. <tr>
  70. <td><input name="submit" type="submit" value="Enviar" class="botao"> </td>
  71. <td>* Campos de preenchimento obrigat&amp;oacute;rio</td>
  72. </tr>
  73. </table>
  74. </form>
  75. </body>
  76. </html> 
     


Comentários

Anterior Proxima Página inicial
Assinar: Postar comentários (Atom)