body部分
<body>
<div class="index">
<span><b>位置:</b></span> <span>首页</span> <span>--></span> <span>表单</span>
</div>
<div class="thing">
<span class="sp"><b>注册信息</b></span>
</div>
<div class="div">
<form name="textForm" action="#" id="form">
账号 <input class="zhanghao" type="text" name="userName" placeholder="请输入账号"><br />
<span> </span><br>
密码 <input class="zhanghao" type="password" name="pwd" placeholder="请输入密码"><br >
<span> </span><br>
性别 <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
<span> </span><br>
爱好 <input type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="跳舞">跳舞
<input type="checkbox" name="hobby" value="足球">足球<br>
<span> </span><br>
星座 <select name="star" class="star">
<option value="白羊座">白羊座</option>
<option value="巨蟹座">巨蟹座</option>
<option value="双子座">双子座</option>
</select><br>
<span> </span><br>
<div class="font">备注</div> <textarea class="beizhu" name="remark" cols="30" rows="10"></textarea>
<br>
<input type="submit" class = "button" value="提交"/>
</form>
</div>
</body>
js部分
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#form").on("submit",function(){
console.log("账号:" + $("input[name=userName]").val());
console.log("密码:" + $("input[name=pwd]").val());
console.log("性别:" + $("input[name=sex]:checked").val());
var hobbys = [];
var str = "爱好:";
$("input[name=hobby]:checked").each(function(i){
hobbys[i]=$(this).val();
})
console.log(str+hobbys);
console.log("星座:" + $("select :selected").val());
console.log("备注:" + $("textarea[name=remark]").val());
})
})
</script>
css部分
.index{
height: 30px;
background-color: azure;
}
.thing{
height: 50px;
border-bottom: 1px solid black;
position: relative;
}
.sp{
border-bottom: 4px solid skyblue;
position: absolute;
bottom: 0px;
}
.div{
position: absolute;
}
.form{
position: relative;
top: 30px;
left: 100px;
}
.zhanghao{
width: 30vw;
height: 25px;
border: 1px solid black;
border-radius: 5px;
}
.star{
width: 15vw;
height: 25px;
background-color: white;
border: 2px solid gray;
border-radius: 3px;
}
.font{
float: left;
}
.beizhu{
margin-left: 25px;
width: 50vw;
height: 18vh;
border-radius: 5px;
}
.button{
width: 100px;
height: 30px;
margin-top: 20px;
margin-left: 50px;
background-color: deepskyblue;
font-size: 15px;
color: white;
}
实现效果
打印结果