form · h5_doc · 看云

### **form 標簽屬性與事件說明** | 屬性 | 說明 | | --- | --- | | action | 請求url地址 | | [method](https://www.runoob.com/tags/att-form-method.html) | 請求方式（get/post），默認：get方式 | | [target](https://www.runoob.com/tags/att-form-target.html) | 打開 action URL 方式 | | [enctype](https://www.runoob.com/tags/att-form-enctype.html) | 發送表單數據之前如何對其進行編碼（適用于 method="post" 的情況。默認值：application/x-www-form-urlencoded） | | [accept-charset]([https://www.runoob.com/tags/att-form-accept-charset.html](https://www.runoob.com/tags/att-form-accept-charset.html)) | 規定服務器用哪種字符集處理表單數據（字符編碼、拉丁字母表的字符編碼、簡體中文字符集） | | 事件 | 說明 | | --- | --- | | [onsubmit](https://www.runoob.com/tags/ev-onsubmit.html) | 提交表單觸發事件，回調 | ### **form 表單提交** > 進行阻止提交。在form標簽上面將添加 onsubmit 事件，當input 類型設置為提交按鈕，就可以提交上了。阻止提交：使用return false/ture 或者 e.preventDefault()，兩個可以一起使用 ------- > 注意：使用form表單提交后，后臺可以使用重定向到另一個url地址。而ajax卻是不可能的。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="http://xxx..com/api/form" method="post"> <div> <input type="text" name="name"> </div> <div> <input type="password" name="password"> </div> <button type="submit" class="submit">提交</button> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function () { $('form').submit(function (e) { if($('input[name=name]').val() && $('input[name=password]').val()) { return true; } console.log('請填寫輸入框內容') e.preventDefault() // 也可以使用 return false; 來阻止提交，使用這個比較好 }) }) </script> </body> </html> ``` ### **input 內使用disabled后臺無法接收** > 解決方案：兩種，第一種將在復制一個input框，提交的時候提交這個就好。另一種設置： ### **擴展** > 如果是ajax請求，進行重定向話，jquery的ajax在回調報錯（error: function () {}）里面拿到重定向里面內容。注意：以重定向的域不是當前訪問域名與接口域名。會涉及到跨域