jquery

最新推荐文章于 2023-05-06 11:22:19 发布

ganduora

最新推荐文章于 2023-05-06 11:22:19 发布

阅读量64

点赞数

文章标签： jquery servlet java

本文链接：https://blog.csdn.net/qq_58847780/article/details/126354038

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0px;
font-size: 14px;
}

.top {
width: 100%;
height: 40px;
background-color: azure;
border: 0px solid red;
position: relative;
}

.top span {
/* 给"位置:"设置属性 */
font-weight: bold;
/* 设置字体为粗体 */
float: left;
/* 左浮动 */
line-height: 40px;
/* 行间距40px*/
margin-left: 7px;
/* 设置左边间距为7px */
}

.topul {
margin: 0px;
/* 取掉上下左右的间距 */
list-style: none;
/* 取掉ul的实心圆圈 */
}

.topul li {
/* 给首页 --> 表单设置属性 */
float: left;
/* 向左浮动 */
/* 行间距30px*/
margin-left: 5px;
/* 左边间距5px */
margin-right: 3px;
/* 右边间距5px */
}

.main {
margin: 10px 18px;
/* 上下为10px,左右18px */
}

.main_title {
height: 30px;
margin-top: 10px;
margin-bottom: 20px;
border-bottom: 1px solid gainsboro;
/* 给"注册信息"设置下框线 */
position: relative;
}

.main_title span {
/* 给"注册信息"设置属性" */
font-weight: bolder;
/* 设置字体加粗 */
border-bottom: 3px solid
/* #00FFFF;给"注册信息"设置短蓝色下划线 */
line-height: 30px;
position: absolute;
bottom: 1px;
}

.main_body {
width: 100%;
}

.main_body ul {
list-style: none;
/* 取掉ul的实心圆圈,项目列表 */
}

.main_body ul li {
margin-bottom: 20px;
/*给"账号、密码"等都设置下边距*/
position: relative;
}

label {
width: 80px;
border: 0px solid red;
display: inline-block;
line-height: 28px;
text-align: center;
float: left;
}

input[name="userName"],
input[name=pwd] {
/* 给账号,密码设置属性 */
width: 200px;
line-height: 30px;
border-radius: 5px;
/*设置圆角边框*/
border: 1px solid #A9A9A9;
}

select {
width: 160px;
height: 28px;
border-radius: 5px;
border: 1px solid #A9A9A9;
}

textarea {
width: 250px;
height: 50px;
border-radius: 5px;
border: 1px solid #A9A9A9;
}

button {
width: 100px;
text-align: center;
line-height: 28px;
background-color: darkturquoise;
border: 0px solid white;
color: white;
border-radius: 5px;
}

input[type="radio"],
input[type="checkbox"] {
margin-top: 9px;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var userName=$("input[name='userName']").val();
var pwd=$("input[name='pwd']").val();
var sex=$("input[type='radio']:checked").val();
var hobbys=[];
var hobbyArrs = $("input[name='hobby']:checked");
for (var i = 0; i < hobbyArrs.length; i++) {
hobbys[i]=$(hobbyArrs[i]).val();
}
var star =$("#star option:selected").html();
var remark=$("#remark").val();
var res={};
res.userName=userName;
res.pwd=pwd;
res.sex=sex;
res.hobby=hobbys;
res.star=star;
res.remark=remark;
console.log(JSON.stringify(res));
//("#result").html(JSON.stringify(res));
return false;
})
})
</script>
</head>
<body>
<div class="top">
<span>位置</span>
<ul class="topul">
<li>首页</li>
<li>--></li>
<li>表单</li>
</ul>
</div>
<div class="main">
<div class="main_title">
<span>注册信息</span>
</div>
<form>
<div class="main_body">
<ul>
<li>
<label>账号</label>
<input id="userName" type="text" name="userName" placeholder="请输入账号">
</li>
<li>
<label>密码</label>
<input id="pwd" type="password" name="pwd" placeholder="请输入密码">
</li>
<li>
<label>性别</label>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</li>
<li>
<label>爱好</label>
<input type="checkbox" name="hobby" value="sing" />唱歌
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="football" />足球
</li>
<li>
<label>星座</label>
<select name="star" id="star">
<option value="1">天秤座</option>
<option value="2">巨蟹座</option>
<option value="3">双鱼座</option>
</select>
</li>
<li>
<label>备注</label>
<textarea id="remark" cols="50" rows="8"></textarea>
</li>
<li>
<label> </label>
<button id="btn">注册</button>
</li>
</ul>
</div>
</form>
<p id="result"></p>
</div>
</body>
</html>