JavaScript中的form表单组件

最新推荐文章于 2024-02-06 08:14:42 发布

LinDadaxia

最新推荐文章于 2024-02-06 08:14:42 发布

阅读量400

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/LinDadaxia/article/details/107425166

版权

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="Name"/><!--文本框组件-->
		<input type="password" id="password"/><!--密码框组件-->
		<textarea id="summary"></textarea><!--文本域组件-->
		<script>
			document.getElementById("Name").focus(); //设置光标
			function t1(){
				var element = document.getElementById("Name"); //获取id为Name的对象
				element.value="Jimmy";       //设置对象的初始值
				element.disabled =true;		 //设置对象禁用
			}
			
			document.getElementById("password").focus();//设置光标
			function t2(){
				var element = document.getElementById("password");//获取id为password的对象
				element.value="Jimmy";		//设置对象的初始值
				element.readOnly=true;		//设置对象为只读
				element.disabled =true;		//设置对象禁用
			}
			
			document.getElementById("summary").focus();//设置光标
			function t3(){
				var element = document.getElementById("summary");//获取id为summary的对象
				element.value="Jimmy";		//设置对象的初始值
				element.readOnly=true;		//设置对象为只读
				element.disabled =true;		//设置对象禁用
			}
		</script>
		<input type="button" value="测试1" onclick="t1()"/> <!-- 设置测试按钮，利用onclick来执行函数-->
		<input type="button" value="测试2" onclick="t2()"/>
		<input type="button" value="测试3" onclick="t3()"/>
		
		
		
		<form action="https://www.baidu.com/s">
			<input type="hidden" id="wd" name="wd" value="123456"/> <!--隐藏框组件：有value和禁用属性，没有只读！！！-->
			<input type="submit" value="提交"/>
		</form>
		
		
		<input type="radio" name="sex" value="0" id="female"/><label for="female">女</label><!--单选框组件-->
		<input type="radio" name="sex" value="1" id="male"/><label for="male">男</label>
		<script>
			function t4(){
				var elements = document.getElementsByName("sex");//获取name为sex的对象（数组）
				for(var i=0;i<elements.length;i++){
					var element = elements[i];		//获取对象数组中的元素（从0开始）
					console.log(element.checked+","+element.value);//获取对象中元素的选中状态和value值
				}
				elements[0].disabled = true;		//设置对象中第0个元素禁选
			}
			document.getElementsByName("sex")[1].checked = true;	//设置对象中第1个元素已选	
		</script>
		<input type="button" value="测试4" onclick="t4()"/>
		
		<input type="checkbox" name="sport" value="0" />田径		<!--多选框组件-->
		<input type="checkbox" name="sport" value="1" />游泳
		<input type="checkbox" name="sport" value="0" />滑冰
		<script>
			function t5(){
				var elements = document.getElementsByName("sport");		//获取name为sport的对象（数组）
				for(var i=0;i<elements.length;i++){
					var element = elements[i];		//获取对象数组中的元素（从0开始）
					console.log(element.checked+","+element.value);//获取对象中元素的选中状态和value值
				}
				elements[0].disabled = true;		//设置对象中第0个元素禁选
			}
			document.getElementsByName("sport")[1].checked = true;		//设置对象中第1个元素已选	
		</script>
		<input type="button" value="测试5" onclick="t5()"/>
		
		<select id="province">					<!--下拉框组件-->
			<option value="">---请选择---</option>
			<option value="001">北京市</option>
			<option value="002">广东省</option>
			<option value="003">上海市</option>
		</select>
		<script>
			function t6(){
				var element = document.getElementById("province");//获取id为province的对象
				var options = element.options;	//获取对象中的数组
				for(var i=0;i<options.length;i++){
					var element = options[i];		//获取数组中元素
					console.log(options[i].selected+","+options[i].value);	//获取数组中元素的选中状态和value值
				}
			}
			document.getElementById("province").options[1].selected = true;		//设置数组中第1个元素已选	
			document.getElementById("province").disabled=true;		//设置对象（id为province的对象）不可选	
		</script>
		<input type="button" value="测试6" onclick="t6()"/>
	</body>
</html>

执行结果：
点击测试前：
在这里插入图片描述
点击所有测试后：
点击提交后

LinDadaxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的form表单组件

代码演示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="Name"/> <input type="password" id="password"/><!--密码
复制链接

扫一扫