效果图
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单案例</title><style type="text/css">#box{width: 37.5rem;margin: 0 auto;margin-top: 30px;}body{background-color: cadetblue;}h1{width:300px;margin: 0 auto;color: deepskyblue;}audio{float: left;}</style></head><body><audio src="../../img/林俊杰%20-%20那些你很冒险的梦.mp3" controls=""></audio><h1>欢迎进入注册界面</h1><hr ><div id="box"><h3>青春不常在，抓紧谈恋爱</h3><form action="" method="post">姓别  <label for="se">男</label><input type="radio" name="sex" id="se" value="男" checked="checked"/>   <label for="wo">女</label><input type="radio" name="sex" id="wo" value="女" /><br><br>生日  <select name=""><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">200</option></select>年<select name=""><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option></select>月<select name=""><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option></select>日<br><br><label for="add">所在区域</label>   <input type="text" name="addr"value="请输入所在区域" id="add"/><br><br>婚姻状态   <label for="wei">未婚</label><input type="radio" name="choose" value="未婚" id="wei" checked="checked"/>   <label for="yi">已婚</label><input type="radio" name="choose" value="已婚" id="yi"/>   <label for="li">离婚</label><input type="radio" name="choose" value="离婚" id="li"/>   <br><br>学历   <input type="text" name="rofs" id="" value="幼儿园" /><br><br>喜欢的类型   <label for="fumei">妩媚的</label><input type="checkbox" name="type" id="fumei" value="妩媚的" />   <label for="cute">可爱的</label><input type="checkbox" name="type" id="cute" value="可爱的" />  <label for="rou">小鲜肉</label><input type="checkbox" name="type" id="rou" value="小鲜肉" />  <label for="larou">老腊肉</label><input type="checkbox" name="type" id="larou" value="老腊肉" />  <label for="sao">骚鸡</label><input type="checkbox" name="type" id="sao" value="骚鸡" />   <br><br>自我介绍   <br><textarea rows="4" cols="70"></textarea><br><br><input type="submit" name="" id="" value="免费注册" /><input type="reset" name="" id="" value="重置" /><br><br><input type="checkbox" name="agree" id="Agree" value="我同意" /><label for="Agree">我同意注册条款和会员加入标准</label><br><br><a href="#">我是会员，立即登录</a><br><br><h4>我承诺</h4><ul><li>年满18岁，单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></form></div></body>
</html>
