了解JavaScript表单操作和表单域


Posted in Javascript onMay 27, 2019

一、表单的获取方式

1.document.getElementById()

2.document.forms[index];

3.document.forms[form_name]

4.document.form_name

function testGetForm() {
var frm = document.getElementById("regForm"); // 常用
console.log(frm);
frm = document.forms[0];
console.log(frm);
frm = document.forms["aaform"];
console.log(frm);
frm = document.aaform; // 常用,仅表单可以通过name属性获取
console.log(frm);
}

二、表单对象的属性

action:表单提交的地址

method:表单的提交方式:get(默认)、post

get方式和post方式的区别

1.get方式会将提交的数据以(?name1=value1&name2=value2...)放在url后面
post方式会将数据以(name1=value1&name2=value2...)放在“请求实体”中

2.get将数据放在url后,由于url是有长度的,且url是可见,所以get方式不适合发送一些敏感数据
post方式将数据放在“请求实体”中,理论上是无限制,post方式适合发送一些敏感数据

3.get方式请求会有缓存
post方式请求不会有缓存

.enctype //表单的编码方式application/x-www-form-urlencoded

enctype的值的区别

1.application/x-www-form-urlencoded(默认、且常用)
无论post方式还是get方式提交,表单数据均以(name1=value1&name2=value2...)组织数据

2.multipart/form-data(表单上传文件时)
1)get方式,表单以(name1=value1&name2=value2...)组织数据
2)post方式,表单数据会放在类似于“------WebKitFormBoundaryGSF0lHBAvwWyAcuV”字符串中间.

3.text/plain
1)get方式,表单以(name1=value1&name2=value2...)组织数据
2)post方式,表单数据会以name1=value2,name2=value2,数据之间没有连接符号

.elements //返回表单中所有的表单域(input button select textarea)对象的一个数组.
.length //返回表单中表单域对象的数量

function testFormField() {
// 获取表单
var frm = document.aaform;
console.log(frm.id);
console.log(frm.name);
//表单提交的地址
console.log(frm.action); 
//表单的提交方式:get(默认)、post
console.log(frm.method); 
//表单的编码方式
console.log(frm.enctype);
//返回表单中所有的表单域(input button select textarea)对象的一个数组
console.log(frm.elements); 
//返回表单中表单域对象的数量
console.log(frm.length);
}

三、表单对象的方法

frm.submit(); //提交表单

frm.reset(); //重置表单

四、表单对象的事件

1.对于表单中设置的提交、重置按钮,会触发onsubmit事件、onreset事件

2.在表单外部通过submit()提交表单不会触发onsubmit事件

3.在表单外部通过reset()重置表单会触发onreset事件

4.我们将onsubmit事件、onreset事件返回一个false就可以阻止事件的执行

onreset="return testFormEvent2();"
onsubmit="return testFormEvent1();"

function testFormMethod(){
var frm = document.aaform;
// frm.submit(); //提交表单
frm.reset(); //重置表单
}
function testFormEvent1(){
alert("表单提交了!")
//写验证表单的代码
return true;
}
function testFormEvent2(){
alert("表单重置了!")
return false;
}
<form id="regForm" name="aaform" action="demo01.html" onreset="return testFormEvent2();" onsubmit="return testFormEvent1();">

五、表单域对象的属性

1.readonly

1)input对象 设置了readonly="readonly",则该表单域只读(用户不能修改其value属性),但是可以提交
2)通过js为input对象添加“只读”属性,应通过“对象.readOnly = true”添加
3)readonly="readonly" 只能使用在<input type='text'> 及 <textaread>标签中

2.disabled

1)input对象 设置了disabled="disabled",则该表单域不可用(用户不能修改其value属性)且不能提交
2)通过js为input对象添加“不可用”属性,应通过“对象.disabled = true”添加
3)disabled="disabled"可以将所有的表单域失效

3.name

1)用于获取该表单域
2)只有设置了name属性的表单域才可以提交

4.value

1)用户输入的内容就是value,表单会提交该属性的值
2)select标签的value值就是当前选中的option的value值
3)textarea没有value属性,提交时提交标签中间的文本值

