html - 您可以包装表单元素，例如和在 HTML 中标签？

Question

我正在构建一个需要通过将不透明度的 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>

标签： htmlformsvue.jsaccessibility

Answer 1

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

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

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