Должно ли пространство между флажком и меткой быть кликабельным?

Возьмем, к примеру, эти два сценария. Оба очень похожих HTML, но разные семантически:

Сценарий 1:

<label for="myCheckbox">
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Сценарий 2:

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

Оба из них будут отображаться , чтобы произвести то же самое. Однако они этого не делают. Разница заключается в неявном пространстве между флажком и меткой. В первом сценарии это пространство также активирует флажок, потому что он является частью вашей метки. Однако второй сценарий не будет, потому что он находится за пределами метки. Они создают небольшое пространство, где, если пользователь щелкнет, он не включит флажок, как ожидалось.

Мой флажок Мой флажок  Мой флажок

В зависимости от того, как настроен флажок, там может быть еще больше пространства. Например, если вы поместили флажок влево и поместили границу в 10, 15 или 20 пикселей вправо.

Обычно, когда я думаю о UX, я пытаюсь сделать весь связанный блок все кликабельным для одного и того же. Для меня левая сторона флажка до правой части его метки должна быть частью одного сплошного блока, который активирует элемент управления.

Если промежуток между флажком и его текстом метки также активирует его? Каковы некоторые (если есть) обстоятельства, в которых вы не хотели бы сделать это?

77 голосов | спросил animuson 12 J000000Thursday12 2012, 23:15:27

6 ответов


78

Я считаю, что это нужно, так как весь регион в глазах пользователя - это «выбор». Теперь, я думаю, вы можете взглянуть на этот вопрос под другим углом, который ... как мы можем удалить восприятие пространства?

Одним из решений является включение фона, окружающего флажок и область метки. При наведении на задний план фон может также изменить цвет, чтобы еще больше укрепить, что вся эта область выбрана. введите описание изображения здесь>> </p></body></html>

ответил Tom R 13 J000000Friday12 2012, 00:20:54
8

Я согласен с вашими чувствами в том, что вся область слева от флажка справа от ярлыка должна быть интерактивной, поскольку это позволяет меньше промахов и помогает на сенсорных устройствах.

Значок мыши также должен визуально указывать это на всем кликабельной области.

ответил darryn.ten 12 J000000Thursday12 2012, 23:43:02
6

Согласно http://www.w3.org/wiki/HTML/Elements/label ваш первый сценарий является неправильным и должен быть указан как:

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Теперь, с другой стороны, как следует обрабатывать неявное пространство?

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Я собираюсь повторно разбить их, с некоторыми комментариями по форматированию

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
    My Checkbox
</label>
  

Если промежуток между флажком и его текстом метки также активирует его?

Сценарий 2 должен иметь неконтактный пробел между флажком и меткой, поскольку неявное пространство HTML между двумя элементами.

Сценарий 1 должен иметь clickable whitespace между флажком и меткой, потому что есть неявное пространство HTML рядом с текстовым и входным элементами.

  

Каковы некоторые (если есть) обстоятельства, в которых вы не хотели бы этого делать?

Честно говоря, я не могу придумать такого обстоятельства. Я лично хочу, чтобы весь диапазон вокруг моего флажка установлен. См. ответ от Tom R .


Если вы хотите предотвратить это в будущем, используйте эту форму:

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->

Однако у вас, вероятно, есть некоторые дополнения к элементам формы, чтобы начать с них, поэтому у них будет пространство вокруг них. Затем это становится проблемой CSS.

ответил jcolebrand 13 J000000Friday12 2012, 00:27:36
1

Нажатие метки иногда используется для получения доступа к дополнительной информации о выборе или создания экземпляра подсказки при нажатии, а не на наведении курсора для какой-либо эстетической цели. Если это необходимо, лучший подход обычно заключается в том, чтобы максимизировать область с возможностью кликов, даже если она не была четко определена визуально (по возможности лучше избегать ящиков в коробках).

ответил Shash 13 J000000Friday12 2012, 01:02:46
1

Да, пространство между флажком и его меткой должно быть доступно для кликов. Это связано с тем, что если пользователь нажимает пробел между его обычно, потому что они намеренно хотят щелкнуть флажок или текстовую метку, но случайно переместили свою мышь в промежуток. Вы должны учитывать эти ошибки пользователя и сделать клик доступным.

Вот хорошая статья, которая показывает вам правильный способ сделать ваши флажки интерактивными: Почему у вашей формы флажки должны иметь метки тегов

ответил pearso 5 PMpSat, 05 Apr 2014 20:31:44 +040031Saturday 2014, 20:31:44
0

По-моему, да. Это просто продолжение контроля с тем же действием, а не с двумя отдельными действиями.

Единственный случай, когда я вижу, что вы не хотите, чтобы это произошло, - это если щелчок в любом пространстве привел к различным действиям. (например, нажатие на метку выбрало любые дочерние элементы, другие элементы, относящиеся к одной теме и т. д.)

ответил Ben 12 J000000Thursday12 2012, 23:41:53

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132