<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>用表格布局实现用户注册表单</title>
</head>
<body>
<form action="" method="post"></form>
<table border="0" cellspacing="0" cellpadding="8" align="center" width="400px" bgcolor="#b0e0e6">
<caption><h2>用户注册</h2></caption>
<tr align="center">
<!--通过lable标签与input标签关联实现焦点的捆绑-->
<td align="right" width="60"><lable for="email">邮箱:</lable></td>
<td align="left" width="300"><input type="text" id="email" name="email" value="" placeholder="example@mail.com"></td>
</tr>
<tr align="center">
<td align="right" width="60"><lable for="password">密码:</lable></td>
<td align="left" width="300"><input type="text" id="password" name="password" value="" placeholder="密码不少于6位"></td>
</tr>
<tr align="center">
<td align="right" width="60">性别:</td>
<td align="left" width="300">
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="secret" checked >保密
</td>
</tr>
<tr align="center">
<td align="right" width="60">兴趣:</td>
<td align="left" width="300">
<input type="checkbox" name="hobby[]" value="movie" >看电影
<input type="checkbox" name="hobby[]" value="game" >打游戏
<input type="checkbox" name="hobby[]" value="cook" checked>做饭
<input type="checkbox" name="hobby[]" value="wash" checked>洗衣服
</td>
</tr>
<tr align="center">
<td align="right" width="60">级别:</td>
<td align="left" width="300">
<select name="level">
<option value="0">纯洁的小白</option>
<option value="1">有点污啦</option>
<option value="2" selected>目空一切</option>
<option value="3">宇宙无敌小霸王</option>
</select>
</td>
</tr>
<tr align="center">
<td align="right" width="60">头像:</td>
<td align="left" width="300">
<input type="file" name="photo" accept="image/*">
</td>
</tr>
<tr>
<!--用colspan="2"将2个按钮并排到一排-->
<!--用align将按钮居中-->
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交">
<input type="submit" name="reset" value="重写">
</td>
</tr>
</table>
</body>
</html>