这是代码
<!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，才能实现多个中选择一个。
