Web 辅助功能 - 控件提交按钮不在 <form> 中是否正确 HTML 结构？
Web Accessibility - Control submit button not in the <form> is correct HTML structure?
我在该项目上遵循 WCAG 2.1 A 级，并希望工作出色“没有 JavaScript” 包含任何 <form> 元素。
这是我的示例代码：
// cart.html
<div class="wrapper">
<!-- Form A -->
<form action="checkout-step1.html">
<h2>A form</h2>
<label for="input1">input1</label>
<input type="text" name="input1" id="input1" value="Cart Data">
<input type="hidden" name="coupon-use" value="XXXXXX">
<!-- Hide Submit Button -->
<button id="btnCheckout" type="submit" style="display: none;">Checkout Cart</button>
</form>
<!-- Form B -->
<form action="cart.html">
<h2>B form</h2>
<label for="coupon">coupon</label>
<input type="text" name="coupon" id="coupon" value="CouponId">
<button class="btn" type="submit">use</button>
<div>
<!-- Use label to submit another form -->
<label class="btn" for="btnCheckout">Checkout</label>
</div>
</form>
</div>
我用了 Google 灯塔，The W3C Markup Validation Service, WAVE Web Accessibility Evaluation Tool
验证页面。有些东西看起来不错，但得到了一些关于 label 的警报，该 label 在工具 WAVE 上控制另一个表单提交。
Orphaned form label
A form label is present, but it is not correctly associated with a form control.
我可以使用该标签提交另一个 <form> 吗？这是正确的 HTML 结构吗？
简答
为了在没有 JavaScript 的情况下工作，您需要将所有内容移动到一个表单中，或者您需要在服务器端处理所有内容并单独提交表单。
我可以使用该标签提交另一个吗？这是正确的 HTML 结构吗？
错误是因为您在两个表单之间发送信息，如果一个表单中的标签指向另一个表单，那么它在技术上是无效的。
此外，我以前从未见过与按钮关联的标签，但令我惊讶的是它是有效的 HTML。再说一次，这不是预期的（我会阅读并查看是否可以找到关于标签是否对按钮有效的明确指导）。
无论你在技术上如何做到这一点，我的意思是，它有效（令人惊讶）但这不是一个好的做法。
不过还有更大的问题。
用户不能一开始就点击标签，而且标签提交表单也是意想不到的行为（预期行为是可访问性的很大一部分）。同样按“enter”提交表单将不起作用，因为您没有第二个表单的提交按钮，所以这是更多缺失的行为。
如果您的提交按钮是 display:none，则无法访问，这是您需要更正的另一个问题。
最后即使提交了第一个表单，没有JavaScript也无法获取到第二个表单信息。
选项 1
让一切成为一种形式。这样当您提交表单时，所有内容都会一起发送。
这是迄今为止最简单、最简洁的方法，但显然您可能需要为此稍微重新设计。
选项 2
在服务器端处理多个表单提交。
您必须在服务器上设置会话才能正确关联这两个表单。
在第一个表单上，您必须有一个复选框，上面写着“我有一张优惠券要使用”，并且最初隐藏第二个表单。
然后当提交第一个表单时，如果未选中此复选框，您将不得不将它们路由到下一个结帐页面，或者将它们路由回同一页面，这次显示优惠券部分。
重新填写第一个表单（所有表单 disabled）以便他们可以看到他们的信息是正确的并隐藏该表单上的提交按钮。
然后当他们提交优惠券表格时使用您的会话 ID 来匹配数据并重定向到新页面。
如您所见，第二个选项混乱且充满问题（例如，您需要一个后退按钮，以便他们可以编辑初始表单）。
我会把所有东西都放在一个表格里。
我在该项目上遵循 WCAG 2.1 A 级，并希望工作出色“没有 JavaScript” 包含任何 <form> 元素。
这是我的示例代码：
// cart.html
<div class="wrapper">
<!-- Form A -->
<form action="checkout-step1.html">
<h2>A form</h2>
<label for="input1">input1</label>
<input type="text" name="input1" id="input1" value="Cart Data">
<input type="hidden" name="coupon-use" value="XXXXXX">
<!-- Hide Submit Button -->
<button id="btnCheckout" type="submit" style="display: none;">Checkout Cart</button>
</form>
<!-- Form B -->
<form action="cart.html">
<h2>B form</h2>
<label for="coupon">coupon</label>
<input type="text" name="coupon" id="coupon" value="CouponId">
<button class="btn" type="submit">use</button>
<div>
<!-- Use label to submit another form -->
<label class="btn" for="btnCheckout">Checkout</label>
</div>
</form>
</div>
我用了 Google 灯塔，The W3C Markup Validation Service, WAVE Web Accessibility Evaluation Tool
验证页面。有些东西看起来不错，但得到了一些关于 label 的警报，该 label 在工具 WAVE 上控制另一个表单提交。
Orphaned form label
A form label is present, but it is not correctly associated with a form control.
我可以使用该标签提交另一个 <form> 吗？这是正确的 HTML 结构吗？
简答
为了在没有 JavaScript 的情况下工作，您需要将所有内容移动到一个表单中，或者您需要在服务器端处理所有内容并单独提交表单。
我可以使用该标签提交另一个吗？这是正确的 HTML 结构吗？
错误是因为您在两个表单之间发送信息，如果一个表单中的标签指向另一个表单，那么它在技术上是无效的。
此外，我以前从未见过与按钮关联的标签，但令我惊讶的是它是有效的 HTML。再说一次，这不是预期的（我会阅读并查看是否可以找到关于标签是否对按钮有效的明确指导）。
无论你在技术上如何做到这一点，我的意思是，它有效（令人惊讶）但这不是一个好的做法。
不过还有更大的问题。
用户不能一开始就点击标签，而且标签提交表单也是意想不到的行为（预期行为是可访问性的很大一部分）。同样按“enter”提交表单将不起作用，因为您没有第二个表单的提交按钮，所以这是更多缺失的行为。
如果您的提交按钮是 display:none，则无法访问，这是您需要更正的另一个问题。
最后即使提交了第一个表单，没有JavaScript也无法获取到第二个表单信息。
选项 1
让一切成为一种形式。这样当您提交表单时，所有内容都会一起发送。
这是迄今为止最简单、最简洁的方法，但显然您可能需要为此稍微重新设计。
选项 2
在服务器端处理多个表单提交。
您必须在服务器上设置会话才能正确关联这两个表单。
在第一个表单上，您必须有一个复选框，上面写着“我有一张优惠券要使用”，并且最初隐藏第二个表单。
然后当提交第一个表单时，如果未选中此复选框，您将不得不将它们路由到下一个结帐页面，或者将它们路由回同一页面，这次显示优惠券部分。
重新填写第一个表单（所有表单 disabled）以便他们可以看到他们的信息是正确的并隐藏该表单上的提交按钮。
然后当他们提交优惠券表格时使用您的会话 ID 来匹配数据并重定向到新页面。
如您所见，第二个选项混乱且充满问题（例如，您需要一个后退按钮，以便他们可以编辑初始表单）。
我会把所有东西都放在一个表格里。