实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7882216918eaf9eb58ef56317718931c.png)
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>青春不常在,抓紧谈恋爱</h4>
<form>
<table >
<tr>
<td>性别</td>
<td>
<label for="nan">男</label>
<input type="radio" id="nan" name="sex">
<label for="nv">女</label>
<input type="radio" id="nv" name="sex">
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2000</option>
<option>2010</option>
<option>2020</option>
</select>
</td>
<td>
<select>
<option>--请选择月份--</option>
<option>2</option>
<option>6</option>
<option>8</option>
</select>
</td>
<td>
<select>
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="上海"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="condiction" id="nomarried" checked="checked">未婚
<input type="radio" name="condiction" id="married">已婚
<input type="radio" name="condiction" id="leavemarried">离婚
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like" id="wm">妩媚的
<input type="checkbox" name="like" id="cute">可爱的
<input type="checkbox" name="like" id="xxr">小鲜肉
<input type="checkbox" name="like" id="llr">老腊肉
<input type="checkbox" name="like" id="all">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>
自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册"><br>
<input type="checkbox" name="agree" id="ty" checked="checked">我同意注册条款和会员加入标准<br>
<a href="#">我是会员,立即登录</a><br>
<h3>我承诺</h3><br>
<ur>
<li>年满18岁,单身</li>
<li>抱有严肃的态度</li>
<li>真诚的寻找另一半</li>
</ur>
</td>
</tr>
</table>
</form>
</body>
</html>