了解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操纵OGNL标签示例代码
Jun 16 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python continue语句用法实例
2014/03/11 Python
pygame播放音乐的方法
2015/05/19 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python异常处理操作实例详解
2018/08/28 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python访问hdfs的操作
2020/06/06 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
护士求职自荐信范文
2014/03/19 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
python 命令行传参方法总结
2021/05/25 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技