了解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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
初识javascript 文档碎片
Jul 13 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
JQuery animate动画应用示例
May 14 jQuery
使用vue for时为什么要key【推荐】
Jul 11 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
分享一个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
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
微信小程序 教程之注册页面
2016/10/17 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python创建数字列表的示例
2019/11/28 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
django的autoreload机制实现
2020/06/03 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
cf搞笑广告词
2014/03/14 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
运动会通讯稿300字
2015/07/20 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers