Javascript操作form表单对象

最新推荐文章于 2022-01-26 19:31:58 发布
最新推荐文章于 2022-01-26 19:31:58 发布
阅读量185 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43527694/article/details/107425033
版权

1、文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		
		<input id="name" />
		<script>
			document.getElementById("name").focus();//打开页面光标自动聚焦在框中
			function t(){
			    var element = document.getElementById("name");//获取id为name的HTML元素
			    console.log(element.value);
			    element.value="Jimmy";//设置初始值
			    element.readOnly=true;//只读不可被修改
			    element.disabled=true;//禁用
				}
           </script>
		<input type="button" value="测试" onclick="t()"/>
	</body>
</html>

2、密码框(type = password)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<input id="password" type="password" />
		<script>
			document.getElementById("password").focus();
			function t(){
			    var element = document.getElementById("password");
			    console.log(element.value);
			    element.value="Jimmy";
			    element.readOnly=true;
			    element.disabled=true;
				}
		</script>
			<input type="button" value="测试" onclick="t()"/>
	</body>
</html>

3、隐藏框(type = hidden):隐藏框的框被隐藏起来，不会显示。而且Hidden 对象有value属性，disabled属性、没有readOnly属性和focus方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<form action="http://www.baidu.com/s">
			<input type="hidden" id="wd" name="wd" value="12345" />
			<input type="submit" value="登录" />
		</form>
		<script>
			var element = document.getElementById("wd")
			/*element.disabled = true;*/ //被禁用后12345就不会被传入
		</script>
	</body>
</html>

4、文本域：textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<textarea id="name"></textarea>
		<script>
			document.getElementById("name").focus();//打开页面光标自动聚焦在框中
			function t(){
			    var element = document.getElementById("name");//获取id为name的HTML元素
			    console.log(element.value);
			    element.value="Jimmy";//设置初始值
			    element.readOnly=true;//只读不可被修改
			    element.disabled=true;//禁用
				}
           </script>
		<input type="button" value="测试" onclick="t()"/>
	</body>
</html>

5、单选：radio

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
	
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
       <script>
		function t(){
				var elements = document.getElementsByName("sex");
				for(var i = 0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+","+element.value);
				}
			
		</script>
		<input type="button" value="测试" onclick="t()"/>
	</body>
</html>

6、多选：checkbox

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		
		
		<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 t(){
				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].disabled=true;
		</script>
		<input type="button" id="login" value="测试" onclick="t()"/>
	</body>
</html>

7、select下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<select id="province">
			<option value="">---请选择---</option>
			<option value="001">湖北省</option>
			<option value="002">河南省</option>
			<option value="003">河北省</option>
			<option value="004">北京市</option>
		</select>
		<script >
			function t(){
				var elements = document.getElementById("province");
				var options = elements.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+","+option.value);
				}
			}
			document.getElementById("province").disabled=true;
		</script>
		<input type="button" id="login" value="测试" onclick="t()"/>
	</body>
</html>

 

Personality、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript操作form表单对象
zhouym_的博客
06-04 863
模拟音乐选择 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--多选框实现音乐全选、反选、清空操作--> <h2>音乐播放区<...
javascript表单对象
u010716763的专栏
04-16 1056
表单对象主要包括一下对象:Text单行文本框
JavaScript的表单操作
weixin_52102646的博客
11-19 580
你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。 JavaScript的表单操作表单操作获取表单获取表单元素获取表单的组件元素表单操作文本框的操作文本内容的选择select事件获取选择的文本内容设置部分的文本内容操作剪切板下拉列表的操作HTMLSelectElement对象HTMLOptionElement对象表单验证HTML5验证API表单提交submit事件 表单操作 获取表单 获取表单元素 获取.
JavaScript表单对象Form介绍
热门推荐
王伟峰
04-03 1万+
<br />原文地址：http://www.pczpg.com/a/2010/0312/3106_2.html<br /> <br />要实现动态交互，必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。<br />1、 表单基础知识<br />表单是最常见的与JavaScript一起使用的HTML元素之一。在网页中用表单来收集从用户那里得到的信息，并且 <br />将这些信息传输给服务器来处理。表单主要有两类应用：一是如订单、个人资料、调查信息等；二是搜索引擎<br />功能，即从
JS表单对象
m0_51984899的博客
12-23 436
JS表单对象 表单是页面向后端传输数据的一个非常常见的方式,因此在发送请求之前,我们在页面进行一些校验,不仅可以节省不必要的错误传输,也可以提高用户的体验. 获取表单 <form id='myform' name="myform" action="" method="post"></form> <form id='myform2' name="myform2" action="" method="post"></form> 1>、document.
JavaScript-表单对象
xmosang的博客
01-26 743
form标签本质上也是一个DOM对象 9.1、获取表单元素 表单的主要目的是提交信息 <form> 用户名：<input type="text" id="username"><br/> 性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女 </form> &l
javascript验证form表单数据的案例详解
10-17
主要介绍了javascript验证form表单数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于javascript的Form表单验证
10-20
主要为大家详细介绍了基于javascript的Form表单验证，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript动态创建form表单并提交的实现方法
10-23
主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
JavaScript实现动态添加Form表单元素的方法示例
10-19
主要介绍了JavaScript实现动态添加Form表单元素的方法,结合实例形式分析了javascript表单元素操作相关函数使用方法与相关注意事项,需要的朋友可以参考下
JavaScript中Form表单技术汇总(推荐)
10-22
主要介绍了JavaScript中Form表单技术的相关资料,包括简单的表单验证和正则表达式验证，非常不错，具有参考借鉴价值，需要的朋友可以参考下
JavaScript第九讲：JavaScript表单对象
phpzt的专栏
05-31 369
本节主要讲解JavaScript表单对象，以下是具体详细实例。 表单对象： document.getElementById(); document.forms.username document.frm1.username 本身表单的属性，都可以使对象的属性 action method enctype title submit() focus()//获取焦点时触发的事件 blur();//失去焦点 on...
JavaScript 表单对象 | 看完不会请来捶我
lesileqin的博客
01-12 8033
文章目录一、访问表单与表单元素1、JavaScript访问表单2、JavaScript访问表单元素二、表单对象的属性、方法与事件1、属性2、方法3、事件三、表单元素1、文本框（1）文本框属性（2）文本框方法（3）例子1：验证表单内容是否为空（4）例子2：对文本框的文字加入字数限制2、按钮（1）按钮属性（2）按钮方法出去一下，虽然没人看，但我还要加一句：未完待续！！！！！（3）例子：获取表单元素的值...
js获取简单表单对象(1)
weixin_34032621的博客
05-24 146
<formid="form"> <inputtype="text"name="username"value="admin"/> </form> <script> functionformser(form){ varform=document.getElementById(form); ...
JavaScript form对象，表单简单验证
Vipwxs的博客
01-21 1303
一、form对象的属性： name:获取表单的名称，该name一般给JS使用 method：表单的提交方式   （get：不安全，数据量较小，不能上传附件）（post：相对安全 海量数据 能上传附件） action：表单数据的处理程序 一般是PHP文件 enctype：表单数据的编码方式（加密） application/x-www-form-urlencoded  默认  
js formData对象
卡夫卡
11-16 3629
js formData对象用于系列化表单数据便于ajax提交的，也可以新建一个formData对象向里面添加key,value系列化表单数据：var $element=$("#form"); //获得表单对象 var formData=$element.getFormData() //序列化表单对象 或者 var formData=new FormData($element); //序列化表单对象
JavaScript对象的注意事项
qq_39155611的博客
05-22 380
JavaScript对象的注意事项 前面讲到了JavaScript对象的简单解析，现在来说一下JavaScript对象实际应用时的注意事项。 1.对象可以嵌套对象 var name="蒋庆"; var obj={};//对象 var person={ // name:"马松昊", name:name, age:22, sex:"女", age:18, boyfriend:{
js取form对象方法,表单属性和方法
Developer of XingKong22star
08-18 7561
获取表单对象方法一、var form = document.forms['myform'];  得到表单的值：var usrname = form.elements['usrname'].value     获取表单对象方法二、var form = document.myform;     表单属性和方法：1.action 2.elements 3.enctype 4.leng
form表单内容转javascript对象
云淡风轻的专栏
11-23 1348
  form表单内容转javascript对象，便于ajax提交数据 function serializeFormObject(selector) {     var a, o, h, i, e;     a = $(selector).serializeArray();     o = {};     h = o.hasOwnProperty;     for (i = 0; i &lt; a...
Form 表单 生成对象
最新发布
06-10
您可以使用 JavaScript 来生成表单对象。以下是一个示例： ```html <form id="myForm"> <label for="firstName">First Name: <input type="text" id="firstName" name="firstName"><br> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值