<form> 标签 // HTML 表单 // from 表单转换成json 格式

form 表单，对开发人员来说是在熟悉不过的了，它是页面与web服务器交互时的重要信息来源

表单能够包含input 元素，比如字段，复选框，单选框，提交按钮等等。用来向服务器传输数据。

form 是块级元素

简单的form 表单

示例：

 <!doctype html>

 <html>

   <head>

     <title>简单form 表单</title>

   </head>

 <!-- 简单的form 表单 -->

   <body>

         <form action="js.html" method="post">

             <p>账号：<input type="test" value="DemoName" /></p>

             <p>密码：<input type="password" value="DemoPassword" /></p>

             <input type="submit" value="提交" />

         </form>

   </body>

 </html>

from 常用属性

　　1、name　　属性：规定表单的名称

　　2、action　　属性：规定表单提交的路径

　　3、method　属性：设置表单的提交方式

　　　　　　属性值：GET　　:默认值，get请求没有消息体，请求参数都放在url 路径后面，以？隔开，多个参数以 & 相连

　　　　　　　　　　　　　　有大小限制，即提交的数据量要小于1024字节

　　　　　　　　　　POST　 :对请求参数信息进行了隐藏，不会在地址栏显示，安全性较高，没有大小限制

　　4、target　　属性：规定在何处打开表单提交的url

　　　　　　属性值：_blank　　　　在新窗口/选项卡中打开

　　　　　　　　　　_self　　　　在同一框架中打开

　　　　　　　　　　_parent　　　在父框架中打开

　　　　　　　　　　_top　　　　　在整个窗口中打开

　　　　　　　　　　framename　　在指定的框架中打开

示例： framename 属性值

 <!doctype html>

 <html>

   <head>

     <meta>

     <title>framename 示例</title>

   </head>

   <body>

         <!-- 点击 提交Name1 会在 <iframe>标签中打开 -->

         <form action="js.html" method="post" target="Name1">

             <input type="submit" value="提交Name1" />

         </form>

         <iframe name="Name1"  id="iframeID1" src="" width="300px" height="80px" frameborder="1" >

         </iframe>

         <!-- 点击提交Name2 会在新的窗口中打开，

              因为指定的name 不存在，所以会在新的窗口中打开，若多次提交，则每次都会跳到这个窗口  -->

         <form action="js.html" method="post" target="Name2">

             <input type="submit" value="提交Name2" />

         </form>

         <iframe  id="iframeID2" src="" width="300px" height="80px" frameborder="1" >

         </iframe>

   </body>

 </html>

将form 表单中的数据转换成json 格式数据

 <form id="searchForm">

  <table class="table-edit" width="80%" align="center">

    <tr>

     <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>

         <script type="text/javascript">

             $(function(){

                   $.fn.serializeJson=function(){

                   　　// 定义一个json对象

                   　　var serializeObj={};

                   　　// this 就是谁调用，就把谁转换为数组

                   　　var array=this.serializeArray();

                   　　//遍历数组，

                   　　$(array).each(function(){

                   　　　　 //判断是否有对应的名称

                    　　　　if(serializeObj[this.name]){

                   　　　　 　　　　//判断这个名称是否有值，若有多个值，则多个值存到一个数组中

                                 if($.isArray(serializeObj[this.name])){

                         　　　　　　　　//若有值，则追加。

                                      serializeObj[this.name].push(this.value);

                         　　　　　}else{  

                                      serializeObj[this.name]=[serializeObj[this.name],this.value];

                            　　　}

                  　　　　　}else{

                      　　　　　　// 若无对应的名称 ,则创建名称。然后赋值

                                serializeObj[this.name]=this.value;

                      　　 }

                  　　});

                   　 return serializeObj;

              　　};

              //给查询按钮（searchBtn） 添加点击事件

              $('#searchBtn').click(function(){

             //1、将表单转换成json对象

             var formData=$('#searchForm').serializeJson();

             //2、调用datagrid的load方法，将json对象通过分页请求，发送到后台

             $('#grid').datagrid('load',formData);

             //3、关闭查询窗口

             $('#searchWindow').window('close');

            });

          });

         </script>

       </td>

     </tr>

   </table>

 </form>