用表格实现的表单

重点：

  一：表格的几个属性：cellspacing，cellpadding，border

  二：内联元素（span）转为块级元素，并设定float值。（真正设计整个页面时，这种方法应该不适合，float属性比较难驾驭）

  三：整个form的框架content, border（粗框架形成元素背景的效果）, padding

  四：用了CSS3的新属性border-radius，为了在不同的浏览器兼容，加上这段代码

        -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;

 

整体效果：

 

代码：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>This is my Page!</title>
 5         <meta charset="gb2312" />
 6         <style>
 7             * {margin:0; padding:0}
 8             body {font-family:Arial; font-size:15px; background:#cccccc; color:rgb(255,255,255)}
 9             #header {height:60px; background:rgb(0,0,0);}
10             #header h2 {line-height:60px; margin-left:250px;}
11             #header h2 span {display:block; font-size:18px; margin-right:200px; float:right}
12             #header h2 span a {font-size:25px; text-decoration:none;color:rgb(255,255,255) }
13             #form {width:350px; margin:10px auto; padding:15px; background:#555; border:20px solid rgb(0,0,0);}
14             .input {-moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-style:solid; border-color:rgb(180,207,94)}
15         </style>
16   </head>
17   <body>
18       <div id="header">
19           <h2>Form Validation with JS and PHP<span>Back to orginal tutorials on&nbsp;<a href="#">Script Tutorials</a></span></h2>         
20       </div>
21       
22       <form id="form" method="post" action="index.php" onsubmit="function();">
23           <table cellspacing="15">
24               <tr>
25                   <td>Login</td>
26                   <td><input type="text" name="login" id="login" maxlength="25" class="input" /><div id="login_length"></div></td>
27               </tr>
28               <tr>
29                   <td>Password</td>
30                   <td><input type="password" name="pass" id="password" maxlength="25" class="input" /><div id="pass_length"></div></td>
31               </tr>
32               <tr>
33                   <td>ConfirmPassword</td>
34                   <td><input type="password" name="cpass" id="cpassword" maxlength="25" class="input" /></div></td>
35               </tr>
36               <tr>
37                   <td>Gender</td>
38                   <td>
39                       <select name="Gender" class="input" >
40                           <option value="1">male</option>
41                           <option value="0">female</option>
42                     </select>
43                   </td>
44               </tr>
45               <tr>
46                   <td>Email</td>
47                   <td><input type="text" name="email" id="email" maxlength="50" class="input" /></td>
48               </tr>
49         </table>
50     </form>
51  
52   </body>
53 </html>

参考资料：

http://www.script-tutorials.com/form-validation-with-javascript-and-php/

posted @ 2012-10-23 09:51  伊晗翾  阅读(215)  评论(0)  编辑  收藏  举报