JavaScript——操作form表单组件

最新推荐文章于 2024-10-16 16:26:58 发布

小刘小刘可爱一流

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量135

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_44687512/article/details/107459026

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="login" action="https://www.baidu.com/s">
			<input type="text" name="wd"/>
			<input type="password" name="wd"/>
			<input type="button" value="登录" onclick="login()"/>
		</form>
		
		<input id="name"/>
		<input type="button" value="文本框" onclick="t1()"/>
		
		<input type="password" id="password"/>
		<input type="button" value="密码框" onclick="t2()"/>
		
		<textarea id="summary"></textarea>
		<input type="button" value="文本域" onclick="t3()"/>
		
		<input type="radio" name="sex" value="0"/>女
		<input type="radio" name="sex" value="1"/>男
		<input type="button" value="单选" onclick="t4()"/>
		
		<input type="checkbox" name="hobby" value="9"/>篮球
		<input type="checkbox" name="hobby" value="8"/>足球
		<input type="checkbox" name="hobby" value="7"/>乒乓
		<input type="button" value="多选" onclick="t5()"/>
		
		<select id="city">
			<option value="">--请选择--</option>
			<option value="001">北京</option>
			<option value="002">天津</option>
			<option value="003">上海</option>
		</select>
		<input type="button" value="下拉列表" onclick="t6()"/>
		<script>
			function login(){
				var element=document.getElementById("login");
				element.submit();
				element.reset();
			}
			
			document.getElementById("name").focus()//focus方法：文本框获得焦点
			function t1(){
				var element=document.getElementById("name");
				console.log(element.value);//获取值
				element.value="Jimmy";//设置值
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用
			}
			
			document.getElementById("password").focus()
			function t2(){
				var element=document.getElementById("password");
				console.log(element.value);
				element.value="Lily";
				element.readOnly=true;
				element.disabled=true;
			}
			
			document.getElementById("summary").focus()
			function t3(){
				var element=document.getElementById("summary");
				console.log(element.value);
				element.value="Tom";
				element.readOnly=true;
				element.disabled=true;
			}
			
			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：获取所选选项的值
				
				}
			}
			document.getElementsByName("sex")[1].checked=true;//设置默认值
			document.getElementsByName("sex")[0].disabled=true;//设置禁用
			
			function t5(){
				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")[1].checked=true;
			document.getElementsByName("hobby")[0].disabled=true;
			
			function t6(){
				var element= document.getElementById("city");
				var options=element.options;//获取options数组
				for (var i=0;i<options.length;i++) {
					var option=options[i];
					console.log(option.selected+","+option.value);
				}
			}
			document.getElementById("city").options[1].selected=true;//设置默认值
			document.getElementById("city").disabled=true;//设置禁用
		</script>
	</body>
</html>