css,js,html表单
<!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: none; */
}
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>
<!-- html源码方式-->
<!--
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
var userName = document.getElementById("userName").value;
var pwd = document.getElementById("pwd").value;
var sexArrs = document.getElementsByName("sex");
var sex = "";
for (var i = 0; i < sexArrs.length; i++) {
if (sexArrs[i].checked) {
sex = sexArrs[i].value;
}
}
var hobbyArrs = document.getElementsByName("hobby");
var hobby = [];
var j = 0;
for (var i = 0; i < hobbyArrs.length; i++) {
if (hobbyArrs[i].checked) {
hobby[j] = hobbyArrs[i].value;
j++;
}
}
var select = document.getElementById("star");
var index = select.selectedIndex;
var star = select.options[index].value;
var remark = document.getElementById("remark").value;
var result = {};
result.userName = userName;
result.pwd = pwd;
result.sex = sex;
result.hobby = hobby;
result.star = star;
result.remark = remark;
console.log(JSON.stringify(result));
return false;
}
}
</script> -->
<!-- jquery方式-->
<script src="../jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var userName = $("#userName").val();
var password = $("#pwd").val();
var sex = $("input[name='sex']:checked").val();
var hobby = "";
$("input[name='hobby']:checked").each(function(){
hobby += $(this).val()+" ";
})
var star = $("#star option:selected").val();
var remark = $("#remark").val();
// var result = {};
// result.userName=userName;
// result.password=password;
// result.sex=sex;
// result.hobby=hobby;
// result.star=star;
// result.remark=remark;
//console.log(JSON.stringify(result));
console.log("账号:"+userName);
console.log("密码:"+password);
console.log("性别:"+sex);
console.log(hobby);
console.log("星座:"+star);
console.log("备注:"+remark);
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>
</div>
</body>
</html>
运行截图