<form> 标签 // HTML 表单 // from 表单转换成json 格式
form 表单，对开发人员来说是在熟悉不过的了，它是页面与web服务器交互时的重要信息来源
表单能够包含input 元素，比如字段，复选框，单选框，提交按钮 等等。用来向服务器传输数据。
form 是块级元素
简单的form 表单
示例：
1 <!doctype html> 2 <html> 3 <head> 5 <title>简单form 表单</title> 6 </head> 7 8 <!-- 简单的form 表单 --> 9 <body> 10 <form action="js.html" method="post"> 11 <p>账号：<input type="test" value="DemoName" /></p> 12 <p>密码：<input type="password" value="DemoPassword" /></p> 13 <input type="submit" value="提交" /> 14 </form> 15 </body> 16 </html>
from 常用属性
1、name 属性：规定表单的名称
2、action 属性：规定表单提交的路径
3、method 属性：设置表单的提交方式
属性值：GET :默认值，get请求没有消息体，请求参数都放在url 路径后面，以？隔开，多个参数以 & 相连
有大小限制，即提交的数据量要小于1024字节
POST :对请求参数信息进行了隐藏，不会在地址栏显示，安全性较高，没有大小限制
4、target 属性：规定在何处打开表单提交的url
属性值：_blank 在新窗口/选项卡中打开
_self 在同一框架中打开
_parent 在父框架中打开
_top 在整个窗口中打开
framename 在指定的框架中打开
示例： framename 属性值
1 <!doctype html> 2 <html> 3 <head> 4 <meta> 5 <title>framename 示例</title> 6 </head> 7 8 <body> 9 <!-- 点击 提交Name1 会在 <iframe>标签中打开 --> 10 <form action="js.html" method="post" target="Name1"> 11 <input type="submit" value="提交Name1" /> 12 </form> 13 <iframe name="Name1" id="iframeID1" src="" width="300px" height="80px" frameborder="1" > 14 </iframe> 15 16 <!-- 点击提交Name2 会在新的窗口中打开， 17 因为指定的name 不存在，所以会在新的窗口中打开，若多次提交，则每次都会跳到这个窗口 --> 18 <form action="js.html" method="post" target="Name2"> 19 <input type="submit" value="提交Name2" /> 20 </form> 21 <iframe id="iframeID2" src="" width="300px" height="80px" frameborder="1" > 22 </iframe> 23 </body> 24 </html>
将form 表单中的数据转换成json 格式数据
1 <form id="searchForm"> 2 <table class="table-edit" width="80%" align="center"> 3 <tr> 4 <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> 5 <script type="text/javascript"> 6 $(function(){ 7 $.fn.serializeJson=function(){ 8 // 定义一个json对象 9 var serializeObj={}; 10 // this 就是谁调用，就把谁转换为数组 11 var array=this.serializeArray(); 12 //遍历数组， 13 $(array).each(function(){ 14 //判断是否有对应的名称 16 if(serializeObj[this.name]){ 17 //判断这个名称是否有值，若有多个值，则多个值存到一个数组中 19 if($.isArray(serializeObj[this.name])){ 20 //若有值，则追加。 22 serializeObj[this.name].push(this.value); 23 }else{ 24 25 serializeObj[this.name]=[serializeObj[this.name],this.value]; 26 } 27 }else{ 28 // 若无对应的名称 ,则创建名称。然后赋值 30 serializeObj[this.name]=this.value; 31 } 32 }); 33 return serializeObj; 34 }; 35 36 37 //给查询按钮（searchBtn） 添加点击事件 38 $('#searchBtn').click(function(){ 39 //1、将表单转换成json对象 40 var formData=$('#searchForm').serializeJson(); 41 42 //2、调用datagrid的load方法，将json对象通过分页请求，发送到后台 43 $('#grid').datagrid('load',formData); 44 //3、关闭查询窗口 45 $('#searchWindow').window('close'); 46 47 }); 48 }); 49 </script> 50 </td> 51 </tr> 52 </table> 53 </form>
/