实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="2" color="#ccc" cellspacing="5" cellpading="5" width="500px">
<!-- 第一行 -->
<tr>
<td colspan="2" align="center">邮箱会员注册</td>
</tr>
<!-- 第二行 -->
<tr>
<td >
用户名:
</td>
<td>
<input type="text">
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>
密码:
</td>
<td>
<input type="password">
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>
确定密码:
</td>
<td>
<input type="password">
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex" >女
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>Email:</td>
<td><input type="text"></td>
</tr>
<!-- 第7行 -->
<tr>
<td>Phone:</td>
<td><input type="text"></td>
</tr>
<!-- 第8行 -->
<tr>
<td>年龄:</td>
<td><input type="text"></td>
</tr>
<!-- 第9行 -->
<tr>
<td>专业:</td>
<td>
<select>
<option>computer</option>
<option>english</option>
<option>Ai</option>
<option>web</option>
</select>
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>爱好:</td>
<td>
<input type="checkbox">户外
<input type="checkbox">音乐
<input type="checkbox">购物
<input type="checkbox">其他
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>所在地:</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>河南</option>
<option>河北</option>
</select>
</td>
</tr>
<!-- 第12行 -->
<tr>
<td>备注:</td>
<td><textarea></textarea></td>
</tr>
<!-- 第13行 -->
<tr>
<td colspan="2" align="center">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</body>
</html>
效果图:
在以后写的时候呢,要注意表格的name不能少…不然单选就变成多选了…