5.form
用于获取表单域所在的表单对象

6.type
浏览会根据type的值不同,显示表单域也不同

7.checked

1)对于<input type="radio"> 和 <input type="checkbox">来讲,checked="checked"表示默认选中该选项
2)<input type="radio"> 只能给同组的一个添加 checked="checked"
3)<input type="checkbox"> 可以给同组的所有添加 checked="checked"
4)通过js为对象添加“默认选中”属性,应通过“对象.checked = true”添加

8.select标签的属性

1)selectedIndex表示当前选中的option的索引
2)options表示所有option标签对象的一个数组
3)length表示右多少个下拉列表项

9.option标签的属性

1)value 就是选项的值,提交时会提交该属性的值
2)text 就是option标签中间文本值,类似于innerText
3)selected="selected" 表示页面加载时默认的选项

<script type="application/javascript">
/**
* 一、获取表单域对象
* 1.document.getElementById()
* 2.formObj.elements[index]
* 3.formObj.elements[formarea_name]
* 4.formObj.formarea_name
*/
function getFormArea(){
var obj = document.getElementById("nickid"); //常用
console.log(obj)
var formObj = document.aaform
obj = formObj.elements[2];
console.log(obj);
obj = formObj.elements["nickname"];
console.log(obj);
obj = formObj.nickname; //常用
console.log(obj);
console.log(formObj.aaa); // a标签不是表单域
}
//设置disabled
function testReadonly(){
var formareaobj = document.aaform.username;
formareaobj.disabled = true;
}
//光标 焦点
function testMethod(){
var formareaobj = document.aaform.username;
// 获得焦点,光标放在该位置
// formareaobj.focus();
// 失去焦点,光标从该位置消失
// formareaobj.blur();
var cityobj = document.getElementById("cityid");
cityobj.focus();
}
function testEvent(){
var formareaobj = document.aaform.username;
//动态为表单域对象添加事件
formareaobj.onfocus = function(){
console.log("我获取焦点了!")
}
}
function testSelect(){
var sel = document.getElementById("cityid");
console.log(sel.value)
console.log(sel.selectedIndex);
console.log(sel.options);
console.log(sel.length);
var optionobj = sel.options[sel.selectedIndex];
console.log(optionobj.value)
console.log(optionobj.text);
}
</script>
<body>
<button onclick="getFormArea()">获取表单域对象</button>
<button onclick="testReadonly()">readonly</button>
<button onclick="testMethod()">测试表单域对象的方法</button>
<button onclick="testEvent()">测试表单域对象的事件</button>
<button onclick="testSelect()">测试表单域对象-select</button>
<hr/>
<form id="regForm" name="aaform" action="demo01.html">
用户名:<input id="userid" type="text" name="username" value="admin" ><br/>
密码:<input type="password" name="password"><br/>
昵称:<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br id="brid"/>
性别:男<input type="radio" name="gender" value="nan">  
女<input type="radio" name="gender" value="nv"><br/>
爱好:狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
城市<select id="cityid" name="city" >
<option value="1">广州</option>
<option value="2" selected="selected">东莞</option>
<option value="3">深圳</option>
<option value="4">中山</option>
</select><br/>
<textarea name="inc">这家伙很懒,什么都没有留下...</textarea><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
<button type="submit" disabled="disabled">这是个按钮</button>
<a href="" name="aaa">baidu</a>
</form>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jquery默认校验规则整理
Mar 24 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
js显示文本框提示文字的方法
May 07 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 #Javascript
使用JS判断页面是首次被加载还是刷新
May 26 #Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 #Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 #Javascript
vue2.0 实现富文本编辑器功能
May 26 #Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 #Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 #Javascript
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Python 常用string函数详解
2016/05/30 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python制作exe文件简单流程
2019/01/24 Python
python初步实现word2vec操作
2020/06/09 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
市场营销专科应届生求职信
2013/11/24 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
个人党性剖析材料
2014/02/03 职场文书
团队激励口号
2014/06/06 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
保外就医申请书范文
2015/08/06 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery