效果图
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="相亲">
<meta name="description" content="相亲注册网站">
<title>启航</title>
</head>
<body>
<h3>青春不常在,抓紧谈恋爱</h3>
<from method="post" action="index.html">
<table>
<tr>
<td>性别</td>
<td>
<input type="radio" value="boy" name="sex" id="boy" checked required/>
<label for="boy">男</label>
<input type="radio" value="girl" name="sex" id="girl"/>
<label for="girl">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<!-- <input type="date">-->
<select name="year" >
<!-- 默认文本-->
<option value="" style="display: none">--请选择年--</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
</select>
<select name="month">
<option value="" style="display: none">--请选择月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="day">
<option value="" style="display: none">--请选择日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" name="area" placeholder="北京思密达"/>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<!-- <label for="mark">文字标记</label>-->
<!-- <input type="text" id="mark">-->
<input type="radio" value="unmarried" name="status" id="unmarried" checked required/>
<label for="unmarried">未婚</label>
<input type="radio" value="married" name="status" id="married"/>
<label for="married">已婚</label>
<input type="radio" value="divorced" name="status" id="divorced"/>
<label for="divorced">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" name="degree" placeholder="幼儿园"/>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" value="feminine" name="hobby" id="feminine"/>
<label for="feminine">妩媚的</label>
<input type="checkbox" value="cute" name="hobby" id="cute"/>
<label for="cute">可爱的</label>
<input type="checkbox" value="small" name="hobby" id="small"/>
<label for="small">小鲜肉</label>
<input type="checkbox" value="old" name="hobby" id="old"/>
<label for="old">老腊肉</label>
<input type="checkbox" value="all" name="hobby" id="all"/>
<label for="all">都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="introduce" cols="25" rows="2"> 自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"/></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" value="ture" name="agree" checked required>我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="login.html" target="_self">我是会员,立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</from>
</body>
</html>
缺点
天数没法根据月份判断
补充知识
<input type="date"> - HTML(超文本标记语言) | MDN (mozilla.org)
HTML <label> 标签 (w3school.com.cn)
(6条消息) select设置默认文本的方法,相当于placeholder_将 select2 显示为纯输入文本_何日成熟的博客-CSDN博客
HTML <select> 标签 | 菜鸟教程 (runoob.com)