JS 08表单操作_表单域
- document.getElementById()
- document.forms[index];
- document.forms[form_name]
- 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);
}
- 1.get方式会将提交的数据以(?name1=value1&name2=value2...)放在url后面
- 2.get将数据放在url后,由于url是有长度的,且url是可见,所以get方式不适合发送一些敏感数据
- 3.get方式请求会有缓存
- 1.application/x-www-form-urlencoded(默认、且常用)
- 2.multipart/form-data(表单上传文件时)
- 3.text/plain
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);
}
- 对于表单中设置的提交、重置按钮,会触发onsubmit事件、onreset事件
- 在表单外部通过submit()提交表单不会触发onsubmit事件
- 在表单外部通过reset()重置表单会触发onreset事件
- 我们将onsubmit事件、onreset事件返回一个false就可以阻止事件的执行
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();">
<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>
JS 08表单操作_表单域的更多相关文章
- js控制表单操作的常用代码小结
收集了一些在WEB前台开发中常用的一些控制表单操作函数. 1.鼠标经过时自动选择文本鼠标划过自动选中:<input type="text" value="默认值&q ...
- 不可错过的10个超棒jQuery表单操作代码片段
jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...
- 10 个实用的 jQuery 表单操作代码片段
jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...
- 10个超棒jQuery表单操作代码片段
jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里 ...
- selenium多表单操作与多窗口,以及警告框处理
知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...
- fastadmin后台:在表单操作项添加操作按钮并控制弹出页面的大小
1.进入对应目录:eg(public/assets/js/backend/conmpany.js) 2.在field:'operate' 中添加buttons 源码: {field: 'operate ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- HTML表单操作的记录
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用easy-ui中的表单操作实现一行操作和多行操作
http://blog.sina.com.cn/s/blog_8e50ede90101fff9.html
随机推荐
- 2018-2019-2 网络对抗技术 20165231 Exp7 网络欺诈防范
实践内容(3.5分) 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网站 (1分) (2)ettercap DNS spoof ...
- [Ubuntu] sudo apt-get update指令执行失败
系统:Ubuntu 16.04 LTS 安装软件前执行 sudo apt-get update 更新,但是提示失败如下: 网上搜索后,因为连接不到 US 的服务器,所以更新失败,需要在系统设置中将源服 ...
- routine的加载
// Hearthbuddy.Windows.MainWindow // Token: 0x06000245 RID: 581 RVA: 0x0008C318 File Offset: 0x0008A ...
- matlab将多张图片合成视频
文件夹内多张图合成为视频: route='D:\文件及下载相关\桌面\**\Matlab_code\result';%基本路径 %d=dir([route '\*.bmp']);%.jpg格式 Wri ...
- LinkedHashSet
特点: 有序 , 唯一 底层的数据结构为: 链表和哈希表 , 链表保证有序 , 哈希表保证唯一 import java.util.LinkedHashSet; public class Demo2_L ...
- 导入GoogleClusterData到MySQL
本篇随笔记录如何导入google-cluster-data-2011-1-2的 job_events和task_events到MySQL 1. 下载数据 download_job_events: im ...
- linux性能监控 -CPU、Memory、IO、Network等指标的讲解
[操作系统-linux]linux性能监控 -CPU.Memory.IO.Network等指标的讲解(转) 一.CPU 1.良好状态指标 CPU利用率:User Time <= 70%,Syst ...
- Visual studio 正在从以下位置加载符号:Microsoft符号服务器 尝试取消禁用后续符号加载
正在从以下位置加载符号:Microsoft符号服务器 尝试取消禁用后续符号加载 进入VS---工具---选项----调试----符号,看右边有个“Microsoft符号服务器”,将前面的勾去掉,( ...
- EasyUI动态生成菜单
业务需求:不同角色有不同的权限,我们根据角色加载页面时展示不同的菜单.在easyUI中,菜单一般采用手风琴accordion组件进行展示,一级菜单下可以加载二级菜单,效果如下: 普通用户看到的菜: 管 ...
- LeetCode_171. Excel Sheet Column Number
171. Excel Sheet Column Number Easy Given a column title as appear in an Excel sheet, return its cor ...