<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的使用</title>
</head>
<body>
<h2 align="center"><font color="red" size="5">用户信息表填写</font></h2>
<hr width="820" size="5" color="aquamarine"/>
<br />
<!-- 表单的使用 -->
<form action="#" method="post">
<table border="1" bordercolor="gainsboro" width="800" height="610" cellpadding="5" cellspacing="0" align="center">
<tr>
<th colspan="3" bgcolor="gainsboro" align="left" >1. 用户名和密码</th>
</tr>
<tr>
<td width="120">会员名:</td>
<td><input type="text" name="userName" /><font color="red">*</font></td>
<td><input type="button" value="检查用户" value="butt"/><font color="blue"> 5-15位 大小字母和数字组合</font></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="password" /><font color="red">*</font></td>
<td><font color="blue">5-15位 大小字母和数字组合,不能与用户名相同</font></td>
</tr>
<tr>
<td>再次输入密码:</td>
<td><input type="password" name="password" /><font color="red">*</font></td>
<td><font color="blue">两次密码需一致</font></td>
</tr>
<tr>
<th colspan="3" align="left" bgcolor="gainsboro">2.姓名和联系方式</th>
</tr>
<tr>
<td>真实姓名:</td>
<td><input type="text" name="name" /><font color="red">*</font> </td>
<td>汉子<input type="radio" name="sex" value="男" checked="checked"/>妹子<input type="radio" name="sex" value="女"/></td>
</tr>
<tr>
<td>电子邮箱:</td>
<td><input type="email" name="email" /><font color="red">*</font></td>
<td><font color="red">非常重要!</font>!<br><font color="blue">这是首选的联系方式,请认真填写</font></td>
</tr>
<tr>
<td>固定电话:</td>
<td><input type="number" name="phone" /></td>
<td><font color="blue">区号+电话号码</font></td>
</tr>
<tr>
<td>传真号码:</td>
<td colspan="2"><input type="number" name="portraiture_phone" /></td>
</tr>
<tr>
<td>手机号码:</td>
<td colspan="2"><input type="number" name="call" /><font color="red">*</font></td>
</tr>
<tr>
<td>邮政编码:</td>
<td colspan="2"><input type="number" name="postal" /></td>
</tr>
<tr>
<td>公司所在地:</td>
<td colspan="2">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected="selected">广州</option>
<option value="shenzhen">深圳</option>
</select>
<select name="city_classify">
<option value="tianhe">天河</option>
<option value="jishan" selected="selected">吉山</option>
<option value="chuanzhi">传智</option>
<option value="mengxiang">梦想公寓</option>
</select>
</td>
</tr>
<tr>
<td>街道地址:</td>
<td><input type="text" name="street" /><font color="red">*</font></td>
<td><font color="blue">请填写县(区)</font></td>
</tr>
<tr>
<th colspan="3" align="left" bgcolor="gainsboro">3.公司名称和主营业务</th>
</tr>
<tr>
<td>公司名称:</td>
<td><input type="text" name="corporate_name" /> <font color="red">*</font></td>
<td><font color="blue">请填写在工商部门注册的商号全称</font></td>
</tr>
<tr>
<td>您的职位</td>
<td colspan="2"><input type="text" name="position" /> <font color="red">*</font></td>
</tr>
<tr>
<td>公司网址:</td>
<td colspan="2"><input type="url" name="url" value="http://"/></td>
</tr>
<tr>
<td>主营产品/服务</td>
<td><input type="text" name="classification" /></td>
<td><font color="blue">3个主营产品名称</font></td>
</tr>
<tr>
<td>主营行业</td>
<td >
<select name="trade">
<option value="commerce">电子商务</option>
<option value="electrical">电子电工</option>
<option value="new">新闻媒体</option>
<option value="hotel">酒店服务</option>
</select>
</td>
<td><font color="blue">请正确选择</font></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="image" src="data:images/test.png"/></td>
</tr>
</table>
</form>
<br/>
</body>
</html>
浏览器缩放至90%下效果图
