【无标题】作业

最新推荐文章于 2024-10-10 10:50:43 发布

m0_72938391

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量73

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/m0_72938391/article/details/126353980

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var in1=$("div").find("#in1").val();
console.log(in1);
var in2=$("div").find("#in2").val();
console.log(in2);
var in3=$("input[name='sex']:checked").val()
    console.log(in3);
$("input[name='hobby']:checked").each(function(){
var in4=$(this).val();
console.log(in4);
} )
var in5=$("select[name='star']").val();
console.log(in5);
var in6=$("#in6").val();
console.log(in6);
} )
} )
</script>
<style type="texts">
body {
margin: 0px;
}
#top {
height: 30px;
width: 100%;
background-color: aqua;
/* border: 1px solid blue; */
}
#top span {
float: left;
padding-top: 3px;
padding-left: 8px;
font-size: 15px;
}
#mid {
margin-left: 15px;
/* border: 1px solid blue; */
}
#mid p {
margin-top: 0px;
position: relative;
top: 8px;
border-bottom: 3px solid aqua;
display: inline-block;
}
#content {
width: 100%;
height: 800px;
/* border: 1px solid blue; */
}
#midcontent {
width: 800px;
height: 600px;
/* border: 1px solid blue; */
padding-left:50px;
padding-top: 50px;
position: relative;
left: 200px;
}
.divclass span {
margin-right: 50px;

}
.divclass {
height:40px;
width: 500px;
/* border: 1px solid blue; */
margin-top: 30px;
font-weight: 500;
}
.beizhu {
margin-left:50px;
margin-top: 0px;
height: 70px;
display: inline-block;
}
/* #s1 {
display: inline-block;
height:40px;
line-height: 40px;
} */
.divclass [placeholder] {
width: 400px;
height: 30px;
}
#midcontent button {
margin-top: 50px;
margin-left: 150px;
background-color: aqua;
height: 40px;
width: 100px;
border: none;
font-weight: 1000;
}
.box{
display:flex;
}
.box span{
align-self: start;
}
<yle>
</head>
<body>
<div id="top">
<span><strong>位置:<></span>
<span> 首页 </span>
<span> --&gt </span>
<span> 表单 </span>
</div>
<div id="mid">
<p><strong>注册信息<></p>
<hr />
</div>
<div id="content">
<div id="midcontent" >
<form method="dialog">
<div class="divclass"><span>账号</span><input type="text" id="in1" name="username" placeholder="请输入账号"/></div>
<div class="divclass"><span>密码</span><input type="password" id="in2" name="pwd" placeholder="请输入密码"/></div>
<div class="divclass"><span>性别</span><input type="radio"  name="sex" value="man" checked>男
                                       <input type="radio"  name="sex" value="woman">女</div>
<div class="divclass"><span>爱好</span><input type="checkbox" name="hobby" value="singing" / >唱歌
                                       <input type="checkbox" name="hobby" value="dancing" / >跳舞
                   <input type="checkbox" name="hobby" value="football" />足球</div>
<div class="divclass"><span>星座</span><select name="star">
                       <option value="1">狮子座</option>
   <option value="2">白羊座</option>
   <option value="3">射手座</option>
   <lect></div>
   <div class="box"><span id="s1">备注</span><div class="divclass beizhu"><textarea  id="in6" name="remake" rows="4" cols="50" ></textarea></div></div>

<button id="btn">注册<tton>
</form>
</div>
</div>
</body>
<ml>