JavaScript（四）操作form表单组件

最新推荐文章于 2022-12-27 22:50:22 发布

一个小叫兽

最新推荐文章于 2022-12-27 22:50:22 发布

阅读量271

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ArcsinTao/article/details/107711277

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			function login(){
				var element = document.getElementById("login");
				element.submit();
			}
		</script>
		
	</head>
	<body>
		<form id="login" action="http://www.baidu.com/s">
			<input type="text" name="wd"/>
			<input type="password" name="wd" />
			<input type="button" value="登录" onclick="login()" />
		</form>

	<!--文本框的操作-->
	<input type="text" id="name" />
	<script>
		document.getElementById("name").focus();
		function t1(){
			
			var element = document.getElementById("name");
			console.log(element.value);//获取值
			element.value="Jimmy";
			//element.readOnly=true;
			element.disabled=true;
		}
	</script>
	
		<input type="button" value="文本框" onclick="t1()" />
		
	<!--密码框的操作-->	
		<input type="password" id="password" />
		<script>
		document.getElementById("password").focus();
		function t2(){
			
			var element = document.getElementById("password");
			console.log(element.value);//获取值
			element.value="Jimmy";
			//element.readOnly=true;
			element.disabled=true;
		}
		</script>
		<input type="button" value="密码框" onclick="t2()" />
	
	<!--文本域的操作-->
		<textarea id="textarea"></textarea>
		<script>
		document.getElementById("textarea").focus();
		function t3(){
			
			var element = document.getElementById("textarea");
			console.log(element.value);//获取值
			element.value="Jimmy";
			//element.readOnly=true;
			element.disabled=true;
		}
		</script>
		<input type="button" value="文本域" onclick="t3()" />
		
	<!--隐藏框的操作-->	
		<form action="http://www.baidu.com/s">
			<input type="hidden" id="wd" name="wd" value="123456" />
			<input type="submit" value="登录" />
		</form>
		<script>
			var element = document.getElementById("wd");
			element.disabled=true;
		</script>
		
		<!--
			Password 对象和Textarea 对象都有value属性、disabled属性和readOnly属性，都有focus方法；
			Hidden 对象有value属性，没有disabled属性、readOnly属性和focus方法；
			-->
		<br />
	<!--单选操作-->
		<input type="radio" name="sex" value="0" />女
		<input type="radio" name="sex" value="1" />男
		<input type="button" value="测试" onclick="t4()" />
		<script>
			function t4(){
				var elements = document.getElementsByName("sex");
				for(var i =0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);//.checked判断是否选中那一个，选中为true，未选中为false
				}
			}
			
			document.getElementsByName("sex")[0].checked=true;//设置默认选项为女
			document.getElementsByName("sex")[1].disabled=true;
	
		</script>
	<!--多选操作-->	
		<input type="checkbox" name="hobby" value="0" />篮球
		<input type="checkbox" name="hobby" value="1" />足球
		<input type="checkbox" name="hobby" value="2" />羽毛球
		<input type="checkbox" name="hobby" value="3" />乒乓球
		
		<script>
			function t4(){
				var elements = document.getElementsByName("hobby");
				for(var i =0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			
			document.getElementsByName("hobby")[0].checked=true;
			document.getElementsByName("hobby")[2].disabled=true;
			
			
		</script>
		
	<!--下拉列表操作-->	
		<select id="province">
			<option value="">--请选择--</option>
			<option value="001" disabled="disabled">北京市</option><!--设置这个选项不能被选中-->
			<option value="002">成都市</option>
			<option value="003">上海市</option>
		</select>
		
		<input type="button" value="测试5" onclick="t5()" />
		
		<script>
			function t5(){
				var element = document.getElementById("province");
				var options= element.options;//得到每一个下拉的项
				for(var i =0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);
				}
			}
			
			document.getElementById("province")[2].selected=true;
			document.getElementById("province").disabled=true;//disable是select的disabled（禁用下拉列表）
			
			
		</script>
	</body>
</html>

一个小叫兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（四）操作form表单组件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function login(){ var element = document.getElementById("login"); element.submit(); } </script> &lt.
复制链接

扫一扫

专栏目录