Можете ли вы обернуть элементы формы, такие как <label>и <input>в тег HTML <button>? - PullRequest
Новая
       19

Можете ли вы обернуть элементы формы, такие как <label>и <input>в тег HTML <button>?

1 голос
/ 10 февраля 2020

Я создаю компонент, который требует скрытия ввода, добавив свойство 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>

Ответы [ 2 ]

4 голосов
/ 10 февраля 2020

Вы не должны заключать свой ввод + метку в кнопку. Результат будет странным:

  1. Внутри другого фокусируемого элемента (например, кнопки) не должно быть никакого фокусируемого элемента (например, ввода).
  2. Какой должна быть доступная метка кнопки? Вероятно, это будет сбивать с толку.
  3. Что произойдет, когда вы нажмете кнопку? Это будет неясно, потому что доступное имя тоже будет неясно.
  4. Должна ли кнопка активироваться при нажатии на входе, поскольку вход находится внутри кнопки? Ответ зависит от браузера и от того, что он есть, он будет сбивать с толку / не делать того, что ожидается, и расстраивать пользователей.

По всем этим причинам я настоятельно не рекомендую вам использовать кнопку. Использование набора полей намного лучше, это нормальный способ go здесь. Используйте CSS, чтобы ваш набор полей выглядел как кнопка.

1 голос
/ 10 февраля 2020

Да, будут проблемы с доступностью.

1) Использование кнопки приведет в замешательство программу голосовой связи. Состояния фокуса также будут работать неправильно (фокус клавиатуры).

2) На уровне кода необходимо предотвратить поведение кнопки по умолчанию.

3) Вы нарушаете правила semanti c тег HTML5

4) Не используйте кнопку, если вы не выполняете никаких действий. Сделайте набор полей из CSS похожим на кнопку.

...