问题描述
我在该项目上遵循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 Lighthouse The W3C Markup Validation Service，WAVE Web Accessibility Evaluation Tool来
经过验证的页面。看起来不错，但是收到label的一些警报，该{@ 1}控制在工具WAVE上提交另一种表单。
孤立表单标签
存在表单标签，但未正确与表单控件关联。
我可以使用标签提交另一个<form>吗？这是正确的HTML结构吗？
解决方法
简短答案
要使此功能在没有JavaScript的情况下工作，您需要将所有内容移动到一种表单中，或者需要处理服务器端的所有内容并分别提交表单。
我可以使用标签提交另一个吗？这是正确的HTML结构吗？
错误是因为您要在两种形式之间发送信息，一种形式的标签在技术上如果指向另一种形式则无效。
我之前也从未见过与按钮相关的标签，但令我惊讶的是它是有效的HTML。再说一次，这是意料之中的（我将阅读一遍，看看是否可以找到有关标签是否对按钮有效的明确指南。）
无论如何，从技术上讲，您可以做到这一点（令人惊讶），但这不是一个好习惯。
尽管有更大的问题。
用户无法使用Tab键浏览标签，因此标签提交表单也是一种意外行为（预期行为是可访问性的很大一部分）。另外，按“输入”提交表单将不起作用，因为您没有第二个表单的提交按钮，因此缺少更多行为。
如果您的提交按钮为display:none，则无法访问它，因此这是您需要更正的另一个问题。
最后，即使您提交了第一个表单，没有JavaScript也无法获得第二个表单信息。
选项1
全部采用一种形式。这样，当您提交表单时，所有内容将一起发送。
到目前为止，这是最简单，最干净的方法，但是显然您可能需要对此进行一些重新设计。
选项2
处理多个表单提交服务器端。
您必须在服务器上设置一个会话，以便您可以正确地关联这两种形式。
在第一个表格上，您必须具有一个复选框，上面写着“我有要使用的优惠券”，并最初隐藏了第二个表格。
然后，在提交第一个表单时，如果未选中此复选框，则必须将其路由到下一个结帐页面，或者将它们路由回到同一页面，这一次将显示优惠券部分。
重新填充第一个表单（包含所有表单disabled），以便他们可以看到自己的信息正确并隐藏该表单上的“提交”按钮。
然后，当他们提交优惠券表单时，使用您的会话ID来匹配数据并重定向到新页面。
如您所见，第二个选项比较混乱且充满了问题（您需要一个后退按钮，以便他们可以编辑初始表单）。
我将所有内容都放在一种形式中。