Advanced Search

Good Looking Form

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. *{ margin:0; padding:0;}
  2. body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
  3. form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
  4.  
  5. div.box {
  6. margin:0 auto;
  7. width:500px;
  8. background:#222222;
  9. position:relative;
  10. top:50px;
  11. border:1px solid #262626;
  12. }
  13.  
  14. div.box h1 { 
  15. color:#ffffff;
  16. font-size:18px;
  17. text-transform:uppercase;
  18. padding:5px 0 5px 5px;
  19. border-bottom:1px solid #161712;
  20. border-top:1px solid #161712; 
  21. }
  22.  
  23. div.box label {
  24. width:100%;
  25. display: block;
  26. background:#1C1C1C;
  27. border-top:1px solid #262626;
  28. border-bottom:1px solid #161712;
  29. padding:10px 0 10px 0;
  30. }
  31.  
  32. div.box label span {
  33. display: block;
  34. color:#bbbbbb;
  35. font-size:12px;
  36. float:left;
  37. width:100px;
  38. text-align:right;
  39. padding:5px 20px 0 0;
  40. }
  41.  
  42. div.box .input_text {
  43. padding:10px 10px;
  44. width:200px;
  45. background:#262626;
  46. border-bottom: 1px double #171717;
  47. border-top: 1px double #171717;
  48. border-left:1px double #333333;
  49. border-right:1px double #333333;
  50. }
  51.  
  52. div.box .message{
  53. padding:7px 7px;
  54. width:350px;
  55. background:#262626;
  56. border-bottom: 1px double #171717;
  57. border-top: 1px double #171717;
  58. border-left:1px double #333333;
  59. border-right:1px double #333333;
  60. overflow:hidden;
  61. height:150px;
  62. }
  63.  
  64. div.box .button
  65. {
  66. margin:0 0 10px 0;
  67. padding:4px 7px;
  68. background:#CC0000;
  69. border:0px;
  70. position: relative;
  71. top:10px;
  72. left:382px;
  73. width:100px;
  74. border-bottom: 1px double #660000;
  75. border-top: 1px double #660000;
  76. border-left:1px double #FF0033;
  77. border-right:1px double #FF0033;
  78. <!---------------CSS----------------------->
  79.  
  80. <!--------------HTML-------------------->
  81.  
  82.  
  83. <form>
  84.           <div class="box">
  85.             <h1>Contact Form :</h1>
  86.             <label>
  87.                <span>Full name</span>
  88.                <input type="text" class="input_text" name="name" id="name"/>
  89.             </label>
  90.              <label>
  91.                <span>Email</span>
  92.                <input type="text" class="input_text" name="email" id="email"/>
  93.             </label>
  94.              <label>
  95.                 <span>Subject</span>
  96.                 <input type="text" class="input_text" name="subject" id="subject"/>
  97.             </label>
  98.             <label>
  99.                 <span>Message</span>
  100.                 <textarea class="message" name="feedback" id="feedback"></textarea>
  101.                 <input type="button" class="button" value="Submit Form" />
  102.             </label>
  103.  
  104.  
  105.          </div>
  106.     </form>

URL: http://aceinfowayindia.com/blog/2009/06/how-create-good-looking-form-without-table/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.