单身狗的福音
(1)性别,婚姻情况(表单-单选属性)
1.制作时,引入表格可以使页面工整
2.注意使用label让选项更加人性化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>未来可期</title>
</head>
<body>
<h4>单身狗奇遇记,喜欢什么填什么</h4>
<table width="600" border="0">
<!-- 第一行,性别 -->
<tr>
<th>性别:</th>
<td><input type="radio" name="sex" value="男" checked for="man"><label id="man">男</label>
<input type="radio" name="sex" value="女" for="weman"><label id="weman">女</label>
<input type="radio" name="sex" value="都可以" for="all"><label id="all">都可以</label>
</td>
</tr>
<!-- 第四行,婚姻情况 -->
<tr>
<th>婚姻情况:</th>
<td><input type="radio" name="marriage" value="未婚" checked for="wei"><label id="wei">未婚</label>
<input type="radio" name="marriage" value="已婚" for="yi"><label id="yi">已婚(???为啥会有已婚)</label>
<input type="radio" name="marriage" value="离婚" for="li"><label id="li">离婚</label>
</td>
</tr>
(2) 生日(表单-下拉列表)
1.第一种情况用于联系熟练度,正常直接使用date元素就可以
2.使用表单元素时注意<form>,养成习惯
<!-- 第二行,生日 -->
<tr>
<th>生日:</th>
<td>
<form>
<select>
<option>请选择年份</option>
<option>2000</option>
<option>2001</option>
<option>2003</option>
</select>
<select>
<option>请选择月份</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<select>
<option>请选择日期</option>
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
</form>
</td>
</tr>
<!-- 可以使用这个方法来定义日期 -->
<tr>
<th>生日:</th>
<td>
<form>
<input type="date">
</form>
</td>
</tr>
(3)所在地区,学历(表单-文本元素)
<!-- 第三行,所在地区 -->
<tr>
<th>所在地区:</th>
<td>
<form>
<input type="text" maxlength="20" name="所在地区" >
</form>
</td>
</tr>
<!-- 第五行,学历 -->
<tr>
<th>学历:</th>
<td>
<form>
<input type="text" maxlength="20">
</form>
</td>
</tr>
(4)类型(表单-多选元素)
<!-- 第六行,类型 -->
<tr>
<th>喜欢类型:</th>
<td>
<form>
<input type="checkbox" name="type" for="好看的"><label id="好看的">好看的</label>
<input type="checkbox" name="type" for="不好看的"><label id="不好看的">不好看的</label>
<input type="checkbox" name="type" for="可以看看的"><label id="可以看看的">可以看看的</label>
<input type="checkbox" name="type" for="耐看的"><label id="耐看的">耐看的</label>
<input type="checkbox" name="type" for="没耐心看的"><label id="没耐心看的">没耐心看的</label>
</form>
</td>
</tr>
(5)自我介绍(表单-文本域)
<!-- 第七行,自我介绍 -->
<tr>
<th>自我介绍:</th>
<td>
<form>
<textarea row="5" cols="20">
自我介绍
</textarea>
</form>
</td>
</tr>
(6)注册(表单-选项元素、超链接元素)
<!-- 注册 -->
<tr>
<th></th>
<td>
<form>
<input type="submit" value="免费注册">
</form>
</td>
</tr>
<tr>
<th></th>
<td>
<form>
<input type="radio" >我同意注册条款和会员加入标准
</form>
</td>
</tr>
<tr>
<th></th>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
(7)承诺(列表-无序列表)
<!-- 承诺 -->
<tr>
<th></th>
<td>
<h4>我承诺,人家</h4>
<ul>
<li>刚满十八岁~</li>
<li>刚满十八岁~~</li>
<li>刚满十八岁~~~</li>
</ul>
</td>
</tr>