如何用JavaScript操作form表单组件？

最新推荐文章于 2022-09-05 13:32:14 发布
最新推荐文章于 2022-09-05 13:32:14 发布
阅读量261 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45720626/article/details/107425327
版权

一、用JavaScript操作按钮：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript操作form表单组件</title>
		
	</head>
	<body>
		<span>····································</span>
		<br />
		<!--用JavaScript操作按钮-->
		<form action="https://www.baidu.com/s" id = "login" >
			<input type="text" name="wd"/>
			<input type="password" name="wd" />
			<input type="button" value="提交" onclick="login()" />
		</form>
		
		<script>
			function login(){
				//通过document.getElementById("login")获取到id为login的HTML元素
				var element = document.getElementById("login");
				//将调用该方法的按钮变为提交功能
				element.submit();
				//将调用该方法的按钮变为重置功能
				//element.reset();
			}
		</script>
		
	</body>
</html>

二、用JavaScript操作文本框、密码框、文本域、隐藏框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript操作form表单组件</title>
		
	</head>
	<body>
		
		<span>····································</span>
		<!--用JavaScript操作文本框、密码框、文本域、隐藏框-->
		<br />
		<!--文本框-->
		<input type="text" id="test" />
		<input type="button" value="测试" onclick="test()" />
		
			
		<!--密码框-->
		<input type="password" id="password" />
		<input type="button" value="测试" onclick="password()" />
		
			
		<!--文本域-->
		<textarea id="textarea"></textarea>
		<input type="button" value="测试" onclick="textarea()" />
		
			
		<!--隐藏框：没有readonly属性和focus方法-->
		<input type="hidden" id="hidden" />
		<input type="button" value="测试" onclick="hidden()" />
		
		<script>
			document.getElementById("test").focus();//使其获取焦点
			function test(){
				var element = document.getElementById("test");
				console.log(element.value);//获取value值
				element.value="Tom";//value值
				console.log(element.value);
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用
			}
			document.getElementById("password").focus();//使其获取焦点
			function password(){
				var element = document.getElementById("password");
				console.log(element.value);//获取value值
				element.value="121556";//value值
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用	
			}
			document.getElementById("textarea").focus();//使其获取焦点
			function textarea(){
				var element = document.getElementById("textarea");
				console.log(element.value);//获取value值
				element.value="Tom";//value值
				element.readOnly=true;//设置只读
				element.disabled=true;//设置禁用
			}
			//没有focus方法 document.getElementById("hidden").focus();
			function hidden(){
				var element = document.getElementById("hidden");
				console.log(element.value);//获取value值
				element.value="Tom";//value值
				//没有readonly属性 element.readOnly=true;
				element.disabled=true;//设置禁用
				
			}
		</script>
		
	
	</body>
</html>

三、用JavaScript操作单选：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript操作form表单组件</title>
		
	</head>
	<body>
		
		<br />
		<span>····································</span>
		<!--用JavaScript操作单选-->
		<br />
		<span>单选</span>
		<input type="radio" name="sex" value="0" />男
		<input type="radio" name="sex" value="1" />女
		<input type="button" value="测试" onclick="t3()" />
		<script>
			function t3(){
				//通过document.getElementsByName("sex")获取的是一个数组
				var elements = document.getElementsByName("sex");
				//JavaScript里的循环返回的是某个元素的下标而不是元素本身（这点和Java不同）
				for(var i = 0; i < elements.length; i++){
					var element = elements[i];
					//通过element.checked可以看出哪个选项被选中
					console.log(element.checked+","+element.value);
				}
					
			}
			document.getElementsByName("sex")[0].disabled=true;//设置禁用
			document.getElementsByName("sex")[1].checked=true;//设置默认选项
			
		</script>
		
	</body>
</html>

四、用JavaScript操作多选：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript操作form表单组件</title>
		
	</head>
	<body>
		
		<br />
		<span>····································</span>
		<!--用JavaScript操作多选-->
		<br	/>
		<span>多选</span>
		<input type="checkbox" name="hobby" value="0" />篮球
		<input type="checkbox" name="hobby" value="1" />足球
		<input type="checkbox" name="hobby" value="2" />橄榄球
		<input type="button" value="测试" onclick="t4()" />
		<script>
			function t4(){
				var elements = document.getElementsByName("hobby");
				for(var i = 0; i < elements.length; i++){
					var element = elements[i];
					//获取选项的选中状态和相应的value值
					console.log(element.checked+","+element.value);
				}
					
			}
			document.getElementsByName("hobby")[0].disabled=true;//设置禁用
			document.getElementsByName("hobby")[1].checked=true;//设置默认选项
			
			
		</script>
		
	</body>
</html>

五、用JavaScript操作下拉列表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript操作form表单组件</title>
		
	</head>
	<body>
		
		<br />
		<span>····································</span>
		<!--用JavaScript操作下拉列表-->
		<br	/>
		<span>下拉列表</span>
		<br />
		
		<select id="province">
			<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(){
				//通过document.getElementById("province")获取到select里的所有选项
				var element = document.getElementById("province");
				var options = element.options;
				console.log(options);
				for(var i = 0; i < options.length; i++){
					var option = options[i];
					//获取选项的选中状态和相应的value值
					console.log(option.selected+","+option.value);
				}
					
			}
			
			document.getElementById("province")[1].selected=true;//设置默认选项
			document.getElementById("province")[2].disabled=true;//对某个选项设置禁用
			document.getElementById("province").disabled=true;//对整个select设置禁用
			
		</script>
	
	</body>
</html>

 

 

