這是代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS FlexBox test</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body><h4>青春不常在，抓緊談戀愛</h4><table><form><!-- 注意表單放置的位置 --><tr><td>性別</td><td><input type="radio" name="sex" value="man" id="nan"/><!-- 注意label標簽的應用 --><label for="nan"><img src="./img/man.png" width="7%" height="7%"/> 男</label><input type="radio" name="sex" value="woman" id="nv"/><label for="nv"><img src="./img/man.png" width="7%" height="7%"/> 女</label></td></tr><tr><td>生日</td><td><select><option>請選擇年份</option><option>2021</option><option>2020</option><option>2019</option><option>2018</option></select><select><option>請選擇月份</option><option>1</option><option>2</option><option>3</option><option>4</option></select><select><option>請選擇日期</option><option>11</option><option>12</option><option>13</option><option>14</option></select> </td></tr><tr><td>所在地區</td><td><!-- value顯示默認值 --><input type="text" name="location" value="北京海淀"/></td></tr> <tr><td>婚姻狀況</td><td><!-- 注意label的for和id的對應 --><!-- 默認選擇 checked --><input type="radio" name="merry" id="state1" checked="checked"/><label for="state1">未婚</label><input type="radio" name="merry" id="state2"/><label for="state2">已婚</label><input type="radio" name="merry" id="state3"/><label for="state3">離婚</label></td></tr><tr><td>學歷</td><td><input type="text" value="博士"/></td></tr> <tr><td>喜歡的類型</td><td><input type="checkbox" name="like-type" id="type-name1"/><label for="type-name1">嫵媚的</label><input type="checkbox" name="like-type" id="type-name2"/><label for="type-name2">可愛的</label><input type="checkbox" name="like-type" id="type-name3"/><label for="type-name3">小鮮肉</label><input type="checkbox" name="like-type" id="type-name4"/><label for="type-name4">老臘肉</label><input type="checkbox" name="like-type" id="type-name5" checked="checked"/><label for="type-name5">都喜歡</label></td></tr> <tr><td>自我介紹</td><td><textarea>請輸入自我介紹</textarea></td></tr> <tr><td></td><td><input type="submit" value="免費注冊"/></td></tr><tr><td></td><td><input type="checkbox" name="provision" id="agree" checked="checked"/><label for="agree">我同意隱私條款和會員加入標準</label></td></tr></form><tr><td></td><td><a href="https://www.baidu.com" target="_blank">我是會員，立即登錄</a></td></tr><tr><td></td><td><h3>我承諾</h3><ul><li>年滿18</li><li>嚴肅認真</li><li>態度真誠</li></ul></td></tr></table>
</body></html>
里面有幾個值得注意的點，關注一下：
區域內點擊均可選中，使用了label標簽及其for屬性，和input標簽的id屬性對應起來。
注意，for和id的屬性是一對一綁定的，所以不要在表單范圍內重名。
- 使用
checked屬性，固定默認選擇，例如單選、復選框等。（在下拉菜單，是option屬性selected） - 對于
text輸入標簽，其value屬性能夠設置默認顯示內容，例如北京海淀。 - 注意表單的提交，需要在表單內使用
input等，然后使用submit提交。 - 對于單選框和復選框，需要使用相同的name，才能實現多個中選擇一個。
)
