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 () {}）里面拿到重定向里面内容。注意：以重定向的域不是当前访问域名与接口域名。会涉及到跨域