js---Dom(五)表单操作

最新推荐文章于 2022-02-18 23:18:35 发布

司天宏

最新推荐文章于 2022-02-18 23:18:35 发布

阅读量1.1k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41532872/article/details/86498239

前端专栏收录该内容

47 篇文章

订阅专栏

本文详细解析了HTML表单元素的四种关键属性：value、checked、selected和disabled。通过实例展示了如何使用这些属性来设置或获取表单元素的状态，如文本框的值、单选按钮的选中状态、下拉菜单的选项选择以及元素的禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

value属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<!--	value:设置或者获取表单元素的值，针对文本框，密码框，单选框，复选框，下拉框-->
	<form action="" method="post">
		用户名： <input type="text" name="uname" id="uname" /><br>
		性别： <input type="radio" name="sex" value="man" />男
		 <input type="radio" name="sex" value="woman" checked />女<br>
		 <input type="button" id="btn1"  value="设置文本框元素的值">
		 	 <input type="button" id="btn2"  value="获取单选按钮选中的值">
		 	 
	</form>
	  <script>
	  	 var btn1=document.getElementById('btn1');
	  	 var btn2=document.getElementById('btn2');
	  	 
	  	 var uname=document.getElementById('uname');
	  	 btn1.onclick=function(){
	  	 	 uname.value="hello";
	  	 }
	  	  btn2.onclick=function(){
	  	  //得到选中的按个按钮
	  	 var radioSex=	document.getElementsByName('sex')[1];
	  	   console.log('选中的性别：'+radioSex.value);
	  	 }
	  </script>
	</body>
</html>

在这里插入图片描述

checked属性


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--	checked:设置或者获取表单元素的选中状态，如果元素被选中，则checked属性值为true,否则为false
			，这个属性只能判断radio或checkbox的选中状态
		-->
		<form action="" method="post">
			<input type="radio" name="sex" value="1">女
			<input type="radio" name="sex" value="2">男
			<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button"   -->
			<button id="radio-btn" type="button">获取选中的性别</button>

		</form>
		<script>
			var btn1 = document.getElementById('radio-btn');
			//获取所有的radio
			var sexs = document.getElementsByName('sex');
			btn1.onclick = function() {
				//循环所有的radio
				for(var i = 0; i < sexs.length; i++) {
					//判断当前的radio是否被选中
					if(sexs[i].checked) {
						console.log(sexs[i].value);
						break;
					}
				}
			}
		</script>
	</body>

</html>

在这里插入图片描述

selected属性


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!-- selected:设置或者获取表单元素的选中状态，如果元素被选中，则selected属性值为true,否则为false
			，这个属性只能判断select的选中状态
		-->
		<form action="" method="post">
			故乡：
			<select id="city">
				<option value="023">重庆</option>
				<option value="021" selected>北京</option>
				<option value="027">武汉</option>
				<option value="020">上海</option>
			</select>
			<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button"   -->
			<button id="radio-btn" type="button">获取选中的城市</button>

		</form>
		<script>
			var btn1 = document.getElementById('radio-btn');
			//获取所有的option
			var options = document.getElementById('city').children;
			btn1.onclick = function() {
				//循环所有的opotion
				for(var i = 0; i < options.length; i++) {
					//判断当前的option是否被选中
					if(options[i].selected) {
						console.log("选中的城市："+options[i].value);
						break;
					}
				}
			}
		</script>
	</body>

</html>

在这里插入图片描述

disabled属性


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!-- disabled:设置或者获取表单元素的禁用，如果disabled为true，代表禁用元素，被禁用的元素不能触发任何事件，
			disabled为false代表解除禁用，可以针对文本框，密码框，按钮等
		-->
		<form action="" method="post">
			 <input type="text"  name="uname"/>
			<!-- 如果button元素在表单中，默认点击它会提交表单,阻止它提交表单就加一个 type="button"   -->
			<button id="btn1" type="button">禁用文本框</button>
	       <button id="btn2" type="button">解禁文本框</button>
		</form>
		<script>
			var btn1 = document.getElementById('btn1');
		    var btn12= document.getElementById('btn2');
		    //得到文本框
		     var uname=  document.getElementsByName('uname')[0];
		     btn1.onclick=function(){
		     	//true：禁用
		     	uname.disabled=true;
		     }
		      btn2.onclick=function(){
		      	//false:解除禁用
		     	uname.disabled=false;
		     }
		</script>
	</body>

</html>

在这里插入图片描述