不动声色的小蜗牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
formosa:React表单组件库
03-29
台塑一个表单组件库。 它可以与一起很好地工作，但是不是必需的。演示版设置该软件包实际上并未发布，但如果已发布，则将运行： npm install --save @jlbelanger/formosa# oryarn add @jlbelanger/formosa 您的应用...
使用js设置form 表单的action
h123hlll的博客
04-02 6065
一般情况下，在一个form表单里所有上传图片或文档都默认存放在同一个路径，但有时候需要在同一个界面里不同的对象文档上传后存放在不同的路径下，因此，再不更改后台代码的情况下，我们可以用js来变更form表单的action 达到目的。 form表单信息如下： <form name="Work_Form" id="Work_Form" method="post" action="后台访问路...
JavaScript：form标签
离开屏幕的光，哪盏灯照亮你的孤独？
04-25 1001
获取form标签 利用标签名获取：document.getElementsByTagName('form'); 利用id获取：document.getElementById('form的id'); 通过类名获取：document.getElementsByClassName('类名'); 利用document.forms获取，返回值是一个数组，如果要获取该数组中某个form元素 通过下标：document.forms[下标]; 利用item方法获取：document.forms.item(下标)
写在js文件里的变量如何通过FORM表单提交到action
qq_32265203的博客
04-03 1369
使用form表单提交数据，需要将数据写到表单元素内（如文本框、隐藏域等）。因此，将js文件里的变量通过FORM表单提交到action的思路如下： 1、在form表单中准备隐藏域用以存放需要提交的数据 <form action="目标url"> <!-- 其他表单元素 --> <input type="hidden" id="test" name...
form标签的action属性怎么用？form标签action属性的用法介绍（附实例）
热门推荐
lin123_00的博客
05-28 6万+
本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例，还有关于form标签的action属性的定义和语法介绍，最后徐还有关于form标签的action属性的作用解释。现在让我们一起来看吧。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 我们先来介绍HTML中form标签的action属性的含义： action属性规定当提交表单时，向何处发送表单数据。（是必需的属性） 属性值的介绍：（看图） 熟悉了action属性的含义和语
js操作form表单
学习笔记
08-14 418
js操作form: 获取form表单对象 使用id:var fm=document.getElementById("fm"); 使用name属性:var frm=document.frm; 获取form下的所有表单元素对象集合 ...
react-form:用于表单验证的react组件
05-04
react-form 用于表单验证的react组件
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
uxcore-form:基于React的表单组件
05-02
React Form setup develop environment $ git clone https://github.com/uxcore/uxcore-form $ cd uxcore-form $ npm install $ npm start Usage see demo/FormDemo.js for details 每一个 field 需要按照 Form -> ...
一个适用于渲染table格式的多行form表单组件
08-09
一个适用于渲染table格式的多行form表单组件
【Javascript学习笔记】【常用form操作— —Input】
m0_37136491的博客
08-02 229
目录 目录 文本或者表单内容的禁止复制与粘贴 代码 限制输入框只能输入数字 代码 回车提交 代码 方法一 方法一 引用到的知识点 快捷链接 文本或者表单内容的禁止复制与粘贴 代码 html部分 &lt;h2&gt;禁止复制与粘贴&lt;/h2&gt; &lt;input type="text" name="copyPaste" id="...
JavaScript操作form表单对象
zhouym_的博客
06-04 854
模拟音乐选择 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--多选框实现音乐全选、反选、清空操作--> <h2>音乐播放区<...
利用JavaScript操作表单的小例子
左岸
08-21 1351
t检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致。<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:
JavaScript之Form表单及表单校验完整代码
熊凯瑞的博客
09-05 531
了解基础的form表单相关知识，同时对表单校验有更深的认识，最完整的表单校验代码，可以直接使用，用纯纯的干货增长丰富的知识。
javascript基础、表单操作
qhzhen的博客
08-12 642
HTML表单是通过&lt;form/&gt;元素来定义的,它有以下特性 method –表示浏览器发挞GET请求或是发送POST请求 action – 表示表单所要提交到的地址URL enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data. ...
JavaScript（十）操作表单
木馏雕金
09-27 382
HTML表单的输入控件主要有以下几种： 文本框，对应的，用于输入文本； 口令框，对应的，用于输入口令； 单选框，对应的，用于选择一项； 复选框，对应的，用于选择多项； 下拉框，对应的，用于选择一项； 隐藏文本，对应的，用户不可见，但表单提交时会把隐藏文本发送到服务器。 一 获取值 如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输
前端学习——js操作form表单
x1037490413的博客
04-02 2297
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- js操作form 获取form表单对象 使用id方式：var fm=document.getElementById("fm"); 使用name属性:var frm...
java中form用法_使用JavaScript操作表单
weixin_32801895的博客
02-27 802
获取表单的引用在开始对表单进行编程前，必须先获取表单的引用.有以下方法可以来完成这一操作。1)采用典型的DOM树中的定位元素的方法getElementById()，只要传入表单的id即可获得表单的引用:var vform=document.getElementById(“form1”);2)还可以用document的forms集合,并通过表单在form集合中的位置或者表单的name特性来进行引用:...
js 操作表单
xustart7720的博客
11-21 5736
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text">，用于输入文本； 口令框，对应的<input type="password">，用于输入口令；
easyui的form表单组件赋值
最新发布
05-31
可以使用jQuery的`form`方法来给EasyUI的form表单组件赋值。具体操作如下： 1. 首先获取要赋值的数据，可以是一个对象或一个JSON格式的字符串。 2. 然后使用jQuery的`form`方法来给form表单组件赋值，代码如下： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不动声色的小蜗牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值