HTML5 `form` 元素的 `novalidate` 与 `formtarget` 属性高阶用法

别再让表单绑架你！`novalidate` 和 `formtarget` 的高阶玩法

各位前端同仁，有没有被 HTML 表单支配过的恐惧？那种辛辛苦苦填了一大堆信息，结果一点“提交”按钮，页面瞬间一片红，告诉你这没填、那格式不对的崩溃感？相信我，你不是一个人。

HTML5 确实给表单带来了很多便利，比如内置的验证功能，能帮你快速检验邮箱格式、必填项等等。但有时候，这种“贴心”反而变成了“绑架”。你可能需要绕过验证，或者想让表单提交到另一个页面，这时候，novalidate 和 formtarget 就成了你的救星。

别担心，这俩属性一点都不复杂，掌握了它们，你就能彻底掌控表单的命运，让它为你所用，而不是反过来。

`novalidate`：叛逆的“不验证”按钮

想象一下，你正在做一个复杂的表单，其中一部分内容只有特定情况下才需要填写，但 HTML5 默认的验证机制却会强制要求所有字段都符合规则。这时候，novalidate 属性就派上用场了。

简单来说，novalidate 属性告诉浏览器：“哥们，这次提交你就睁一只眼闭一只眼吧，别管我这些字段填没填、对不对，直接提交就行！”

两种用法：

在 <form> 标签上使用：

<form action="/submit" method="post" novalidate>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">提交</button>
</form>

在这个例子中，即使 name 字段是 required，但由于 form 标签设置了 novalidate，浏览器也会忽略验证，直接提交表单。邮箱字段就算不填、格式不对，也无所谓。

在 <button> 或 <input type="submit"> 标签上使用：

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">提交</button>
  <button type="submit" formnovalidate>快速提交</button>
</form>

这里，只有点击 "快速提交" 按钮时，表单才会绕过验证。这意味着你可以拥有一个 "正常提交" 按钮，进行严格验证，同时拥有一个 "快速提交" 按钮，方便用户在特定情况下直接提交。

应用场景：

草稿箱功能： 用户填写表单时，可能只想保存草稿，而不是立即提交。此时，使用带有 formnovalidate 的按钮，可以跳过验证，将当前填写的内容保存到数据库，稍后再继续编辑。
```
<button type="submit" formnovalidate>保存草稿</button>
```
分步表单： 复杂的表单可能会分成多个步骤，用户每完成一步，就保存一次。每一步都进行完整验证会很麻烦，所以可以使用 novalidate 跳过验证，只在最后一步提交时才进行完整验证。
自定义验证： 有时候，你可能需要自己编写 JavaScript 代码来进行更复杂的验证，而不是依赖浏览器提供的简单验证。此时，你可以使用 novalidate 禁用浏览器的默认验证，然后完全控制验证流程。

注意事项：

novalidate 只是禁用浏览器提供的默认验证，并不能阻止你自己在 JavaScript 代码中进行验证。
novalidate 只影响表单的提交行为，不会影响表单字段的样式。也就是说，即使设置了 novalidate，如果表单字段设置了 required 属性，浏览器仍然可能会显示一些提示信息，例如在字段旁边显示一个红色星号。

`formtarget`：让表单“乾坤大挪移”

有时候，你可能需要将表单提交到不同的 URL，或者在新的标签页中打开提交结果。 formtarget 属性就是为此而生的，它就像一个“乾坤大挪移”的武功，可以将表单的数据发送到你指定的目的地。

用法：

formtarget 属性只能在 <button> 或 <input type="submit"> 标签上使用，它指定了表单提交后，服务器响应应该在哪里显示。

<form action="/submit" 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" formtarget="_blank">在新标签页中提交</button>
  <button type="submit" formtarget="_self">在当前页面提交</button>
  <button type="submit" formtarget="_parent">在父框架中提交</button>
  <button type="submit" formtarget="_top">在顶层框架中提交</button>
  <button type="submit" formtarget="myIframe">在指定 iframe 中提交</button>
</form>

<iframe name="myIframe" src=""></iframe>

在这个例子中：

点击 "提交" 按钮，表单会默认提交到 form 标签的 action 属性指定的 URL (/submit)，并在当前页面显示结果。
点击 "在新标签页中提交" 按钮，表单会提交到 /submit，并在新的标签页中显示结果。 (_blank)
点击 "在当前页面提交" 按钮，表单会提交到 /submit，并在当前页面显示结果。（_self，默认行为）
点击 "在父框架中提交" 按钮，表单会提交到 /submit，并在父框架中显示结果。（_parent，如果当前页面在 iframe 中）
点击 "在顶层框架中提交" 按钮，表单会提交到 /submit，并在顶层框架中显示结果。（_top，如果当前页面在多层 iframe 中）
点击 "在指定 iframe 中提交" 按钮，表单会提交到 /submit，并在 name 属性为 "myIframe" 的 iframe 中显示结果。

应用场景：

预览功能： 用户在编辑内容时，可能需要预览最终效果。可以将表单提交到另一个 URL，生成预览页面，并在新的标签页中显示。
```
<button type="submit" formtarget="_blank" formaction="/preview">预览</button>
```
多目标提交： 同一个表单，可能需要提交到不同的后端服务。例如，用户填写个人信息后，可能需要同时提交到 CRM 系统和邮件订阅系统。
```
<button type="submit" formaction="/crm">提交到 CRM</button>
<button type="submit" formaction="/subscribe">订阅邮件</button>
```
Iframe 集成： 在某些情况下，你可能需要在 iframe 中显示表单的提交结果。可以使用 formtarget 将表单提交到指定的 iframe。

注意事项：

formtarget 属性会覆盖 form 标签的 target 属性。
formaction 属性 (与 formtarget 经常一起使用) 可以让你为不同的提交按钮指定不同的 URL，而不用修改 form 标签的 action 属性。
```
<button type="submit" formaction="/save">保存</button>
<button type="submit" formaction="/delete">删除</button>
```

组合拳：`novalidate` + `formtarget`

这两个属性可以一起使用，发挥更大的威力。例如，你可以创建一个 "保存草稿" 按钮，它既跳过验证，又在新的标签页中显示保存结果。

<button type="submit" formnovalidate formtarget="_blank" formaction="/save_draft">保存草稿并预览</button>

总结

novalidate 和 formtarget 属性是 HTML5 表单中两个非常实用但经常被忽视的特性。它们可以让你更灵活地控制表单的提交行为，满足各种复杂的业务需求。掌握了这两个属性，你就能摆脱表单的束缚，真正成为表单的主人，让它为你服务，而不是让你为它加班！

希望这篇文章能帮助你更深入地理解 novalidate 和 formtarget 属性，并在实际开发中灵活运用它们。记住，优秀的开发者不是只会写代码，更重要的是理解代码背后的原理，并能够创造性地解决问题。祝你在前端开发的道路上越走越远！

别再让表单绑架你！novalidate 和 formtarget 的高阶玩法

novalidate：叛逆的“不验证”按钮

formtarget：让表单“乾坤大挪移”

组合拳：novalidate + formtarget

总结

发表回复 取消回复

别再让表单绑架你！`novalidate` 和 `formtarget` 的高阶玩法

`novalidate`：叛逆的“不验证”按钮

`formtarget`：让表单“乾坤大挪移”

组合拳：`novalidate` + `formtarget`

发表回复取消回复