获取表单的输入值

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

៚浮ོ生ོ如ོ此ོོ ꦿ

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

阅读量157

点赞数

文章标签： html

本文链接：https://blog.csdn.net/tianyangz/article/details/126352815

版权

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>&nbsp;</label>
							<button id="btn">注册</button>
						</li>
					</ul>
				</div>
			</form>
		</div>
	</body>
</html>