了解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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
js获取内联样式的方法
Jan 27 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
详解Vue slot插槽
Nov 20 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
处理单名多值表单的详解
2013/06/08 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
Javascript之String对象详解
2016/06/08 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python pygame实现球球大作战
2019/11/25 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Django URL参数Template反向解析
2020/11/24 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
出售房屋协议书范本
2014/10/06 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
预备党员党支部意见
2015/06/02 职场文书
爱国主义电影观后感
2015/06/18 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers