当表单也学会了“七十二变”：formaction, formenctype, formmethod 的那些事儿
咱们平时上网冲浪，填表格那可是家常便饭。注册个账号、提交个反馈、甚至网购剁手，都离不开表单这玩意儿。但你有没有想过，表单提交背后的故事，其实比你想象的要精彩得多？
今天，咱们就来聊聊表单提交中的三个“魔法师”：formaction、formenctype 和 formmethod。别怕，听名字好像很高深，其实它们的作用就像孙悟空的七十二变，能让你的表单提交行为变得灵活多变，应对各种奇奇怪怪的需求。
先来个开胃小菜：formaction – “我的提交，我做主！”
想象一下，你正在一家神奇的餐厅吃饭，菜单上有各种美味佳肴。你点了一道红烧肉，服务员就屁颠屁颠地跑去后厨下单。这里的服务员就像是表单，而后厨就是接收表单数据的服务器。
默认情况下，表单提交的数据会被发送到 <form> 标签的 action 属性指定的 URL。但如果你想让某个特定的按钮，比如“提交并发送到另一个邮箱”按钮，把数据发送到另一个不同的 URL 呢？这时候，formaction 就派上用场了！
formaction 属性允许你为 特定的 <button> 或 <input type="submit"> 元素 指定一个不同的提交 URL，覆盖 <form> 标签的 action 属性。
举个栗子：
<form action="/submit-form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">提交</button>
<button type="submit" formaction="/submit-to-email">提交并发送到另一个邮箱</button>
</form>在这个例子中，第一个“提交”按钮会把数据发送到 /submit-form，而第二个“提交并发送到另一个邮箱”按钮则会把数据发送到 /submit-to-email。
是不是感觉有点像孙悟空变出了两个分身，一个负责打妖怪，一个负责摘桃子？formaction 就是这么的给力，让你的表单提交更加精细化。
再来点主菜：formenctype – “数据打包，各有千秋！”
提交表单的时候，数据需要被打包成一定的格式才能发送到服务器。formenctype 属性就是用来指定这种数据打包格式的。它有点像快递员，需要根据物品的特性选择不同的包装方式，比如易碎品要用气泡膜，液体要用密封袋。
formenctype 属性主要有三种取值：
application/x-www-form-urlencoded(默认值): 这是最常见的编码方式，会将数据编码成 URL 字符串，例如name=John&[email protected]。这种方式简单易懂，适合传输文本数据。multipart/form-data: 这种方式主要用于上传文件。它会将数据分割成多个部分，每个部分包含一个字段的数据，并使用 boundary 分隔。这种方式可以同时传输文本和二进制数据，例如图片、视频等。text/plain: 这种方式会将数据以纯文本的形式发送，不进行任何编码。这种方式很少使用，因为它不支持传输复杂的数据结构。
和 formaction 类似，formenctype 属性也可以在 <button> 或 <input type="submit"> 元素上使用，覆盖 <form> 标签的 enctype 属性。
举个栗子：
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="file">选择文件：</label>
<input type="file" id="file" name="file"><br><br>
<button type="submit">上传</button>
<button type="submit" formaction="/submit-form" formenctype="application/x-www-form-urlencoded">提交姓名</button>
</form>在这个例子中，第一个“上传”按钮会使用 multipart/form-data 编码方式上传文件，而第二个“提交姓名”按钮则会使用 application/x-www-form-urlencoded 编码方式只提交姓名，并且提交到 /submit-form。
看到了吗？formenctype 就像是一个精明的快递员，知道什么时候该用什么包装，确保数据安全可靠地送达目的地。
最后来个甜点：formmethod – “提交方式，任你挑选！”
HTTP 协议定义了多种请求方法，例如 GET、POST、PUT、DELETE 等。formmethod 属性就是用来指定表单提交时使用的 HTTP 请求方法的。
常见的 HTTP 请求方法有两种：
- GET: GET 请求主要用于获取资源。它会将数据附加到 URL 的查询字符串中，例如
?name=John&[email protected]。GET 请求的数据会暴露在 URL 中，因此不适合传输敏感数据。此外，GET 请求对 URL 的长度有限制。 - POST: POST 请求主要用于提交数据。它会将数据放在请求体中发送到服务器。POST 请求的数据不会暴露在 URL 中，因此适合传输敏感数据。此外，POST 请求对数据长度没有限制。
同样地，formmethod 属性也可以在 <button> 或 <input type="submit"> 元素上使用，覆盖 <form> 标签的 method 属性。
举个栗子：
<form action="/search" method="get">
<label for="keyword">关键词：</label>
<input type="text" id="keyword" name="keyword"><br><br>
<button type="submit">搜索</button>
<button type="submit" formaction="/submit-data" formmethod="post">提交数据</button>
</form>在这个例子中，第一个“搜索”按钮会使用 GET 请求提交数据，而第二个“提交数据”按钮则会使用 POST 请求提交数据，并且提交到 /submit-data。
formmethod 就像是一个经验丰富的司机，知道什么时候该走高速，什么时候该走小路，选择最合适的路线到达目的地。
总结一下：
formaction、formenctype 和 formmethod 这三个属性，就像是表单的三个“魔杖”，可以让你的表单提交行为变得更加灵活和可控。
formaction: 指定提交 URL，让你可以将不同的按钮提交到不同的服务器端点。formenctype: 指定数据编码方式，让你能够根据数据类型选择合适的打包方式。formmethod: 指定 HTTP 请求方法，让你能够根据需求选择 GET 或 POST 请求。
更进一步的思考：
了解了这些属性，我们就可以做更多有趣的事情了。
- 动态表单： 我们可以根据用户的选择动态地修改
formaction、formenctype和formmethod属性，实现更复杂的表单交互。 - 多步骤表单： 我们可以将一个大的表单分解成多个小步骤，每个步骤使用不同的提交 URL 和编码方式。
- 文件上传优化： 我们可以根据文件大小和类型选择不同的上传方式，优化用户体验。
最后，来点幽默的结尾：
想象一下，如果你的表单也学会了这三个“魔法”，它就可以像孙悟空一样，上天入地，无所不能。你可以让它提交到不同的服务器，用不同的方式打包数据，选择不同的路线到达目的地。甚至，你还可以让它帮你自动填写各种表格，省去你繁琐的操作。
当然，这只是一个美好的愿景。目前，表单还只是一个工具，需要我们来控制和指挥。但是，随着 Web 技术的不断发展，我相信未来表单的功能会越来越强大，越来越智能。
希望这篇文章能让你对 formaction、formenctype 和 formmethod 有更深入的了解。下次你再填写表单的时候，不妨想一想这些“魔法师”在背后默默地工作，让你的网络生活更加便捷。
记住，代码的世界充满了乐趣，只要你敢于探索，就能发现更多的惊喜！Happy coding!