你能把 <label> 和 <input> 等表单元素包裹在 HTML <button> 标签中吗？答案

【问题标题】：Can you wrap form elements such as <label> and <input> in HTML <button> tag?你能把 <label> 和 <input> 等表单元素包裹在 HTML <button> 标签中吗？
【发布时间】：2020-05-25 06:05:57
【问题描述】：

我正在构建一个组件，该组件需要通过将 opacity 的 css 属性添加为 0 来隐藏输入。但是该组件的外观是一个按钮。隐藏输入的原因是出于选择目的。输入元素支持无线电类型。

问题 1： 将按钮包裹在表单元素周围有什么含义？是否有任何可访问性问题？ 问题2：而不是<button> 标签，使用<fieldset> 会更好吗？

下面是组件的Vue模板？

<template>
    <button :class="[$style['button-group-item'], sizeClass, classObject, variationClass]">
        <label class='button-group-item__label'>
            <input class="button-group-item__input" type="radio" :checked="checked" @change="$emit('change', $event.target.checked)"/>
            <span>
                {{ text }}
            </span>
        </label>
    </button>
</template>

【问题讨论】：

为什么需要使用 css 隐藏元素而不是使用 v-if 指令？
对于可访问性，标签是指输入，按钮是指表单。你为什么要把它们结合起来？
您是否尝试制作切换按钮？
这主要是由于组件的设计规范。但正确，@GrahamRitchie，我正在尝试制作一个切换按钮。从功能上考虑选项卡。
我认为最好只使用<button aria-pressed=false>label here</button>。详情请见developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/…。

标签： html forms vue.js accessibility

【解决方案1】：

您不应该将输入+标签包装在按钮中。结果会很奇怪：

在另一个可聚焦元素（如按钮）内不应有任何可聚焦元素（如输入）。
按钮的可访问标签应该是什么？这可能会令人困惑。
单击按钮时会发生什么？这将不清楚，因为可访问的名称也将不清楚。
在单击输入时是否应该激活按钮，因为输入在按钮内部？答案取决于浏览器，无论它是什么，它都会让用户感到困惑/不按预期行事并让用户感到沮丧。

出于所有这些原因，我强烈建议您不要使用按钮。使用字段集要好得多，这是进入这里的正常方式。使用 CSS 使您的字段集看起来像一个按钮。

【讨论】：

【解决方案2】：

是的，会有可访问性问题。

1) 使用 Button 会混淆语音软件。焦点状态也会表现不正确（键盘焦点）。

2）在代码层面，需要防止Button的默认行为。

3) 你正在破坏 HTML5 语义标签的规则

4) 如果您不执行任何操作，请不要使用 Button。使 CSS 中的字段集看起来像一个按钮。

【讨论】：