JS 08表单操作_表单域
2019-05-08 07:26:24来源:博客园 阅读 ()
- 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>
原文链接:https://www.cnblogs.com/aknife/p/10821617.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js防止表单重复提交实现代码 2020-03-29
- js的验证表单 2020-03-18
- jQuery异步提交表单的两种方式 2020-03-12
- JS之相等操作符详解 2020-03-12
- JS批量操作CSS属性详细解析 2020-02-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash