首页 > 代码库 > html的表单表格...

html的表单表格...

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>表单的使用</title>
  6     </head>
  7     <body>
  8         <h2 align="center"><font color="red" size="5">用户信息表填写</font></h2>
  9         <hr width="820" size="5" color="aquamarine"/>
 10         <br />
 11         <!-- 表单的使用     -->
 12         <form action="#" method="post">
 13             <table border="1" bordercolor="gainsboro" width="800" height="610" cellpadding="5"  cellspacing="0" align="center">
 14                 <tr>
 15                     <th colspan="3" bgcolor="gainsboro" align="left" >1. 用户名和密码</th>
 16                 </tr>
 17                 <tr>
 18                     <td width="120">会员名:</td>
 19                     <td><input type="text" name="userName" /><font color="red">*</font></td>
 20                     <td><input type="button" value="检查用户" value="butt"/><font color="blue">&nbsp;5-15位&nbsp;&nbsp;大小字母和数字组合</font></td>
 21                 </tr>
 22                 <tr>
 23                     <td>密 码:</td>
 24                     <td><input type="password" name="password" /><font color="red">*</font></td>
 25                     <td><font color="blue">5-15位&nbsp;&nbsp;大小字母和数字组合,不能与用户名相同</font></td>
 26                 </tr>
 27                 <tr>
 28                     <td>再次输入密码:</td>
 29                     <td><input type="password" name="password" /><font color="red">*</font></td>
 30                     <td><font color="blue">两次密码需一致</font></td>
 31                 </tr>
 32                 <tr>
 33                     <th colspan="3" align="left" bgcolor="gainsboro">2.姓名和联系方式</th>
 34                 </tr>
 35                 <tr>
 36                     <td>真实姓名:</td>
 37                     <td><input type="text" name="name" /><font color="red">*</font> </td>
 38                     <td>汉子<input type="radio" name="sex" value="男" checked="checked"/>妹子<input type="radio" name="sex" value="女"/></td>
 39                 </tr>
 40                 <tr>
 41                     <td>电子邮箱:</td>
 42                     <td><input type="email" name="email" /><font color="red">*</font></td>
 43                     <td><font color="red">非常重要!</font>!<br><font color="blue">这是首选的联系方式,请认真填写</font></td>
 44                 </tr>
 45                 <tr>
 46                     <td>固定电话:</td>
 47                     <td><input type="number" name="phone" /></td>
 48                     <td><font color="blue">区号+电话号码</font></td>
 49                 </tr>
 50                 <tr>
 51                     <td>传真号码:</td>
 52                     <td colspan="2"><input type="number" name="portraiture_phone" /></td>
 53                 </tr>
 54                 <tr>
 55                     <td>手机号码:</td>
 56                     <td colspan="2"><input type="number" name="call" /><font color="red">*</font></td>
 57                 </tr>        
 58                 <tr>
 59                     <td>邮政编码:</td>
 60                     <td colspan="2"><input type="number" name="postal" /></td>
 61                 </tr>
 62                 <tr>
 63                     <td>公司所在地:</td>
 64                     <td colspan="2">
 65                         <select name="city">
 66                             <option value="beijing">北京</option>
 67                             <option value="shanghai">上海</option>
 68                             <option value="guangzhou" selected="selected">广州</option>
 69                             <option value="shenzhen">深圳</option>                
 70                         </select>
 71                         <select name="city_classify">
 72                             <option value="tianhe">天河</option>
 73                             <option value="jishan" selected="selected">吉山</option>
 74                             <option value="chuanzhi">传智</option>
 75                             <option value="mengxiang">梦想公寓</option>                
 76                         </select>
 77                     </td>
 78                 </tr>
 79                 <tr>
 80                     <td>街道地址:</td>
 81                     <td><input type="text" name="street" /><font color="red">*</font></td>
 82                     <td><font color="blue">请填写县(区)</font></td>
 83                 </tr>
 84                 <tr>
 85                     <th colspan="3" align="left" bgcolor="gainsboro">3.公司名称和主营业务</th>
 86                 </tr>
 87                 <tr>
 88                     <td>公司名称:</td>
 89                     <td><input type="text" name="corporate_name" /> <font color="red">*</font></td>
 90                     <td><font color="blue">请填写在工商部门注册的商号全称</font></td>
 91                 </tr>
 92                 <tr>
 93                     <td>您的职位</td>
 94                     <td  colspan="2"><input type="text" name="position" /> <font color="red">*</font></td>
 95                 </tr>
 96                 <tr>
 97                     <td>公司网址:</td>
 98                     <td colspan="2"><input type="url" name="url"  value="http://"/></td>
 99                 </tr>    
100                 <tr>
101                     <td>主营产品/服务</td>
102                     <td><input type="text" name="classification" /></td>
103                     <td><font color="blue">3个主营产品名称</font></td>
104                 </tr>            
105                 <tr>
106                     <td>主营行业</td>
107                     <td >
108                        <select name="trade">
109                             <option value="commerce">电子商务</option>
110                             <option value="electrical">电子电工</option>
111                             <option value="new">新闻媒体</option>
112                             <option value="hotel">酒店服务</option>                
113                         </select>
114                     </td>
115                     <td><font color="blue">请正确选择</font></td>
116                 </tr>
117                 <tr>
118                     <td colspan="3" align="center"><input type="image"  src="images/test.png"/></td>
119                 </tr>    
120             </table>
121         </form>
122         <br/>
123     </body>
124 </html>

浏览器缩放至90%下效果图

技术分享

html的表单表格...