Posted By

KF on 09/22/09


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

KF
satsuma


TableLess Forms


 / Published in: HTML
 

URL: http://www.roscripts.com/Tableless_forms-112.html

  1. body {
  2. background-color:#F7F7F7;
  3. }
  4. fieldset {
  5. border:1px dashed #CCC;
  6. padding:10px;
  7. }
  8. legend {
  9. font-family:Arial, Helvetica, sans-serif;
  10. font-size: 90%;
  11. letter-spacing: -1px;
  12. font-weight: bold;
  13. line-height: 1.1;
  14. color:#fff;
  15. background: #666;
  16. border: 1px solid #333;
  17. padding: 2px 6px;
  18. }
  19. h1 {
  20. font-family:Arial, Helvetica, sans-serif;
  21. font-size: 175%;
  22. letter-spacing: -1px;
  23. font-weight: normal;
  24. line-height: 1.1;
  25. color:#333;
  26. }
  27. label {
  28. width:142px;
  29. height:32px;
  30. margin-top:3px;
  31. margin-right:2px;
  32. padding-top:11px;
  33. padding-left:6px;
  34. background-color:#CCCCCC;
  35. float:left;
  36. display: block;
  37. font-family:Arial, Helvetica, sans-serif;
  38. font-size: 115%;
  39. letter-spacing: -1px;
  40. font-weight: normal;
  41. line-height: 1.1;
  42. color:#666;
  43. }
  44. .form {
  45. margin:0;
  46. padding:0;
  47. }
  48. #container {
  49. width:750px;
  50. margin:auto;
  51. padding:10px;
  52. }
  53. #top {
  54. width:680px;
  55. height:50px;
  56. }
  57. #leftSide {
  58. width:530px;
  59. padding-top:30px;
  60. float:left;
  61. }
  62. #rightSide {
  63. background-color:#fff;
  64. width:200px;
  65. padding:5px;
  66. margin-top:40px;
  67. float:right;
  68. border:1px solid #CCC;
  69. font:normal 12px Arial;
  70. color:#666666
  71. }
  72. .clear {
  73. clear:both;
  74. }
  75. .holder {
  76. background-color:#fff;
  77.  
  78. }
  79. .div_texbox {
  80. width:347px;
  81. float:right;
  82. background-color:#E6E6E6;
  83. height:35px;
  84. margin-top:3px;
  85. padding-top:5px;
  86. padding-bottom:3px;
  87. padding-left:5px;
  88. }
  89.  
  90. .textbox {
  91. background-image: url(images/16t.png);
  92. background-repeat: no-repeat;
  93. background-position:left;
  94. width:285px;
  95. font:normal 18px Arial;
  96. color: #999999;
  97. padding:3px 5px 3px 19px;
  98. }
  99. .textbox:focus, .textbox:hover {
  100. background-color:#F0FFE6;
  101. }
  102.  
  103. .username {
  104. background-image: url(images/16m.png);
  105. background-repeat: no-repeat;
  106. background-position:left;
  107. width:285px;
  108. font:normal 18px Arial;
  109. color: #999999;
  110. padding:3px 5px 3px 19px;
  111. }
  112. .username:focus, .username:hover {
  113. background-color:#F0FFE6;
  114. }
  115.  
  116. .password {
  117. background-image: url(images/16s.png);
  118. background-repeat: no-repeat;
  119. background-position:left;
  120. width:285px;
  121. font:normal 18px Arial;
  122. color: #999999;
  123. padding:3px 5px 3px 19px;
  124. }
  125. .password:focus, .password:hover {
  126. background-color:#F0FFE6;
  127. }
  128.  
  129. .button_div {
  130. width:287px;
  131. float:right;
  132. background-color:#fff;
  133. border:1px solid #ccc;
  134. text-align:right;
  135. height:35px;
  136. margin-top:3px;
  137. padding:5px 32px 3px;
  138. }
  139. .buttons {
  140. background: #e3e3db;
  141. font-size:12px;
  142. color: #989070;
  143. padding: 6px 14px;
  144. border-width: 2px;
  145. border-style: solid;
  146. border-color: #fff #d8d8d0 #d8d8d0 #fff;
  147. text-decoration: none;
  148. text-transform:uppercase;
  149. font-weight:bold;
  150. }
  151.  
  152.  
  153.  
  154. <div id="container">
  155. <div id="top">
  156. <h1>Please complete the form below</h1>
  157. </div>
  158. <div id="leftSide">
  159. <legend>Login details</legend>
  160. <form action="login.php" method="POST" class="form">
  161. <label for="username">Username</label>
  162. <div class="div_texbox">
  163. <input name="username" type="text" class="username" id="username" value="username" />
  164. </div>
  165. <label for="password">Password</label>
  166. <div class="div_texbox">
  167. <input name="password" type="password" class="password" id="password" value="password" />
  168. </div>
  169. <div class="buuton_div">
  170. <input name="Submit" type="button" value="Submit" class="buttons" />
  171. </div>
  172. </form>
  173. <br /><hr size="1"><br />
  174. <legend>Personal details</legend>
  175. <form action="pay.php" method="POST" class="form">
  176. <label for="name">Name</label>
  177. <div class="div_texbox">
  178. <input name="name" type="text" class="textbox" id="name" value="John Doe" />
  179. </div>
  180. <label for="address">Address</label>
  181. <div class="div_texbox">
  182. <input name="address" type="text" class="textbox" id="address" value="12 main" />
  183. </div>
  184. <label for="city">City</label>
  185. <div class="div_texbox">
  186. <input name="city" type="text" class="textbox" id="city" value="Rochester" />
  187. </div>
  188. <label for="country">Country</label>
  189. <div class="div_texbox">
  190. <input name="country" type="text" class="textbox" id="country" value="United States" />
  191. </div>
  192. <div class="button_div">
  193. <input name="Submit" type="button" value="Submit" class="buttons" />
  194. </div>
  195. </form>
  196. </div>
  197. <div id="rightSide">
  198. <p><u>This is the right side div that can be used for showing info's in order to help the visitor.</u> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  199. </p></div>
  200. <div class="clear"></div>
  201. </div>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: dbitupan on October 28, 2009

Nice One

You need to login to post a comment.