了解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表格的渲染组件
Jul 03 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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来检测proxy
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
php桥接模式应用案例分析
2019/10/23 PHP
css图片自适应大小
2007/11/28 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
web页面录屏实现
2019/02/12 HTML / CSS
主管会计岗位责任制
2014/02/10 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
感谢信怎么写
2015/01/21 职场文书
《春酒》教学反思
2016/02/22 职场文书
Django程序的优化技巧
2021/04/29 Python