用JavaScript操作form表单元素

最新推荐文章于 2023-08-04 08:51:36 发布

ZZU_ie

最新推荐文章于 2023-08-04 08:51:36 发布

阅读量406

点赞数

分类专栏： JAVA学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_42490630/article/details/107424903

版权

JAVA学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="login" action="https://www.baidu.com"></form>

		<input id="name" />
		<input type="password" id="password" />

		<script>document.getElementById("name").select();
		document.getElementById("name").focus();//获取焦点
		function t1(){
			var element = document.getElementById("name");
			console.log(element.value);//获取
			element.value="Jimmy";
			element.disabled=true;//是否可以向服务器传值
			element.readOnly=false;//是否只读
		}
		</script>

		<br />
		***************************************
		<br />
		<input type="radio" name="sex" value="0" />女
		<input type="radio" name="sex" value="1" />男
		<script>

			document.getElementsByName("sex")[1].checked=true;
					
				var elements=document.getElementsByName("sex");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
	/* document.getElementsByName("sex")[1].disabled=true; */
				</script>
		<br />
		***************************************
		<br />
		<input type="checkbox" name="hobby" value="篮球" id="basketball" /><label for="basketball">篮球</label>
		<input type="checkbox" name="hobby" value="乒乓球" id="pingpang" /><label for="pingpang">乒乓球</label>
		<input type="checkbox" name="hobby" value="足球" id="football" /><label for="foottball">篮球</label>
		<input type="button" value="测试" onclick="t4()" />
		<script>
			document.getElementsByName("hobby")[1].checked = true;

			function t4() {
				elements = document.getElementsByName("hobby");
				for (var i = 0; i < elements.length; i++) {
					var element = elements[i];
					console.log(element.checked + "," + element.value);
				}
			}

			/* document.getElementsByName("sex")[1].disabled=true; */
		</script>
		<br />
		***************************************
		<br />
		<select name="province" id="province" multiple="multiple">
			<option value="">——请选择——</option>
			<option value="001">河南省</option>
			<option value="002">北京市</option>
			<option value="003">河北省</option>
		</select>

		<input type="button" value="测试" 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").options[1].selected = "true";
			/* document.getElementsByName("sex")[1].disabled=true; */
		</script>
	</body>
</html>

Form对象代表一个html表单

集合	描述
elements[]	包含表单中所有元素的数组
属性	描述
action	设置或返回表单的 action 属性。
method	设置或返回将数据发送到服务器的 HTTP 方法
方法	描述
submit()	提交表单

Text 对象代表 HTML 表单中的文本输入域。在 HTML 表单中 <input type="text">每出现一次，Text 对象就会被创建

属性	描述
disabled	设置或返回文本域是否应被禁用
readOnly	设置或返回文本域是否应是只读的
type	返回文本域的表单元素类型
value	设置或返回文本域的 value 属性的值

方法	描述
focus()	在文本域上设置焦点。
select()	选取文本域中的内容

Password 对象和Textarea 对象都有value属性、disabled属性和readOnly属性，都有focus方法；Hidden 对象有value属性和disabled**属性，没有、readOnly属性和focus方法；

Radio 对象代表 HTML 表单中的单选按钮。

方法	描述
focus()	为 checkbox 赋予焦点
click()	模拟在 checkbox 中的一次鼠标点击。

属性	描述
disabled	设置或返回 checkbox 是否应被禁用
checked	设置或返回 checkbox 是否应被选中
value	设置或返回checkbox的 value 属性的值

Select 对象代表 HTML 表单中的一个下拉列表

集合	描述
options[]	返回包含下拉列表中的所有选项的一个数组

属性	描述
disabled	设置或返回是否应禁用下拉列表
multiple	设置或返回是否选择多个项目
selectedIndex	设置或返回下拉列表中被选项目的索引号

方法	描述
add()	向下拉列表添加一个选项
focus()	在下拉列表上设置焦点
remove(index)	从下拉列表中删除一个选项。

ZZU_ie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript操作form表单元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form id="login" action="https://www.baidu.com"></form> <input id="name" /> <input type="
复制链接

扫一扫