<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>
/