<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
font-family: inherit;
font-size: 15px;
}
span{
font-weight: bold;
}
#top01{
margin-bottom: 50px;
}
#top02{
display: inline-block;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: aqua;
}
#top03{
margin-top: -10px;
}
#bottom{
position: absolute;
left: 10%;
}
#userName{
width: 400px;
height: 30px;
border-radius: 8px;
}
#psw{
width: 400px;
height: 30px;
border-radius: 8px;
}
#star{
display: inline-block;
width: 150px;
height: 30px;
border-radius: 8px;
}
.account{
margin-left: 35px;
margin-top: 35px;
}
#remark{
margin-left: 65px;
margin-top: 35px;
border-radius: 8px;
}
#remark01{
font-weight: normal;
display: inline-block;
position: absolute;
bottom: 32%;
}
#botton{
color: aliceblue;
font-family: monospace;
font-size: 18px;
font-weight: bold;
width: 100px;
height: 30px;
background-color: cyan;
border-color: cyan;
margin-left: 65px;
margin-top: 35px;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#botton").click(function(){
var userName=$("input[name='userName']").val();
var psw=$("input[name='psw']").val();
var sex=$("input[type='radio']:checked").val();
var hobbys=[];
var hobbyArray=$("input[name='hobby']:checked");
for(var i=0;i<hobbyArray.length;i++){
hobbys[i]=$(hobbyArray[i]).val();
}
var star=$("#star option:selected").val();
var remark=$("#remark").val();
var res={};
res.userName=userName;
res.psw=psw;
res.sex=sex;
res.hobby=hobbys;
res.star=star;
res.remark=remark;
console.log(res);
$("#result").html(JSON.stringify(res));
});
});
</script>
</head>
<body>
<div id="parent">
<div id="top01">
<span>位置：</span>首页 -->表单
</div>
<div id="top02">
<span>注册信息</span>
</div>
<div id="top03">
<hr />
</div>
<div id="bottom">
<form action="">
账号<input type="text" class="account" id="userName" name="userName"><br />
密码<input type="password" class="account" id="psw" name="psw"/><br />
性别<input type="radio" name="sex" class="account" value="male"/>男
<input type="radio" name="sex" value="female"/>女<br />
爱好<input type="checkbox" class="account" name="hobby" value="sing"/>唱歌
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="football"/>足球<br />
星座<select name="star" class="account" id="star">
<option value="Aries">白羊座</option>
<option value="Leo">狮子座</option>
<option value="Cancer">巨蟹座</option>
<option value="libra">天秤座</option>
<option value="sagittarius">射手座</option>
</select><br />
<span id="remark01">备注</span><textarea name="remark" id="remark" cols="100" rows="8"></textarea><br />
<input type="button" value="注册" id="botton" name="submit" />
</form>
<p id="result"></p>
</div>
</div>
</body>
</html>