實現效果
通過創建表格嵌套表單實現
實現代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<table align="center" bgcolor="aqua">
<tr>
<th bgcolor="blue" colspan="2">
歡迎注冊
</th>
</tr>
<tr>
<th width="150" align="right">
<label for="user">用戶名:</label>
</th>
<th align="left">
<input type="text" id="user" />
</th>
</tr>
<tr>
<th align="right">
<label for="password">密碼:</label>
</th>
<th align="left">
<input type="password" id="password" />
</th>
</tr>
<tr>
<th align="right">
性別:
</th>
<th align="left">
<input type="radio" name="sex" id="男" />
<label for="男">男</label>
<input type="radio" name="sex" id="女" />
<label for="女">女</label><br />
</th>
</tr>
<tr>
<th align="right">
<label for="phone"> 電話:</label>
</th>
<th align="left">
<input type="text" id="phone" />
</th>
</tr>
<tr>
<th align="right">
職業:
</th>
<th align="left">
<select>
<option>請選擇</option>
<option>學生</option>
<option>白領</option>
<option>上班</option>
<option>教師</option>
<option>工人</option>
</select><br />
</th>
</tr>
<tr>
<th align="right">
愛好:
</th>
<th align="left">
<input type="checkbox" id="敲代碼" />
<label for="敲代碼">敲代碼</label>
<input type="checkbox" id="打游戲" />
<label for="打游戲">打游戲</label>
<input type="checkbox" id="唱歌" />
<label for="唱歌">唱歌</label>
<input type="checkbox" id="運動" />
<label for="運動">運動</label><br />
</th>
</tr>
<tr>
<th align="right">
地址:
</th>
<th align="left">
<textarea rows="3"></textarea>
</th>
</tr>
<tr>
<th bgcolor="blue" colspan="2">
填寫完成后點擊下面提交按鈕提交表單
</th>
</tr>
<tr>
<th colspan="2">
<input type="submit" />
<input type="reset" />
</th>
</tr>
</table>
</form>
</body>
</html>
最終效果
